Déployer Nuxt sur un VPS : SSR, API routes et contrôle

Pourquoi héberger Nuxt sur un VPS ?

SSR, SSG ou SPA : quel mode choisir pour votre projet Nuxt ?

Faites défiler le tableau

Ce que vous pouvez faire avec Nuxt sur un VPS

Capacités concrètes sur VPS

• Servir une application Nuxt en mode SSR pour un SEO optimal et des temps de chargement réduits — PM2 maintient le processus Nitro actif et le redémarre automatiquement après un crash ou un redémarrage serveur
• Déployer un site statique généré avec nuxt generate et le servir via Nginx sans processus Node.js permanent — idéal pour un blog ou une vitrine à faible fréquence de mise à jour
• Héberger plusieurs projets Nuxt sur le même VPS grâce à un reverse proxy et des Virtual Hosts Nginx — chaque application tourne sur son propre port interne (3000, 3001…)
• Configurer des variables d'environnement sensibles (clés API, connexions DB) directement sur le serveur dans /etc/environment ou via un fichier .env hors dépôt Git
• Activer les API routes Nitro (server/api/) pour exposer une couche backend légère depuis le même process Node.js, sans serveur Express séparé
• Automatiser vos déploiements avec PM2 ecosystem, des webhooks GitHub ou une pipeline CI/CD pointant sur votre VPS via SSH
• Activer HTTPS automatiquement avec Let's Encrypt via Certbot pour sécuriser vos utilisateurs sans coût de certificat

Installer et déployer Nuxt sur votre VPS ServOrbit

1. 01

   Commander un VPS Cloud ServOrbit

   Rendez-vous sur la page /vps-cloud et choisissez la formule adaptée à votre projet. Pour une application Nuxt en SSR, comptez au minimum 1 vCPU et 1 Go de RAM ; 2 Go permettent d'absorber confortablement le processus Nitro, un éventuel reverse proxy et les pics de compilation lors des déploiements. Si vous hébergez plusieurs applications Nuxt, préférez 2 vCPU / 4 Go dès le départ. Complétez la commande et accédez à votre espace client une fois le VPS livré — généralement en moins d'une minute.

2. 02

   Installer Nuxt depuis le Marketplace

   Connectez-vous à votre espace client ServOrbit, naviguez vers la section Marketplace depuis le tableau de bord de votre VPS, puis recherchez Nuxt. Cliquez sur la fiche, confirmez l'installation. Le script configure automatiquement Node.js LTS, PM2 comme gestionnaire de processus, Nginx en reverse proxy sur le port 80 (et 443 si un domaine est renseigné). L'opération prend moins de deux minutes. À la fin, votre VPS expose déjà un serveur Nuxt d'exemple accessible via l'IP du VPS.

3. 03

   Déposer votre application et configurer les variables d'environnement

   Connectez-vous en SSH (ssh root@<IP-du-VPS>), puis clonez votre dépôt dans le répertoire préparé :

   git clone https://github.com/votre-org/votre-app.git /var/www/nuxt-app
   cd /var/www/nuxt-app
   npm install

   Créez ensuite un fichier .env hors dépôt Git avec vos variables de runtime :

   NUXT_PUBLIC_API_BASE=https://api.votre-domaine.com
   NUXT_SECRET_KEY=votre-clé-privée
   DATABASE_URL=postgres://user:pass@localhost/madb

   Nuxt 3 lit les variables préfixées NUXT_ via useRuntimeConfig() — les variables NUXT_PUBLIC_* sont exposées côté client, les autres restent serveur uniquement. Ne jamais commiter le .env : ajoutez-le à .gitignore dès la création du dépôt.

4. 04

   Construire l'application et la lancer avec PM2

   Compilez l'application pour la production :

   npm run build

   Nuxt 3 génère le dossier .output/ contenant le serveur Nitro. Lancez-le avec PM2 en mode cluster pour exploiter tous les cœurs CPU :

   pm2 start .output/server/index.mjs -i max --name nuxt-app
   pm2 save
   pm2 startup

   La commande pm2 startup génère la ligne systemd à exécuter pour que PM2 redémarre automatiquement au reboot du serveur. Vérifiez l'état : pm2 status — les instances doivent être en online. Pour recharger sans temps d'arrêt lors d'un déploiement : pm2 reload nuxt-app.

5. 05

   Configurer Nginx en reverse proxy et pointer votre domaine

   Le template Marketplace installe un Virtual Host Nginx prêt à l'emploi dans /etc/nginx/sites-available/nuxt-app. Éditez-le pour y renseigner votre nom de domaine et activer la mise en cache des assets statiques :

   server {
       server_name votre-domaine.com;
   
       location / {
           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_cache_bypass $http_upgrade;
       }
   
       location /_nuxt/ {
           proxy_pass http://127.0.0.1:3000;
           expires 1y;
           add_header Cache-Control "public, immutable";
       }
   }

   Pointez ensuite votre entrée DNS A vers l'IP du VPS, puis lancez Certbot pour obtenir un certificat TLS gratuit : certbot --nginx -d votre-domaine.com. Rechargez Nginx : nginx -s reload. Votre application Nuxt est désormais accessible en HTTPS.

6. 06

   Automatiser les déploiements suivants

   Pour les mises à jour, créez un script de déploiement /var/www/nuxt-app/deploy.sh :

   #!/bin/bash
   set -e
   cd /var/www/nuxt-app
   git pull origin main
   npm install --production=false
   npm run build
   pm2 reload nuxt-app
   echo "Déploiement terminé"

   Rendez-le exécutable (chmod +x deploy.sh) et déclenchez-le depuis votre pipeline CI/CD via SSH : ssh root@<IP> /var/www/nuxt-app/deploy.sh. Le rechargement PM2 (reload et non restart) assure une transition sans interruption de service — PM2 attend que chaque nouvelle instance soit prête avant de couper l'ancienne.

Variables d'environnement et configuration runtime Nuxt 3

Surveiller les logs et diagnostiquer les erreurs

pm2 logs nuxt-app          # flux en direct (stdout + stderr)
pm2 logs nuxt-app --lines 100  # 100 dernières lignes
pm2 monit                  # dashboard CPU / mémoire en temps réel

pm2 install pm2-logrotate
pm2 set pm2-logrotate:max_size 50M
pm2 set pm2-logrotate:retain 7

Diagnostiquer les problèmes courants