Desplegar Nuxt en un VPS: SSR, rutas API y control total

¿Por qué alojar Nuxt en un VPS?

SSR, SSG o SPA: ¿qué modo de renderizado elegir para tu proyecto Nuxt?

Desplace la tabla

Lo que puedes hacer con Nuxt en un VPS

Capacidades concretas en VPS

• Servir una aplicación Nuxt en modo SSR para un SEO óptimo y tiempos de carga reducidos — PM2 mantiene el proceso Nitro activo y lo reinicia automáticamente tras un fallo o reinicio del servidor
• Desplegar un sitio estático generado con nuxt generate y servirlo a través de Nginx sin proceso Node.js permanente — ideal para blogs o landings con poca frecuencia de actualización
• Alojar múltiples proyectos Nuxt en el mismo VPS gracias a un reverse proxy y Virtual Hosts de Nginx — cada aplicación corre en su propio puerto interno (3000, 3001…)
• Configurar variables de entorno sensibles (claves API, conexiones DB) directamente en el servidor en /etc/environment o mediante un archivo .env fuera del repositorio Git
• Habilitar las rutas API de Nitro (server/api/) para exponer una capa backend ligera desde el mismo proceso Node.js, sin un servidor Express separado
• Automatizar despliegues con un archivo ecosystem de PM2, webhooks de GitHub o un pipeline CI/CD apuntando a tu VPS por SSH
• Activar HTTPS automáticamente con Let's Encrypt vía Certbot para proteger a tus usuarios sin coste de certificado

Instalar y desplegar Nuxt en tu VPS de ServOrbit

1. 01

   Contratar un VPS Cloud de ServOrbit

   Ve a la página /vps-cloud y elige el plan adecuado para tu proyecto. Para una aplicación Nuxt en modo SSR, planea al menos 1 vCPU y 1 GB de RAM; 2 GB absorben cómodamente el proceso Nitro, un reverse proxy y los picos de compilación durante los despliegues. Si alojas múltiples aplicaciones Nuxt, empieza con 2 vCPU / 4 GB. Completa el pedido y accede a tu portal de cliente una vez entregado el VPS — normalmente en menos de un minuto.

2. 02

   Instalar Nuxt desde el Marketplace

   Inicia sesión en tu portal de cliente de ServOrbit, navega a la sección Marketplace desde el dashboard de tu VPS y busca Nuxt. Haz clic en la tarjeta y confirma la instalación. El script configura automáticamente Node.js LTS, PM2 como gestor de procesos y Nginx como reverse proxy en el puerto 80 (y 443 si se proporciona un dominio). La operación tarda menos de dos minutos.

3. 03

   Desplegar tu aplicación y configurar las variables de entorno

   Conéctate por SSH (ssh root@<IP-del-VPS>), luego clona tu repositorio en el directorio preparado:

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

   Crea un archivo .env fuera de tu repositorio Git con tus variables de runtime:

   NUXT_PUBLIC_API_BASE=https://api.your-domain.com
   NUXT_SECRET_KEY=your-private-key
   DATABASE_URL=postgres://user:pass@localhost/mydb

   Nuxt 3 lee las variables con prefijo NUXT_ a través de useRuntimeConfig() — las variables NUXT_PUBLIC_* se exponen del lado del cliente, las demás solo en el servidor. Nunca hagas commit del archivo .env: añádelo a .gitignore desde el principio.

4. 04

   Construir la aplicación y lanzarla con PM2

   Compila la aplicación para producción:

   npm run build

   Nuxt 3 genera la carpeta .output/ con el servidor Nitro. Lánzalo con PM2 en modo cluster para usar todos los núcleos CPU:

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

   El comando pm2 startup genera la línea systemd para ejecutar y que PM2 arranque automáticamente al reiniciar el servidor. Verifica el estado: pm2 status — las instancias deben estar online. Para recargas sin tiempo de inactividad durante los despliegues: pm2 reload nuxt-app.

5. 05

   Configurar Nginx como reverse proxy y apuntar tu dominio

   La plantilla del Marketplace instala un Virtual Host de Nginx listo para usar en /etc/nginx/sites-available/nuxt-app. Edítalo para especificar tu nombre de dominio y habilitar el caché de activos estáticos:

   server {
       server_name your-domain.com;
   
       location / {
           proxy_pass http://127.0.0.1:3000;
           proxy_http_version 1.1;
           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";
       }
   }

   Apunta tu registro DNS A a la IP del VPS, luego ejecuta Certbot para obtener un certificado TLS gratuito: certbot --nginx -d your-domain.com. Recarga Nginx: nginx -s reload. Tu aplicación Nuxt ya está disponible por HTTPS.

6. 06

   Automatizar los despliegues siguientes

   Para actualizaciones, crea un script de despliegue en /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 "Despliegue completado"

   Hazlo ejecutable (chmod +x deploy.sh) y lánzalo desde tu pipeline CI/CD por SSH: ssh root@<IP> /var/www/nuxt-app/deploy.sh. pm2 reload (no restart) garantiza una transición fluida — PM2 espera a que cada nueva instancia esté lista antes de cortar la antigua.

Variables de entorno y configuración runtime de Nuxt 3

Monitorizar logs y diagnosticar errores

pm2 logs nuxt-app          # flujo en directo (stdout + stderr)
pm2 logs nuxt-app --lines 100  # últimas 100 líneas
pm2 monit                  # dashboard CPU / memoria en tiempo real

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

Diagnosticar problemas comunes