Vue Academy · Leçon

Déployer une application Vue full-stack en production

Docker Compose pour Vue et Fastify, proxy inverse nginx, SSL avec Let’s Encrypt et CI/CD

Déployer une application Vue full-stack en production est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

La topologie de production

En production, une application complète Vue + Fastify s’exécute généralement dans deux conteneurs : un conteneur nginx qui sert les fichiers statiques compilés de Vue, et un conteneur d’API Fastify. nginx relaie également /api vers l’API.

Compiler l’application Vue

Compilez la SPA avec Vite pour produire des ressources statiques optimisées dans dist. C’est ce que nginx servira.

# package.json script
npm run build
# produces dist/ with hashed JS/CSS and index.html

Dockerfile Vue en plusieurs étapes

Utilisez une compilation Docker en plusieurs étapes : compilez avec Node, puis copiez la sortie statique dans une petite image nginx. L’image finale ne contient que les fichiers statiques et nginx.

FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf : SPA et relais d’API

La configuration nginx sert la SPA (avec une solution de repli try_files vers index.html pour le routage côté client) et relaie /api vers le conteneur Fastify en utilisant son nom de service.

server {
  listen 80;
  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api/ {
    proxy_pass http://fastify-api:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

Dockerfile Fastify

L’image d’API installe les dépendances de production et exécute le serveur. Écoutez sur 0.0.0.0 afin que les autres conteneurs puissent y accéder.

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

docker-compose.yml

docker-compose relie les deux services sur un réseau partagé. La cible du relais, fastify-api, dans nginx.conf correspond au nom de service défini ici.

services:
  vue-nginx:
    build: ./frontend
    ports:
      - '80:80'
      - '443:443'
    depends_on:
      - fastify-api
  fastify-api:
    build: ./backend
    environment:
      - JWT_SECRET=${JWT_SECRET}
    expose:
      - '3000'

Découverte des services par leur nom

Sur le réseau Compose, les conteneurs communiquent entre eux grâce au nom du service. nginx relaie les requêtes vers http://fastify-api:3000 : aucune adresse IP n’est nécessaire et le port de l’API n’est pas exposé publiquement.

# only nginx is published to the host (80/443)
# fastify-api uses 'expose', reachable only internally

SSL avec Certbot

Ajoutez HTTPS avec Let’s Encrypt via Certbot. Montez les certificats dans nginx et configurez un bloc serveur sur le port 443, en redirigeant HTTP vers HTTPS.

server {
  listen 443 ssl;
  ssl_certificate /etc/letsencrypt/live/app.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/app.com/privkey.pem;
  # ... same location blocks as before
}
server {
  listen 80;
  return 301 https://$host$request_uri;
}

Renouvellement des certificats Certbot

Les certificats Certbot sont valides pendant 90 jours. Exécutez une commande de renouvellement selon un calendrier (cron ou conteneur auxiliaire), puis rechargez nginx afin que les certificats renouvelés soient pris en compte.

# cron entry, twice daily
certbot renew --quiet && nginx -s reload

CI/CD avec GitHub Actions

Automatisez la compilation et le déploiement avec GitHub Actions : lors d’un push vers la branche principale, compilez et testez, puis compilez et envoyez les images, ou connectez-vous au serveur en SSH pour les récupérer et redémarrer les services avec Compose.

name: deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm test
      - name: Deploy over SSH
        run: ssh $HOST 'cd /app && git pull && docker compose up -d --build'

Secrets et environnement

Ne placez jamais de secrets dans les images. Transmettez-les au moyen de variables d’environnement (environment / env_file de Compose) provenant des secrets GitHub Actions. Gardez JWT_SECRET, les URL de bases de données, etc., en dehors du dépôt.

Vérification rapide

Testez votre compréhension du déploiement d’une application complète.

Récapitulatif

Vous avez appris à effectuer un déploiement en production :

Deux services : vue-nginx (statique) et fastify-api
nginx.conf sert la SPA et relaie /api vers le nom du service d’API
docker-compose les relie ; seul nginx est publié sur l’hôte
HTTPS via Certbot avec renouvellement planifié
GitHub Actions compile, teste et déploie ; les secrets restent dans les variables d’environnement

Questions Fréquemment Posées

La leçon « Déployer une application Vue full-stack en production » est-elle gratuite ?

Oui — le texte complet de « Déployer une application Vue full-stack en production » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Déployer une application Vue full-stack en production » ?

Docker Compose pour Vue et Fastify, proxy inverse nginx, SSL avec Let’s Encrypt et CI/CD Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Déployer une application Vue full-stack en production » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Backend Fastify pour les SPA Vue
Authentification JWT : connexion et actualisation
Appels d’API authentifiés avec les intercepteurs Axios
Déployer une application Vue full-stack en production

← Retour à Vue Academy