[{"data":1,"prerenderedAt":170},["ShallowReactive",2],{"seo-verification":3,"blog-desplegar-nuxt-en-un-vps-es":6},{"google":4,"bing":5},"EycwPY2XMyTkVzas3n1ygeNJFGAH513qrMjfDljzsMQ","",{"key":7,"data":8},"blog-desplegar-nuxt-en-un-vps-es",{"id":9,"slug":10,"slugs":11,"title":15,"excerpt":16,"readTime":17,"views":18,"isPinned":19,"publishedAt":20,"updatedAt":21,"category":22,"categories":28,"featuredImage":30,"bgImage":31,"posterImage":32,"relatedSolution":33,"intro":36,"sections":37,"ctaTitle":115,"ctaBody":116,"ctaButton":117,"ctaUrl":118,"relatedPosts":119},47,"desplegar-nuxt-en-un-vps",{"fr":12,"en":13,"ar":14,"es":10},"deployer-nuxt-vps","deploy-a-nuxt-application-on-a-vps","نشر-تطبيق-nuxt-على-vps","Desplegar una aplicación Nuxt en un VPS","Guía completa para desplegar Nuxt 3 en un VPS: Nitro, PM2, Nginx, SSL, routeRules y resolución de errores comunes de producción. Autoaloja tu app Vue 3.",7,0,false,"2026-05-04T00:00:00+00:00","2026-09-09T21:41:06+00:00",{"id":23,"name":24,"slug":25,"color":26,"icon":27},4,"Desarrollo","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-vps-poster.svg",{"categorySlug":34,"appSlug":35},"desarrollo","nuxt-stack","Nuxt 3 y su motor Nitro producen un artefacto Node.js autónomo, perfectamente adaptado al autoalojamiento en un VPS. Este enfoque te libera de las cuotas de funciones cloud y te da control total sobre el caché, las cabeceras HTTP y las estrategias de renderizado página a página. Esta guía cubre la instalación completa: configuración del proyecto, build, supervisión con PM2, reverse proxy Nginx y HTTPS, hasta la resolución de los errores que bloquean en producción.",[38,42,53,56,81,84,108,111],{"type":39,"title":40,"body":41},"h2","¿Por qué autoalojar Nuxt en un VPS?","Con Nitro, Nuxt 3 genera un build portable (`preset: node-server`) que arranca como un simple servidor Node a la escucha en un puerto. Esta portabilidad es ideal para un VPS: dispone del renderizado del lado del servidor, de las rutas `server\u002Fapi` y de la caché de rutas sin depender de un runtime edge propietario.\n\nEl autoalojamiento elimina las cuotas de funciones y le permite ajustar el almacenamiento en caché, la compresión y el número de instancias Node. Para una aplicación Vue 3 en producción con autenticación, llamadas a API de servidor y un SEO cuidado, el VPS ofrece la estabilidad de un servidor persistente y un costo fijo, sin sorpresas de facturación por invocación.",{"type":43,"title":44,"items":45},"ul","Beneficios concretos de un Nuxt autoalojado",[46,47,48,49,50,51,52],"Rutas de servidor `server\u002Fapi` ilimitadas, sin facturación por llamada.","SSR e hidratación Vue 3 servidos desde un servidor Node persistente y estable.","Build Nitro portable (`node-server`), fácil de contenerizar y de reproducir.","Caché de rutas y reglas `routeRules` (SSR, SSG, ISR, SWR) controladas desde el servidor.","Varias apps Nuxt compartiendo un mismo VPS detrás de Nginx.","Variables de entorno en runtime (`runtimeConfig`) gestionadas directamente en su servidor.","Control total sobre las cabeceras HTTP (CSP, HSTS, cache-control) vía middleware Nitro.",{"type":39,"title":54,"body":55},"Requisitos de hardware y software","Como todo framework moderno, el build de Nuxt consume memoria: apunte a 2 GB de RAM como mínimo (el build puede realizarse en CI si su VPS es más pequeño). En runtime, 1 vCPU y 1 GB bastan para el servidor Nitro bajo carga ligera; suba a 2 vCPU \u002F 2 GB para aplicaciones con muchas rutas `server\u002Fapi` concurrentes.\n\nInstale Node.js 20 LTS mediante `nvm` o una imagen `node:20-alpine`, además de PM2 para la supervisión de procesos. Configure `nitro: { preset: 'node-server' }` en `nuxt.config.ts`. Se requiere un dominio apuntando al VPS para el certificado TLS. Ubuntu 22.04 o 24.04 LTS sigue siendo la base recomendada.",{"type":57,"title":58,"steps":59},"steps","Desplegar Nuxt paso a paso",[60,63,66,69,72,75,78],{"title":61,"body":62},"Configurar el proyecto para Node","Defina el preset Nitro en `nuxt.config.ts`:\n\n```ts\nexport default defineNuxtConfig({\n  nitro: { preset: 'node-server' }\n})\n```\n\nDeclare sus secretos en `runtimeConfig` únicamente en el lado del servidor — nunca en `runtimeConfig.public`. En el VPS, instale Node.js 20 LTS con `nvm install 20 && nvm use 20 && nvm alias default 20`, luego PM2 de forma global: `npm install -g pm2`.",{"title":64,"body":65},"Compilar la aplicación","Clone el repositorio e instale las dependencias:\n\n```bash\ngit clone https:\u002F\u002Fgit.sudominio.com\u002Fsu-org\u002Fsu-app.git \u002Fsrv\u002Fnuxt-app\ncd \u002Fsrv\u002Fnuxt-app\nnpm ci\nnpm run build\n```\n\nNitro produce una carpeta `.output` autónoma que contiene `server\u002Findex.mjs` y los assets estáticos en `.output\u002Fpublic`. Esa carpeta es todo lo que el VPS necesita para servir la aplicación en producción — también puede ensamblarla en CI y transferirla por rsync para evitar el build en el servidor.",{"title":67,"body":68},"Crear el archivo de entorno","Cree `\u002Fsrv\u002Fnuxt-app\u002F.env` con sus variables de runtime. Todas las variables con prefijo `NUXT_` sobreescriben las claves correspondientes de `runtimeConfig` al arrancar:\n\n```bash\nNUXT_MY_SECRET_KEY=valor-produccion\nNITRO_HOST=0.0.0.0\nNITRO_PORT=3000\n```\n\nNunca incluya este archivo en el repositorio. Asegúrese de que pertenece al usuario que ejecuta PM2 y solo es legible por ese usuario (`chmod 600`).",{"title":70,"body":71},"Arrancar el servidor Nitro con PM2","Inicie la aplicación y configure el arranque automático:\n\n```bash\npm2 start \u002Fsrv\u002Fnuxt-app\u002F.output\u002Fserver\u002Findex.mjs \\\n  --name nuxt-app \\\n  --env-file \u002Fsrv\u002Fnuxt-app\u002F.env\npm2 save\npm2 startup\n```\n\nEl comando `pm2 startup` muestra una línea para copiar y pegar que crea el servicio systemd. Ejecútela con permisos de administrador. Verifique que la aplicación está en línea: `pm2 status` debe mostrar el estado `online`.",{"title":73,"body":74},"Configurar Nginx como reverse proxy","Cree `\u002Fetc\u002Fnginx\u002Fsites-available\u002Fnuxt-app`:\n\n```nginx\nserver {\n    listen 80;\n    server_name sudominio.com www.sudominio.com;\n\n    location \u002F_nuxt\u002F {\n        root \u002Fsrv\u002Fnuxt-app\u002F.output\u002Fpublic;\n        expires 1y;\n        add_header Cache-Control \"public, immutable\";\n    }\n\n    location \u002Ffavicon.ico {\n        root \u002Fsrv\u002Fnuxt-app\u002F.output\u002Fpublic;\n    }\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_set_header X-Real-IP $remote_addr;\n        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n        proxy_set_header X-Forwarded-Proto $scheme;\n        proxy_cache_bypass $http_upgrade;\n    }\n}\n```\n\nActive el sitio y pruebe la configuración: `ln -s \u002Fetc\u002Fnginx\u002Fsites-available\u002Fnuxt-app \u002Fetc\u002Fnginx\u002Fsites-enabled\u002F && nginx -t && systemctl reload nginx`.",{"title":76,"body":77},"Activar HTTPS con Let's Encrypt","Instale Certbot y el plugin de Nginx, luego genere el certificado:\n\n```bash\napt install certbot python3-certbot-nginx\ncertbot --nginx -d sudominio.com -d www.sudominio.com\n```\n\nCertbot modifica automáticamente el bloque Nginx para escuchar en el puerto 443 y forzar la redirección HTTP → HTTPS. Verifique que `X-Forwarded-Proto` se transmite correctamente a Nitro — sin ello, `useRequestHeaders()` en el lado del servidor y las redirecciones basadas en el protocolo pueden comportarse incorrectamente. La renovación automática la gestiona el timer systemd de Certbot, comprobable con `systemctl status certbot.timer`.",{"title":79,"body":80},"Actualizar sin interrupción del servicio","Para una actualización, el reload de PM2 (no el restart) garantiza la continuidad:\n\n```bash\ncd \u002Fsrv\u002Fnuxt-app\ngit pull\nnpm ci\nnpm run build\npm2 reload nuxt-app\n```\n\nPM2 lanza la nueva versión, espera a que responda y luego corta la antigua: cero downtime. Para un rollback, vuelva al commit anterior, reconstruya y recargue. Si el build se hace en CI, transfiera únicamente la carpeta `.output` por rsync y recargue sin reconstruir en el servidor.",{"type":39,"title":82,"body":83},"Optimizar el renderizado con routeRules","Una de las fortalezas de Nuxt en un VPS es la granularidad de las estrategias de renderizado página a página, sin cambiar de infraestructura. En `nuxt.config.ts`, las `routeRules` permiten mezclar SSR, SSG, ISR y SWR en un único despliegue Nitro.\n\nLas páginas estáticas (blog, avisos legales, landing pages) pueden pregenerarse en el build con `prerender: true`: Nitro las sirve desde disco, sin Node. Las páginas semi-dinámicas (listas de productos, dashboards públicos) se benefician de `swr: 60` para una caché de un minuto invalidada en segundo plano. El SSR completo queda reservado para las páginas personalizadas que dependen de la sesión o del perfil del usuario.\n\nEste enfoque reduce la carga sobre Node sin necesitar un CDN de pago o una capa de caché externa — su Nginx almacena lo que Nitro pregenera.",{"type":85,"title":86,"headers":87,"rows":91},"comparison","Nitro server vs Docker vs Vercel\u002FNetlify para alojar Nuxt",[88,89,90],"Enfoque","Ventajas","Limitaciones",[92,96,100,104],[93,94,95],"Nitro `node-server` + PM2","Simple, ligero, recarga sin downtime, costo fijo VPS","Supervisión a gestionar, servidor único sin alta disponibilidad nativa",[97,98,99],"Docker en VPS","Aislamiento, reproducibilidad, rollback por imagen, compose multi-app","Imagen a construir y almacenar, memoria adicional por contenedor",[101,102,103],"Vercel \u002F Netlify","Configuración cero, CDN edge global, previews por PR","Cuotas de funciones, costo variable, sin control sobre la infraestructura",[105,106,107],"Kamal (despliegue zero-downtime)","Orquesta Docker + Traefik, git push es suficiente","Requiere Ruby, configuración inicial más larga, pensado para equipos",{"type":39,"title":109,"body":110},"Resolución de problemas: errores comunes en producción","**`Error: listen EADDRINUSE: address already in use :::3000`**\nUn proceso ya ocupa el puerto 3000. Identifíquelo con `ss -tlnp | grep 3000` y detenga la instancia PM2 huérfana: `pm2 delete nuxt-app` seguido de un reinicio limpio. Evite lanzar múltiples instancias sin un load balancer — configure el `cluster_mode` de PM2.\n\n**`502 Bad Gateway` en Nginx**\nNitro no está arrancado o escucha en el puerto incorrecto. Compruebe `pm2 status` y revise los logs: `pm2 logs nuxt-app --lines 50`. Verifique también que la directiva `proxy_pass` en Nginx apunta a `http:\u002F\u002F127.0.0.1:3000` (no a `localhost` que puede resolver a IPv6 si el proceso solo escucha en IPv4).\n\n**`useRuntimeConfig()` devuelve undefined en el servidor**\nLas variables `NUXT_*` solo se leen cuando arranca el proceso Nitro. Si modifica `.env` después del lanzamiento, recargue: `pm2 reload nuxt-app`. Asegúrese de usar `--env-file` al arrancar y no exportar las variables en el shell actual.\n\n**Las rutas `server\u002Fapi` devuelven 404 en producción**\nCompruebe que su build incluye la carpeta `server\u002F` en `.output`. Un `nitro.preset` mal configurado (por ejemplo `static` en vez de `node-server`) genera un sitio estático sin servidor. Reconstruya con `npm run build` tras verificar `nuxt.config.ts`.\n\n**`X-Forwarded-Proto` ignorado, bucle de redirección**\nSi Nuxt redirige HTTP → HTTPS en bucle, significa que el middleware de redirección ve `http` pese al HTTPS del cliente. Asegúrese de que Nginx transmite `proxy_set_header X-Forwarded-Proto $scheme` y que su `nuxt.config.ts` no fuerza la redirección HTTPS dos veces junto a Certbot.",{"type":112,"title":113,"body":114},"tip","Supervisión y métricas con PM2","Más allá del simple `pm2 status`, PM2 expone un panel en tiempo real con `pm2 monit`: CPU, memoria, reinicios y logs de procesos. Para una aplicación Nuxt bajo carga, active el modo cluster para usar todos los vCPU disponibles:\n\n```bash\npm2 start .output\u002Fserver\u002Findex.mjs --name nuxt-app -i max\n```\n\nPM2 distribuye automáticamente las peticiones entre los workers. Combine PM2 con una herramienta como Grafana vía `pm2-prometheus` para alertas sobre reinicios inesperados — señal de un bug o fuga de memoria a corregir antes de que afecte a los usuarios.","Despliegue su Nuxt con total autonomía","El VPS Cloud de ServOrbit incluye una plantilla con Node.js, PM2, Nginx y SSL automático, ideal para alojar sus aplicaciones Nuxt 3 con SSR y rutas de servidor.","Desplegar mi VPS Nuxt","\u002Fvps-cloud",[120,137,154],{"id":121,"slug":122,"slugs":123,"title":127,"excerpt":128,"readTime":23,"views":18,"isPinned":19,"publishedAt":129,"updatedAt":130,"category":131,"categories":132,"featuredImage":30,"bgImage":31,"posterImage":134,"relatedSolution":135},5,"desplegar-laravel-en-un-vps",{"fr":124,"en":125,"ar":126,"es":122},"deployer-laravel-vps","deploying-laravel-on-a-vps-a-production-guide","نشر-laravel-على-خادم-vps-دليل-الإنتاج","Desplegar Laravel en un VPS: guía de producción","Ponga Laravel en producción en un VPS: PHP, workers, caché, base de datos, reverse proxy y HTTPS bien configurados.","2026-02-09T00:00:00+00:00","2026-09-07T11:26:10+00:00",{"id":23,"name":24,"slug":25,"color":26,"icon":27},[133],{"id":23,"name":24,"slug":25,"color":26,"icon":27},"\u002Fblog\u002Fcovers\u002Fdeployer-laravel-vps-poster.svg",{"categorySlug":27,"appSlug":136},"laravel-stack",{"id":138,"slug":139,"slugs":140,"title":144,"excerpt":145,"readTime":146,"views":18,"isPinned":19,"publishedAt":147,"updatedAt":130,"category":148,"categories":149,"featuredImage":30,"bgImage":31,"posterImage":151,"relatedSolution":152},43,"desplegar-una-aplicacion-nodejs-en-un-vps",{"fr":141,"en":142,"ar":143,"es":139},"deployer-nodejs-vps","deploy-a-nodejs-application-on-a-vps","نشر-تطبيق-nodejs-على-vps","Desplegar una aplicación Node.js en un VPS","Despliegue una aplicación Node.js en producción en un VPS: PM2, reverse proxy Nginx, SSL Let's Encrypt y arranque automático con el sistema.",3,"2026-05-08T00:00:00+00:00",{"id":23,"name":24,"slug":25,"color":26,"icon":27},[150],{"id":23,"name":24,"slug":25,"color":26,"icon":27},"\u002Fblog\u002Fcovers\u002Fdeployer-nodejs-vps-poster.svg",{"categorySlug":34,"appSlug":153},"nodejs-stack",{"id":155,"slug":156,"slugs":157,"title":161,"excerpt":162,"readTime":146,"views":121,"isPinned":19,"publishedAt":163,"updatedAt":130,"category":164,"categories":165,"featuredImage":30,"bgImage":31,"posterImage":167,"relatedSolution":168},44,"desplegar-una-aplicacion-django-en-un-vps",{"fr":158,"en":159,"ar":160,"es":156},"deployer-django-vps","deploy-a-django-application-on-a-vps","نشر-تطبيق-django-على-vps","Desplegar una aplicación Django en un VPS","Despliegue Django en un VPS: Gunicorn, Nginx, PostgreSQL, Docker y SSL. Guía completa para desarrolladores Python que quieren autoalojar.","2026-05-07T00:00:00+00:00",{"id":23,"name":24,"slug":25,"color":26,"icon":27},[166],{"id":23,"name":24,"slug":25,"color":26,"icon":27},"\u002Fblog\u002Fcovers\u002Fdeployer-django-vps-poster.svg",{"categorySlug":34,"appSlug":169},"django",1789665016319]