Pourquoi self-héberger Nuxt sur un VPS ?
Avec Nitro, Nuxt 3 génère un build portable (preset: node-server) qui démarre comme un simple serveur Node écoutant sur un port. Cette portabilité est idéale pour un VPS : vous bénéficiez du rendu côté serveur, des server/api routes et du cache de route sans dépendre d'un runtime edge propriétaire. L'auto-hébergement supprime les quotas de fonctions et vous laisse régler la mise en cache, la compression et le nombre d'instances Node. Pour une application Vue 3 en production avec authentification, appels API serveur et SEO soigné, le VPS offre la stabilité d'un serveur persistant et un coût fixe, sans surprise de facturation à l'invocation.
Bénéfices concrets d'un Nuxt auto-hébergé
- Routes serveur
server/apiillimitées, sans facturation par appel. - SSR et hydratation Vue 3 servis depuis un serveur Node persistant et stable.
- Build Nitro portable (
node-server) facile à conteneuriser et à reproduire. - Cache de route et règles
routeRules(SSR, SSG, ISR) maîtrisés côté serveur. - Mutualisation de plusieurs apps Nuxt sur un même VPS derrière Nginx.
- Variables d'environnement runtime (
runtimeConfig) gérées en clair sur votre serveur.
Prérequis matériels et logiciels
Comme pour tout framework moderne, le build Nuxt consomme de la mémoire : visez 2 Go de RAM minimum (le build peut être réalisé en CI si votre VPS est plus petit). Au runtime, 1 vCPU et 1 Go suffisent pour le serveur Nitro. Installez Node.js 20 LTS via nvm ou une image node:20-alpine, ainsi que PM2 pour la supervision ou Docker pour l'isolation. Configurez nitro: { preset: 'node-server' } dans nuxt.config.ts. Un domaine pointé vers le VPS est requis pour le certificat TLS. Ubuntu 22.04/24.04 LTS reste la base conseillée.
Déployer Nuxt étape par étape
Configurer le projet pour Node
Définissez le preset Nitro node-server dans nuxt.config.ts et déclarez vos secrets dans runtimeConfig. Côté VPS, installez Node.js 20 LTS et PM2, puis clonez le dépôt et créez le fichier .env.
Builder l'application
Lancez npm ci puis npm run build. Nitro produit un dossier .output autonome contenant server/index.mjs. Ce dossier est tout ce dont le VPS a besoin pour servir l'application en production.
Lancer le serveur Nitro
Démarrez avec pm2 start .output/server/index.mjs --name nuxt, en définissant PORT=3000 et NITRO_HOST=0.0.0.0 dans l'environnement. Exécutez pm2 save et pm2 startup pour relancer le service après un redémarrage du VPS.
Placer Nginx en reverse proxy
Configurez un bloc serveur avec proxy_pass http://localhost:3000, transmettez Host et X-Forwarded-Proto, et servez /_nuxt/ (assets hashés) directement depuis .output/public avec un cache long. Activez gzip ou brotli.
Activer le HTTPS
Générez un certificat Let's Encrypt avec Certbot pour votredomaine.ma, forcez la redirection HTTP vers HTTPS et planifiez le renouvellement automatique. Vérifiez que le SSR détecte bien le protocole sécurisé via les en-têtes transmis.
Automatiser les mises à jour
Mettez en place un script git pull && npm ci && npm run build && pm2 reload nuxt ou un pipeline CI qui pousse le dossier .output. Le reload PM2 garantit un déploiement sans interruption de service.
Exploitez les routeRules de Nuxt pour mélanger les stratégies de rendu page par page : prerender: true pour les pages statiques (blog, mentions légales), swr ou isr pour les pages semi-dynamiques avec cache, et SSR complet pour les pages personnalisées. Vous réduisez la charge sur Node et améliorez le temps de réponse sans changer d'infrastructure.
