Le déploiement d'une application frontend moderne comme Vue.js repose généralement sur la génération de fichiers statiques qui sont ensuite servis par un serveur web performant. L'utilisation de Docker permet d'encapsuler l'application et sa configuration serveur danss un conteneur isolé et reproductible.

Préparation des fichiers de production

La première étape consiste à compiler le projet Vue pour générer les ressources optimisées. Exécutez la commmande suivante à la racine de votre projet :

npm run build

Cette commande crée un répertoire dist/ contenant le code HTML, CSS et JavaScript minifié. Transférez ce dossier sur votre serveur de déploiement (par exemple dans /opt/mon-application).

Configuration du serveur Nginx

Pour gérer correctemnet le routage d'une Single Page Application (SPA), Nginx doit être configuré pour rediriger toutes les requêtes vers index.html. Créez un fichier nommé nginx.conf :

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            # Redirection vers index.html pour le support du mode history de Vue Router
            try_files $uri $uri/ /index.html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}

Création du Dockerfile

Le fichier Dockerfile définit les étapes de construction de l'image Docker. Nous utiliserons l'image officielle Nginx basée sur Alpine Linux pour sa légèreté.

# Utilisation d'une image légère de Nginx
FROM nginx:stable-alpine

# Métadonnées de l'image
LABEL maintainer="engineering@example.com"

# Suppression de la configuration par défaut de Nginx
RUN rm /etc/nginx/conf.d/default.conf

# Copie du fichier de configuration personnalisé
COPY nginx.conf /etc/nginx/nginx.conf

# Copie des fichiers compilés du projet Vue vers le répertoire de service de Nginx
COPY dist/ /usr/share/nginx/html/

# Information sur le port exposé
EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Gestion des images en environnement hors-ligne

Si votre serveur de production n'a pas accès à Internet, vous pouvez exporter l'image depuis une machine disposant d'une connexion :

# Exporter l'image vers une archive tar
docker save -o nginx_base.tar nginx:stable-alpine

# Importer l'image sur le serveur de destination
docker load -i nginx_base.tar

Construction et exécution du conteneur

Une fois les fichiers dist/, nginx.conf et Dockerfile réunis dans le même répertoire sur le serveur, lancez la construction de l'image :

docker build -t vue-app-prod:v1.0 .

Démarrez ensuite le conteneur en mappant le port 80 du conteneur sur le port souhaité de la machine hôte (ici le port 8080) :

docker run -d \
  --name conteneur-vue-instance \
  -p 8080:80 \
  vue-app-prod:v1.0

L'application est désormais accessible via l'adresse http://<IP_DU_SERVEUR>:8080. Le déploiement est effectif et les fichiers locaux du répertoire dist/ peuvent être supprimés, car ils sont désormais intégrés à l'image Docker.