Déploiement
Déploiement • Chapitre 12 : Déploiement des applications full-stack

Déploiement du frontend et de l'API sur un même serveur

Pour les projets à budget maîtrisé ou les serveurs d'entreprise internes, héberger le frontend et l'API sur la même machine est une solution élégante. Configurez Nginx pour servir la SPA sur / et proxifier l'API sur /api sans aucun souci de CORS.

💰
Économie Maximale

Une seule machine VPS à 5 €/mois héberge le site web, l'API et la base de données.

🚫
Zéro Problème CORS

Frontend et API partagent la même origine exacte (même protocole, même domaine, même port).

📂
try_files SPA

Nginx redirige toutes les routes clientes non-fichiers vers index.html sans erreur 404.

🔀
proxy_pass /api

Les requêtes de données sont routées de manière transparente vers Node sur 127.0.0.1:3000.

/etc/nginx/sites-available/monolithe.conf
# Configuration complète Nginx Monolithe (SPA + API sur le même serveur) :
server {
    listen 80;
    server_name learnweb.com;

    # 1. Dossier racine contenant le build du frontend (Angular/React/Vue)
    root /var/www/learnweb/frontend/dist;
    index index.html;

    # 2. Routage du Frontend SPA : indispensable pour éviter les erreurs 404 au rafraîchissement
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 3. Proxification de l'API backend vers le processus Node.js / Express local
    location /api/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 4. Cache agressif pour les assets statiques compilés (JS, CSS, images)
    location ~* .(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg)$ {
        expires 6M;
        access_log off;
        add_header Cache-Control "public, max-age=15552000, immutable";
    }
}

Guide Approfondi & Architecture Système

1. L'Élimination Radicale des Erreurs CORS

C'est le plus grand bénéfice de cette architecture :
Puisque votre frontend appelle /api/v1/users (adresse relative) au lieu de https://autre-domaine.com/api, le navigateur constate que l'origine est identique (Same-Origin). Il n'envoie aucune requête de pré-vérification OPTIONS : les requêtes sont deux fois plus rapides et aucun blocage CORS n'est possible !

2. Pourquoi try_files $uri $uri/ /index.html est Obligatoire ?

Dans une application SPA (Single Page Application) :

Lorsque l'utilisateur visite learnweb.com/dashboard/factures et appuie sur F5 (rechargement), le dossier /dashboard/factures n'existe pas physiquement sur le disque du serveur ! Sans la directive try_files, Nginx renverrait une erreur 404 Not Found. Grâce à try_files, Nginx renvoie poliment index.html, et le routeur JavaScript interne prend le relais pour afficher la vue correspondante.

Tableau de Routage d'une Requête dans Nginx Monolithe

URL DemandéeTraitement par NginxFichier ou Service Réel Atteint
/main.a8f9c.jsFichier physique existant dans rootServi directement depuis le disque avec cache max-age
/profil/parametresDossier physique inexistanttry_files renvoie index.html (le routeur JS prend la main)
/api/v1/auth/loginCorrespond au bloc location /api/proxy_pass transfère la requête au processus Node sur le port 3000
/assets/logo.pngImage physique existanteTransférée en mémoire vive sans toucher au thread Node.js