[{"data":1,"prerenderedAt":185},["ShallowReactive",2],{"seo-verification":3,"blog-deploying-nuxt-on-a-vps-ssr-api-routes-and-control-ma-en":6,"promo-bar-likely":184},{"google":4,"bing":5},"EycwPY2XMyTkVzas3n1ygeNJFGAH513qrMjfDljzsMQ","",{"key":7,"data":8},"blog-deploying-nuxt-on-a-vps-ssr-api-routes-and-control-ma-en",{"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,"deploying-nuxt-on-a-vps-ssr-api-routes-and-control",{"fr":12,"en":10,"ar":13,"es":14},"deployer-nuxt-app-vps","نشر-nuxt-على-خادم-vps-ssr-ومسارات-api-والتحكم","desplegar-nuxt-en-un-vps-ssr-api-routes-y-control","Deploying Nuxt on a VPS: SSR, API Routes and Control","Host Nuxt on a ServOrbit VPS with Node, Nitro, environment variables, reverse proxy and HTTP cache under your control.",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,"Development","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 can serve a static site, an SSR application or an API layer via Nitro; the chosen rendering mode changes the server requirements. On a ServOrbit VPS, you control the Node runtime, environment variables and the proxy rather than being constrained by a closed platform. This guide covers the full path: rendering mode choice, build, PM2 service, domain, HTTPS, environment variables, HTTP cache and log monitoring.",[37,41,69,72,83,105,108,111,114,117],{"type":38,"title":39,"body":40},"h2","Why host Nuxt on a VPS?","Shared hosting platforms do not natively support Node.js, making it impossible to self-host a Nuxt application without a VPS or dedicated server. A VPS lets you choose the Node.js version you want, configure a reverse proxy (Nginx or Caddy) on any port, and manage your own TLS certificates — all without artificial CPU or memory limits. This is the ideal solution for independent developers and SMBs who want full control over their stack.\n\nUnlike PaaS or serverless solutions, a VPS does not bill per execution and does not cap response times: an API call taking well below one second incurs no extra cost. You also keep full control over HTTP headers, edge caching and TLS configuration — three key levers for SEO and real-world performance.",{"type":42,"title":43,"headers":44,"rows":49},"comparison","SSR, SSG or SPA: which rendering mode for your Nuxt project?",[45,46,47,48],"Mode","Rendering","Node process required","Best for",[50,55,60,64],[51,52,53,54],"SSR (ssr: true)","On request, server-side","Yes — permanent PM2","Dynamic app, SEO, personalised content",[56,57,58,59],"SSG (nuxt generate)","At build time, static HTML","No — nginx is enough","Blog, landing page, rarely updated content",[61,62,58,63],"SPA (ssr: false)","In the browser","Internal dashboard, auth-gated app",[65,66,67,68],"Hybrid (routeRules)","Per route: SSR + SSG mixed","Yes — Nitro server","App with static pages and API routes",{"type":38,"title":70,"body":71},"What you can do with Nuxt on a VPS","A ServOrbit VPS with the preconfigured Nuxt template opens four dimensions that shared hosts or PaaS platforms close off:",{"type":73,"title":74,"items":75},"ul","Concrete capabilities on VPS",[76,77,78,79,80,81,82],"Serve a Nuxt application in SSR mode for optimal SEO and reduced load times — PM2 keeps the Nitro process alive and automatically restarts it after a crash or server reboot","Deploy a static site generated with `nuxt generate` and serve it through Nginx without a permanent Node.js process — ideal for a blog or landing page with infrequent updates","Host multiple Nuxt projects on the same VPS using a reverse proxy and Nginx Virtual Hosts — each application runs on its own internal port (3000, 3001…)","Configure sensitive environment variables (API keys, DB connections) directly on the server in `\u002Fetc\u002Fenvironment` or via an `.env` file outside the Git repository","Enable Nitro API routes (`server\u002Fapi\u002F`) to expose a lightweight backend layer from the same Node.js process, with no separate Express server","Automate deployments with a PM2 ecosystem file, GitHub webhooks or a CI\u002FCD pipeline pointing to your VPS via SSH","Enable HTTPS automatically with Let's Encrypt via Certbot to secure your users at no certificate cost",{"type":84,"title":85,"steps":86},"steps","Install and deploy Nuxt on your ServOrbit VPS",[87,90,93,96,99,102],{"title":88,"body":89},"Order a ServOrbit Cloud VPS","Go to the `\u002Fvps-cloud` page and choose the plan that fits your project. For a Nuxt SSR application, plan for at least 1 vCPU and 1 GB RAM; 2 GB comfortably absorbs the Nitro process, a reverse proxy and compilation spikes during deployments. If you host multiple Nuxt applications, start with 2 vCPU \u002F 4 GB. Complete the order and access your client portal once the VPS is delivered — typically in under a minute.",{"title":91,"body":92},"Install Nuxt from the Marketplace","Log in to your ServOrbit client portal, navigate to the **Marketplace** section from your VPS dashboard, then search for **Nuxt**. Click the card, confirm the installation. The script automatically configures Node.js LTS, PM2 as the process manager, Nginx as a reverse proxy on port 80 (and 443 if a domain is provided). The operation takes under two minutes. At the end, your VPS already exposes a sample Nuxt server accessible via the VPS IP.",{"title":94,"body":95},"Deploy your application and configure environment variables","Connect via SSH (`ssh root@\u003CVPS-IP>`), then clone your repository into the prepared directory:\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fyour-org\u002Fyour-app.git \u002Fvar\u002Fwww\u002Fnuxt-app\ncd \u002Fvar\u002Fwww\u002Fnuxt-app\nnpm install\n```\n\nThen create a `.env` file **outside your Git repository** with your runtime variables:\n\n```bash\nNUXT_PUBLIC_API_BASE=https:\u002F\u002Fapi.your-domain.com\nNUXT_SECRET_KEY=your-private-key\nDATABASE_URL=postgres:\u002F\u002Fuser:pass@localhost\u002Fmydb\n```\n\nNuxt 3 reads variables prefixed with `NUXT_` via `useRuntimeConfig()` — `NUXT_PUBLIC_*` variables are exposed client-side, others remain server-only. Never commit the `.env` file: add it to `.gitignore` from the start.",{"title":97,"body":98},"Build the application and launch it with PM2","Compile the application for production:\n\n```bash\nnpm run build\n```\n\nNuxt 3 generates the `.output\u002F` folder containing the Nitro server. Launch it with PM2 in cluster mode to use all CPU cores:\n\n```bash\npm2 start .output\u002Fserver\u002Findex.mjs -i max --name nuxt-app\npm2 save\npm2 startup\n```\n\nThe `pm2 startup` command generates the systemd line to execute so that PM2 restarts automatically on server reboot. Check the status: `pm2 status` — instances should be `online`. For zero-downtime reloads during deployments: `pm2 reload nuxt-app`.",{"title":100,"body":101},"Configure Nginx as a reverse proxy and point your domain","The Marketplace template installs a ready-to-use Nginx Virtual Host in `\u002Fetc\u002Fnginx\u002Fsites-available\u002Fnuxt-app`. Edit it to set your domain name and enable static asset caching:\n\n```bash\nserver {\n    server_name your-domain.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\nPoint your DNS A record to the VPS IP, then run Certbot to obtain a free TLS certificate: `certbot --nginx -d your-domain.com`. Reload Nginx: `nginx -s reload`. Your Nuxt application is now available over HTTPS.",{"title":103,"body":104},"Automate subsequent deployments","For updates, create a deployment script at `\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 \"Deployment complete\"\n```\n\nMake it executable (`chmod +x deploy.sh`) and trigger it from your CI\u002FCD pipeline via SSH: `ssh root@\u003CIP> \u002Fvar\u002Fwww\u002Fnuxt-app\u002Fdeploy.sh`. PM2 `reload` (not `restart`) ensures a smooth transition — PM2 waits for each new instance to be ready before cutting the old one.",{"type":38,"title":106,"body":107},"Environment variables and Nuxt 3 runtime config","Nuxt 3 distinguishes two levels of variables via `useRuntimeConfig()`:\n\n- `runtimeConfig.public.*` → available both client-side and server-side (e.g. public API URL, tracking keys)\n- `runtimeConfig.*` (non-public) → server only (e.g. secret keys, DB credentials)\n\nEnvironment variables override them automatically at runtime following the `NUXT_\u003CNAME>` convention (public: `NUXT_PUBLIC_\u003CNAME>`). This means you do **not** need to rebuild the application to change an API URL or access key: simply modify the `.env` file on the server and reload PM2 (`pm2 reload nuxt-app`). This is particularly useful for multiple environments (staging, production) that share the same build artifact.\n\nFor critical secrets (DB tokens, encryption keys), prefer system-level variables in `\u002Fetc\u002Fenvironment` over an `.env` file in the application directory — they are loaded at the system level and are not exposed by a directory read.",{"type":38,"title":109,"body":110},"Monitor logs and diagnose errors","PM2 centralises your Nuxt application logs in real time. Key commands:\n\n```bash\npm2 logs nuxt-app          # live stream (stdout + stderr)\npm2 logs nuxt-app --lines 100  # last 100 lines\npm2 monit                  # real-time CPU \u002F memory dashboard\n```\n\nLogs are persisted in `~\u002F.pm2\u002Flogs\u002F` — `nuxt-app-out.log` for standard output and `nuxt-app-error.log` for errors. Configure log rotation to avoid filling the disk:\n\n```bash\npm2 install pm2-logrotate\npm2 set pm2-logrotate:max_size 50M\npm2 set pm2-logrotate:retain 7\n```\n\nFor Nginx errors (502, 503 when PM2 is offline), check `\u002Fvar\u002Flog\u002Fnginx\u002Ferror.log`. A persistent 502 error generally means the PM2 process is not running (`pm2 status`) or port 3000 is not reachable from the proxy.",{"type":38,"title":112,"body":113},"Diagnosing common issues","Three situations come up frequently when deploying a Nuxt application on a VPS:\n\n**502 Bad Gateway error.** Nginx cannot reach the Nitro process on port 3000. Common causes: `pm2 start` was never run or has stopped (`pm2 status` to check), port 3000 is blocked by the firewall (`ufw allow 3000` temporarily to test), or the application crashed at startup (`pm2 logs nuxt-app --lines 50` to read the last error).\n\n**Unresolved environment variables.** `useRuntimeConfig()` returns `undefined` on the client side for a variable that should be public. Make sure the variable is prefixed with `NUXT_PUBLIC_` in your `.env` file, and that you restarted PM2 after the change: `pm2 reload nuxt-app`. Environment variables are only read when the Nitro process starts, not in real time.\n\n**Blank page in production after `nuxt generate`.** The static HTML renders but dynamic data is empty. This is not a server issue — it is a `baseURL` issue: on the server side during prerendering, a `$fetch` with a relative path has no origin. Pass the full URL of your API in `NUXT_PUBLIC_API_BASE` and use `useAsyncData` with `useFetch` by specifying this base explicitly in pages that require crawlable content.",{"type":115,"body":116},"tip","**Performance tip: PM2 cluster mode.** The command `pm2 start .output\u002Fserver\u002Findex.mjs -i max --name nuxt-app` starts as many instances as there are available CPU cores and automatically distributes the load between them. On a 2-vCPU VPS you get two active Nitro workers, doubling throughput on SSR routes — ideal for absorbing traffic spikes without upgrading your plan. Verify with `pm2 status` that all N instances are `online`.",{"type":115,"title":118,"body":119},"Official documentation","For advanced configuration, tool-specific options and version changes, refer to the \u003Ca href=\"https:\u002F\u002Fnuxt.com\u002Fdocs\" target=\"_blank\" rel=\"noopener noreferrer\">official Nuxt documentation\u003C\u002Fa>. This guide covers going live on ServOrbit VPS; the publisher documentation remains the reference for fine-tuning (routeRules, Nitro presets, official modules).","Deploy Nuxt in minutes on a ServOrbit Cloud VPS","Enjoy a Cloud VPS with 1-click Nuxt installation, preconfigured Node.js and responsive support — with no nasty surprises on the bill.","Launch my Cloud VPS","\u002Fvps-cloud",[125,145,163],{"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,"deploy-a-nextjs-application-on-a-vps",{"fr":129,"en":127,"ar":130,"es":131},"deployer-nextjs-vps","نشر-تطبيق-nextjs-على-vps","desplegar-nextjs-en-un-vps","Deploy a Next.js Application on a VPS","Deploy Next.js on a VPS: Node.js, PM2, Nginx, SSL, and SSR. A complete guide for developers and agencies who want to self-host.",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":143,"appSlug":144},"development","nextjs-stack",{"id":146,"slug":147,"slugs":148,"title":152,"excerpt":153,"readTime":154,"views":135,"isPinned":19,"noindex":19,"publishedAt":155,"updatedAt":156,"category":157,"categories":158,"featuredImage":30,"bgImage":31,"posterImage":160,"relatedSolution":161},43,"deploy-a-nodejs-application-on-a-vps",{"fr":149,"en":147,"ar":150,"es":151},"deployer-nodejs-vps","نشر-تطبيق-nodejs-على-vps","desplegar-una-aplicacion-nodejs-en-un-vps","Deploy a Node.js Application on a VPS","Deploy a Node.js application to production on a VPS: PM2, Nginx reverse proxy, Let's Encrypt SSL, and automatic startup at 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},[159],{"id":23,"name":24,"slug":25,"color":26,"icon":27},"\u002Fblog\u002Fcovers\u002Fdeployer-nodejs-vps-poster.svg",{"categorySlug":143,"appSlug":162},"nodejs-stack",{"id":164,"slug":165,"slugs":166,"title":170,"excerpt":171,"readTime":154,"views":23,"isPinned":19,"noindex":19,"publishedAt":172,"updatedAt":173,"category":174,"categories":178,"featuredImage":30,"bgImage":31,"posterImage":180,"relatedSolution":181},39,"deploy-your-applications-with-caddy-on-a-vps",{"fr":167,"en":165,"ar":168,"es":169},"deployer-avec-caddy","انشر-تطبيقاتك-باستخدام-caddy-على-خادم-vps","desplegar-con-caddy","Caddy as a reverse proxy on VPS: complete guide","Install and configure Caddy as a reverse proxy on your VPS: automatic Let's Encrypt HTTPS, multi-app setup, security hardening and common error troubleshooting.","2026-05-12T00:00:00+00:00","2026-09-25T23:43:04+00:00",{"id":18,"name":175,"slug":176,"color":177,"icon":176},"Deployment","deploiement","bg-success\u002F10 text-success",[179],{"id":18,"name":175,"slug":176,"color":177,"icon":176},"\u002Fblog\u002Fcovers\u002Fdeployer-avec-caddy-poster.svg",{"categorySlug":182,"appSlug":183},"application-deployment-devops","caddy",true,1794270395117]