[{"data":1,"prerenderedAt":183},["ShallowReactive",2],{"seo-verification":3,"blog-deployer-nuxt-app-vps-ma-fr":6,"promo-bar-likely":182},{"google":4,"bing":5},"EycwPY2XMyTkVzas3n1ygeNJFGAH513qrMjfDljzsMQ","",{"key":7,"data":8},"blog-deployer-nuxt-app-vps-ma-fr",{"id":9,"slug":10,"slugs":11,"title":15,"excerpt":16,"readTime":17,"views":18,"isPinned":19,"noindex":19,"publishedAt":20,"updatedAt":21,"category":22,"categories":28,"featuredImage":30,"bgImage":31,"posterImage":32,"relatedSolution":33,"intro":35,"sections":36,"ctaTitle":120,"ctaBody":121,"ctaButton":122,"ctaUrl":123,"relatedPosts":124},138,"deployer-nuxt-app-vps",{"fr":10,"en":12,"ar":13,"es":14},"deploying-nuxt-on-a-vps-ssr-api-routes-and-control","نشر-nuxt-على-خادم-vps-ssr-ومسارات-api-والتحكم","desplegar-nuxt-en-un-vps-ssr-api-routes-y-control","Déployer Nuxt sur un VPS : SSR, API routes et contrôle","Hébergez Nuxt sur VPS ServOrbit avec Node, Nitro, variables d'environnement, reverse proxy et cache HTTP maîtrisé.",9,3,false,"2026-02-07T00:00:00+00:00","2026-11-09T20:55:19+00:00",{"id":23,"name":24,"slug":25,"color":26,"icon":27},4,"Développement","developpement","bg-warning\u002F10 text-warning","dev",[29],{"id":23,"name":24,"slug":25,"color":26,"icon":27},null,"\u002Fblog\u002Fcovers\u002Fbg.svg","\u002Fblog\u002Fcovers\u002Fdeployer-nuxt-app-vps-poster.svg",{"categorySlug":27,"appSlug":34},"nuxt-stack","Nuxt peut servir un site statique, une application SSR ou une couche API via Nitro ; le mode choisi change les besoins serveur. Sur un VPS ServOrbit, vous contrôlez le runtime Node, les variables et le proxy plutôt que de subir les limites d'une plateforme fermée. Ce guide couvre l'intégralité du chemin : choix du mode de rendu, build, service PM2, domaine, HTTPS, variables d'environnement, cache HTTP et surveillance des logs.",[37,41,69,72,83,105,108,111,114,117],{"type":38,"title":39,"body":40},"h2","Pourquoi héberger Nuxt sur un VPS ?","Les plateformes d'hébergement mutualisé ne supportent pas Node.js de manière native, ce qui rend l'auto-hébergement d'une application Nuxt impossible sans un VPS ou un serveur dédié. Un VPS vous permet de choisir la version de Node.js que vous souhaitez, de configurer un reverse proxy (Nginx ou Caddy) sur le port de votre choix, et de gérer vos propres certificats TLS — le tout sans limitation artificielle sur les ressources CPU ou mémoire. C'est la solution idéale pour les développeurs indépendants et les PME qui veulent maîtriser leur stack de bout en bout.\n\nContrairement aux solutions PaaS ou serverless, un VPS ne facture pas à l'exécution et ne plafonne pas les temps de réponse : un appel API qui dure bien en dessous de la seconde n'entraîne aucun surcoût. Vous gardez aussi la main sur les headers HTTP, le cache de bord et la configuration TLS — trois leviers déterminants pour le SEO et la performance réelle.",{"type":42,"title":43,"headers":44,"rows":49},"comparison","SSR, SSG ou SPA : quel mode choisir pour votre projet Nuxt ?",[45,46,47,48],"Mode","Rendu","Processus Node requis","Idéal pour",[50,55,60,64],[51,52,53,54],"SSR (ssr: true)","À la requête, côté serveur","Oui — PM2 permanent","App dynamique, SEO, contenu personnalisé",[56,57,58,59],"SSG (nuxt generate)","Au build, HTML statique","Non — nginx suffit","Blog, vitrine, contenu peu changeant",[61,62,58,63],"SPA (ssr: false)","Dans le navigateur","Dashboard interne, app derrière auth",[65,66,67,68],"Hybrid (routeRules)","Par route : SSR + SSG mixés","Oui — Nitro server","App avec pages statiques et routes API",{"type":38,"title":70,"body":71},"Ce que vous pouvez faire avec Nuxt sur un VPS","Un VPS ServOrbit avec le template Nuxt préconfiguré vous ouvre quatre axes que les hébergeurs mutualisés ou les PaaS ferment :",{"type":73,"title":74,"items":75},"ul","Capacités concrètes sur VPS",[76,77,78,79,80,81,82],"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 `\u002Fetc\u002Fenvironment` ou via un fichier `.env` hors dépôt Git","Activer les API routes Nitro (`server\u002Fapi\u002F`) 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\u002FCD 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",{"type":84,"title":85,"steps":86},"steps","Installer et déployer Nuxt sur votre VPS ServOrbit",[87,90,93,96,99,102],{"title":88,"body":89},"Commander un VPS Cloud ServOrbit","Rendez-vous sur la page `\u002Fvps-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 \u002F 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.",{"title":91,"body":92},"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.",{"title":94,"body":95},"Déposer votre application et configurer les variables d'environnement","Connectez-vous en SSH (`ssh root@\u003CIP-du-VPS>`), puis clonez votre dépôt dans le répertoire préparé :\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fvotre-org\u002Fvotre-app.git \u002Fvar\u002Fwww\u002Fnuxt-app\ncd \u002Fvar\u002Fwww\u002Fnuxt-app\nnpm install\n```\n\nCréez ensuite un fichier `.env` **hors dépôt Git** avec vos variables de runtime :\n\n```bash\nNUXT_PUBLIC_API_BASE=https:\u002F\u002Fapi.votre-domaine.com\nNUXT_SECRET_KEY=votre-clé-privée\nDATABASE_URL=postgres:\u002F\u002Fuser:pass@localhost\u002Fmadb\n```\n\nNuxt 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.",{"title":97,"body":98},"Construire l'application et la lancer avec PM2","Compilez l'application pour la production :\n\n```bash\nnpm run build\n```\n\nNuxt 3 génère le dossier `.output\u002F` contenant le serveur Nitro. Lancez-le avec PM2 en mode cluster pour exploiter tous les cœurs CPU :\n\n```bash\npm2 start .output\u002Fserver\u002Findex.mjs -i max --name nuxt-app\npm2 save\npm2 startup\n```\n\nLa 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`.",{"title":100,"body":101},"Configurer Nginx en reverse proxy et pointer votre domaine","Le template Marketplace installe un Virtual Host Nginx prêt à l'emploi dans `\u002Fetc\u002Fnginx\u002Fsites-available\u002Fnuxt-app`. Éditez-le pour y renseigner votre nom de domaine et activer la mise en cache des assets statiques :\n\n```bash\nserver {\n    server_name votre-domaine.com;\n\n    location \u002F {\n        proxy_pass http:\u002F\u002F127.0.0.1:3000;\n        proxy_http_version 1.1;\n        proxy_set_header Upgrade $http_upgrade;\n        proxy_set_header Connection 'upgrade';\n        proxy_set_header Host $host;\n        proxy_cache_bypass $http_upgrade;\n    }\n\n    location \u002F_nuxt\u002F {\n        proxy_pass http:\u002F\u002F127.0.0.1:3000;\n        expires 1y;\n        add_header Cache-Control \"public, immutable\";\n    }\n}\n```\n\nPointez 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.",{"title":103,"body":104},"Automatiser les déploiements suivants","Pour les mises à jour, créez un script de déploiement `\u002Fvar\u002Fwww\u002Fnuxt-app\u002Fdeploy.sh` :\n\n```bash\n#!\u002Fbin\u002Fbash\nset -e\ncd \u002Fvar\u002Fwww\u002Fnuxt-app\ngit pull origin main\nnpm install --production=false\nnpm run build\npm2 reload nuxt-app\necho \"Déploiement terminé\"\n```\n\nRendez-le exécutable (`chmod +x deploy.sh`) et déclenchez-le depuis votre pipeline CI\u002FCD via SSH : `ssh root@\u003CIP> \u002Fvar\u002Fwww\u002Fnuxt-app\u002Fdeploy.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.",{"type":38,"title":106,"body":107},"Variables d'environnement et configuration runtime Nuxt 3","Nuxt 3 distingue deux niveaux de variables via `useRuntimeConfig()` :\n\n- `runtimeConfig.public.*` → disponibles côté client **et** serveur (ex. URL d'API publique, clés de tracking)\n- `runtimeConfig.*` (non public) → serveur uniquement (ex. clés secrètes, credentials DB)\n\nLes variables d'environnement les remplacent automatiquement au runtime en suivant la convention `NUXT_\u003CNOM>` (public : `NUXT_PUBLIC_\u003CNOM>`). Cela signifie que vous n'avez **pas** besoin de rebuilder l'application pour changer une URL d'API ou une clé d'accès : il suffit de modifier le fichier `.env` sur le serveur et de recharger PM2 (`pm2 reload nuxt-app`). C'est particulièrement utile pour les environnements multiples (staging, production) qui partagent le même artefact de build.\n\nPour les secrets critiques (tokens DB, clés de chiffrement), préférez les variables système dans `\u002Fetc\u002Fenvironment` à un fichier `.env` dans le répertoire de l'application — elles sont chargées au niveau du système et non exposées par un accès en lecture sur le dossier de l'application.",{"type":38,"title":109,"body":110},"Surveiller les logs et diagnostiquer les erreurs","PM2 centralise les logs de votre application Nuxt en temps réel. Quelques commandes essentielles :\n\n```bash\npm2 logs nuxt-app          # flux en direct (stdout + stderr)\npm2 logs nuxt-app --lines 100  # 100 dernières lignes\npm2 monit                  # dashboard CPU \u002F mémoire en temps réel\n```\n\nLes logs sont persistés dans `~\u002F.pm2\u002Flogs\u002F` — `nuxt-app-out.log` pour la sortie standard et `nuxt-app-error.log` pour les erreurs. Pensez à configurer la rotation des logs pour éviter de remplir le disque :\n\n```bash\npm2 install pm2-logrotate\npm2 set pm2-logrotate:max_size 50M\npm2 set pm2-logrotate:retain 7\n```\n\nPour les erreurs Nginx (502, 503 quand PM2 est hors ligne), consultez `\u002Fvar\u002Flog\u002Fnginx\u002Ferror.log`. Une erreur 502 persistante indique généralement que le processus PM2 n'est pas démarré (`pm2 status`) ou que le port 3000 n'est pas accessible depuis le proxy.",{"type":38,"title":112,"body":113},"Diagnostiquer les problèmes courants","Trois situations reviennent fréquemment lors du déploiement d'une application Nuxt sur VPS :\n\n**Erreur 502 Bad Gateway.** Nginx ne peut pas joindre le processus Nitro sur le port 3000. Causes classiques : `pm2 start` n'a pas été lancé ou s'est arrêté (`pm2 status` pour vérifier), le port 3000 est bloqué par le pare-feu (`ufw allow 3000` temporairement pour tester), ou l'application a planté au démarrage (`pm2 logs nuxt-app --lines 50` pour lire la dernière erreur).\n\n**Variables d'environnement non résolues.** `useRuntimeConfig()` retourne `undefined` côté client sur une variable qui devrait être publique. Vérifiez que la variable est bien préfixée `NUXT_PUBLIC_` dans votre `.env`, et que vous avez redémarré PM2 après la modification : `pm2 reload nuxt-app`. Les variables d'environnement ne sont lues qu'au démarrage du processus Nitro, pas en live.\n\n**Page blanche en production après `nuxt generate`.** Le HTML statique s'affiche mais les données dynamiques sont vides. Ce n'est pas un problème serveur — c'est un problème de `baseURL` : côté serveur lors du prerender, un `$fetch` avec chemin relatif n'a pas d'origine. Passez l'URL complète de votre API dans `NUXT_PUBLIC_API_BASE` et utilisez `useAsyncData` avec `useFetch` en spécifiant cette base explicitement dans les pages qui nécessitent du contenu crawlable.",{"type":115,"body":116},"tip","**Astuce performance : mode cluster PM2.** La commande `pm2 start .output\u002Fserver\u002Findex.mjs -i max --name nuxt-app` démarre autant d'instances que de cœurs CPU disponibles et répartit automatiquement la charge entre elles. Sur un VPS 2 vCPU vous obtenez deux workers Nitro actifs, ce qui double le débit sur les routes SSR — idéal pour absorber les pics de trafic sans changer de formule. Vérifiez avec `pm2 status` que les N instances sont toutes en `online`.",{"type":115,"title":118,"body":119},"La documentation officielle","Pour la configuration avancée, les options propres à l'outil et les changements de version, référez-vous à la \u003Ca href=\"https:\u002F\u002Fnuxt.com\u002Fdocs\" target=\"_blank\" rel=\"noopener noreferrer\">documentation officielle de Nuxt\u003C\u002Fa>. Ce guide couvre la mise en ligne sur VPS ServOrbit ; la documentation éditeur reste la référence pour les réglages fins (routeRules, Nitro presets, modules officiels).","Déployez Nuxt en quelques minutes sur un VPS Cloud ServOrbit","Profitez d'un VPS Cloud avec installation Nuxt en 1 clic, Node.js préconfiguré et support réactif — sans mauvaises surprises sur la facture.","Lancer mon VPS Cloud","\u002Fvps-cloud",[125,144,162],{"id":126,"slug":127,"slugs":128,"title":132,"excerpt":133,"readTime":134,"views":135,"isPinned":19,"noindex":19,"publishedAt":136,"updatedAt":137,"category":138,"categories":139,"featuredImage":30,"bgImage":31,"posterImage":141,"relatedSolution":142},46,"deployer-nextjs-vps",{"fr":127,"en":129,"ar":130,"es":131},"deploy-a-nextjs-application-on-a-vps","نشر-تطبيق-nextjs-على-vps","desplegar-nextjs-en-un-vps","Déployer une application Next.js sur un VPS","Déployez Next.js sur un VPS : Node.js, PM2, Nginx, SSL et SSR. Guide complet pour développeurs et agences qui veulent self-héberger.",13,1,"2026-05-05T00:00:00+00:00","2026-11-04T16:30:25+00:00",{"id":23,"name":24,"slug":25,"color":26,"icon":27},[140],{"id":23,"name":24,"slug":25,"color":26,"icon":27},"\u002Fblog\u002Fcovers\u002Fdeployer-nextjs-vps-poster.svg",{"categorySlug":25,"appSlug":143},"nextjs-stack",{"id":145,"slug":146,"slugs":147,"title":151,"excerpt":152,"readTime":153,"views":135,"isPinned":19,"noindex":19,"publishedAt":154,"updatedAt":155,"category":156,"categories":157,"featuredImage":30,"bgImage":31,"posterImage":159,"relatedSolution":160},43,"deployer-nodejs-vps",{"fr":146,"en":148,"ar":149,"es":150},"deploy-a-nodejs-application-on-a-vps","نشر-تطبيق-nodejs-على-vps","desplegar-una-aplicacion-nodejs-en-un-vps","Déployer une application Node.js sur un VPS","Déployez une application Node.js en production sur un VPS : PM2, reverse proxy Nginx, SSL Let's Encrypt et démarrage automatique au boot.",8,"2026-05-08T00:00:00+00:00","2026-11-08T01:13:12+00:00",{"id":23,"name":24,"slug":25,"color":26,"icon":27},[158],{"id":23,"name":24,"slug":25,"color":26,"icon":27},"\u002Fblog\u002Fcovers\u002Fdeployer-nodejs-vps-poster.svg",{"categorySlug":25,"appSlug":161},"nodejs-stack",{"id":163,"slug":164,"slugs":165,"title":169,"excerpt":170,"readTime":153,"views":23,"isPinned":19,"noindex":19,"publishedAt":171,"updatedAt":172,"category":173,"categories":177,"featuredImage":30,"bgImage":31,"posterImage":179,"relatedSolution":180},39,"deployer-avec-caddy",{"fr":164,"en":166,"ar":167,"es":168},"deploy-your-applications-with-caddy-on-a-vps","انشر-تطبيقاتك-باستخدام-caddy-على-خادم-vps","desplegar-con-caddy","Caddy en reverse proxy sur VPS : guide complet","Installez et configurez Caddy comme reverse proxy sur votre VPS : HTTPS automatique Let's Encrypt, multi-apps, sécurité et dépannage des erreurs courantes.","2026-05-12T00:00:00+00:00","2026-09-25T23:43:04+00:00",{"id":18,"name":174,"slug":175,"color":176,"icon":175},"Déploiement","deploiement","bg-success\u002F10 text-success",[178],{"id":18,"name":174,"slug":175,"color":176,"icon":175},"\u002Fblog\u002Fcovers\u002Fdeployer-avec-caddy-poster.svg",{"categorySlug":175,"appSlug":181},"caddy",true,1794270698004]