[{"data":1,"prerenderedAt":185},["ShallowReactive",2],{"seo-verification":3,"blog-desplegar-nuxt-en-un-vps-ssr-api-routes-y-control-ma-es":6,"promo-bar-likely":184},{"google":4,"bing":5},"EycwPY2XMyTkVzas3n1ygeNJFGAH513qrMjfDljzsMQ","",{"key":7,"data":8},"blog-desplegar-nuxt-en-un-vps-ssr-api-routes-y-control-ma-es",{"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,"desplegar-nuxt-en-un-vps-ssr-api-routes-y-control",{"fr":12,"en":13,"ar":14,"es":10},"deployer-nuxt-app-vps","deploying-nuxt-on-a-vps-ssr-api-routes-and-control","نشر-nuxt-على-خادم-vps-ssr-ومسارات-api-والتحكم","Desplegar Nuxt en un VPS: SSR, rutas API y control total","Aloja Nuxt en un VPS de ServOrbit con Node, Nitro, variables de entorno, reverse proxy y caché HTTP bajo tu 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,"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-app-vps-poster.svg",{"categorySlug":27,"appSlug":34},"nuxt-stack","Nuxt puede servir un sitio estático, una aplicación SSR o una capa API a través de Nitro; el modo elegido cambia los requisitos del servidor. En un VPS de ServOrbit, controlas el runtime de Node, las variables y el proxy en lugar de soportar las limitaciones de una plataforma cerrada. Esta guía cubre el camino completo: elección del modo de renderizado, build, servicio PM2, dominio, HTTPS, variables de entorno, caché HTTP y monitorización de logs.",[37,41,69,72,83,105,108,111,114,117],{"type":38,"title":39,"body":40},"h2","¿Por qué alojar Nuxt en un VPS?","Las plataformas de alojamiento compartido no soportan Node.js de forma nativa, lo que hace imposible el autoalojamiento de una aplicación Nuxt sin un VPS o servidor dedicado. Un VPS te permite elegir la versión de Node.js que quieras, configurar un reverse proxy (Nginx o Caddy) en el puerto de tu elección y gestionar tus propios certificados TLS — todo sin limitaciones artificiales de CPU o memoria. Es la solución ideal para desarrolladores independientes y PYMEs que quieren controlar su stack de extremo a extremo.\n\nA diferencia de las soluciones PaaS o serverless, un VPS no factura por ejecución ni limita los tiempos de respuesta: una llamada a la API que tarde muy por debajo del segundo no genera ningún coste adicional. Además conservas el control total sobre las cabeceras HTTP, la caché de borde y la configuración TLS.",{"type":42,"title":43,"headers":44,"rows":49},"comparison","SSR, SSG o SPA: ¿qué modo de renderizado elegir para tu proyecto Nuxt?",[45,46,47,48],"Modo","Renderizado","Proceso Node necesario","Ideal para",[50,55,60,64],[51,52,53,54],"SSR (ssr: true)","Por solicitud, del lado del servidor","Sí — PM2 permanente","App dinámica, SEO, contenido personalizado",[56,57,58,59],"SSG (nuxt generate)","En build, HTML estático","No — nginx es suficiente","Blog, landing page, contenido poco actualizado",[61,62,58,63],"SPA (ssr: false)","En el navegador","Dashboard interno, app tras autenticación",[65,66,67,68],"Hybrid (routeRules)","Por ruta: SSR + SSG mezclados","Sí — servidor Nitro","App con páginas estáticas y rutas API",{"type":38,"title":70,"body":71},"Lo que puedes hacer con Nuxt en un VPS","Un VPS de ServOrbit con la plantilla Nuxt preconfigurada te abre cuatro dimensiones que el hosting compartido o las plataformas PaaS cierran:",{"type":73,"title":74,"items":75},"ul","Capacidades concretas en VPS",[76,77,78,79,80,81,82],"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 `\u002Fetc\u002Fenvironment` o mediante un archivo `.env` fuera del repositorio Git","Habilitar las rutas API de Nitro (`server\u002Fapi\u002F`) 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\u002FCD 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",{"type":84,"title":85,"steps":86},"steps","Instalar y desplegar Nuxt en tu VPS de ServOrbit",[87,90,93,96,99,102],{"title":88,"body":89},"Contratar un VPS Cloud de ServOrbit","Ve a la página `\u002Fvps-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 \u002F 4 GB. Completa el pedido y accede a tu portal de cliente una vez entregado el VPS — normalmente en menos de un minuto.",{"title":91,"body":92},"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.",{"title":94,"body":95},"Desplegar tu aplicación y configurar las variables de entorno","Conéctate por SSH (`ssh root@\u003CIP-del-VPS>`), luego clona tu repositorio en el directorio preparado:\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Ftu-org\u002Ftu-app.git \u002Fvar\u002Fwww\u002Fnuxt-app\ncd \u002Fvar\u002Fwww\u002Fnuxt-app\nnpm install\n```\n\nCrea un archivo `.env` **fuera de tu repositorio Git** con tus variables de runtime:\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 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.",{"title":97,"body":98},"Construir la aplicación y lanzarla con PM2","Compila la aplicación para producción:\n\n```bash\nnpm run build\n```\n\nNuxt 3 genera la carpeta `.output\u002F` con el servidor Nitro. Lánzalo con PM2 en modo cluster para usar todos los núcleos CPU:\n\n```bash\npm2 start .output\u002Fserver\u002Findex.mjs -i max --name nuxt-app\npm2 save\npm2 startup\n```\n\nEl 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`.",{"title":100,"body":101},"Configurar Nginx como reverse proxy y apuntar tu dominio","La plantilla del Marketplace instala un Virtual Host de Nginx listo para usar en `\u002Fetc\u002Fnginx\u002Fsites-available\u002Fnuxt-app`. Edítalo para especificar tu nombre de dominio y habilitar el caché de activos estáticos:\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 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\nApunta 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.",{"title":103,"body":104},"Automatizar los despliegues siguientes","Para actualizaciones, crea un script de despliegue en `\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 \"Despliegue completado\"\n```\n\nHazlo ejecutable (`chmod +x deploy.sh`) y lánzalo desde tu pipeline CI\u002FCD por SSH: `ssh root@\u003CIP> \u002Fvar\u002Fwww\u002Fnuxt-app\u002Fdeploy.sh`. `pm2 reload` (no `restart`) garantiza una transición fluida — PM2 espera a que cada nueva instancia esté lista antes de cortar la antigua.",{"type":38,"title":106,"body":107},"Variables de entorno y configuración runtime de Nuxt 3","Nuxt 3 distingue dos niveles de variables a través de `useRuntimeConfig()`:\n\n- `runtimeConfig.public.*` → disponibles en el cliente **y** en el servidor (p. ej. URL de API pública, claves de seguimiento)\n- `runtimeConfig.*` (no público) → solo en el servidor (p. ej. claves secretas, credenciales DB)\n\nLas variables de entorno las sobreescriben automáticamente en runtime siguiendo la convención `NUXT_\u003CNOMBRE>`. Esto significa que **no** necesitas recompilar para cambiar una URL de API o una clave de acceso: basta con modificar el archivo `.env` en el servidor y recargar PM2 (`pm2 reload nuxt-app`). Especialmente útil para entornos múltiples (staging, producción) que comparten el mismo artefacto de build.\n\nPara secretos críticos (tokens de DB, claves de cifrado), prefiere las variables del sistema en `\u002Fetc\u002Fenvironment` sobre un archivo `.env` en el directorio de la aplicación.",{"type":38,"title":109,"body":110},"Monitorizar logs y diagnosticar errores","PM2 centraliza los logs de tu aplicación Nuxt en tiempo real. Comandos clave:\n\n```bash\npm2 logs nuxt-app          # flujo en directo (stdout + stderr)\npm2 logs nuxt-app --lines 100  # últimas 100 líneas\npm2 monit                  # dashboard CPU \u002F memoria en tiempo real\n```\n\nLos logs se persisten en `~\u002F.pm2\u002Flogs\u002F`. Configura la rotación de logs para evitar llenar el disco:\n\n```bash\npm2 install pm2-logrotate\npm2 set pm2-logrotate:max_size 50M\npm2 set pm2-logrotate:retain 7\n```\n\nPara errores de Nginx (502, 503 cuando PM2 está caído), consulta `\u002Fvar\u002Flog\u002Fnginx\u002Ferror.log`. Un error 502 persistente generalmente indica que el proceso PM2 no está corriendo (`pm2 status`) o que el puerto 3000 no es accesible desde el proxy.",{"type":38,"title":112,"body":113},"Diagnosticar problemas comunes","Tres situaciones aparecen con frecuencia al desplegar una aplicación Nuxt en un VPS:\n\n**Error 502 Bad Gateway.** Nginx no puede alcanzar el proceso Nitro en el puerto 3000. Causas habituales: `pm2 start` no se ha ejecutado o se ha detenido (`pm2 status` para verificar), el puerto 3000 está bloqueado por el firewall (`ufw allow 3000` temporalmente para probar), o la aplicación falló al arrancar (`pm2 logs nuxt-app --lines 50` para leer el último error).\n\n**Variables de entorno sin resolver.** `useRuntimeConfig()` devuelve `undefined` en el cliente para una variable que debería ser pública. Verifica que la variable tiene el prefijo `NUXT_PUBLIC_` en tu archivo `.env`, y que has recargado PM2 tras el cambio: `pm2 reload nuxt-app`. Las variables de entorno solo se leen cuando arranca el proceso Nitro, no en tiempo real.\n\n**Página en blanco en producción tras `nuxt generate`.** El HTML estático se muestra pero los datos dinámicos están vacíos. No es un problema de servidor — es un problema de `baseURL`: en el lado servidor durante el prerender, un `$fetch` con ruta relativa no tiene origen. Pasa la URL completa de tu API en `NUXT_PUBLIC_API_BASE` y usa `useAsyncData` con `useFetch` especificando esa base explícitamente en las páginas que requieren contenido rastreable.",{"type":115,"body":116},"tip","**Consejo de rendimiento: modo cluster de PM2.** El comando `pm2 start .output\u002Fserver\u002Findex.mjs -i max --name nuxt-app` arranca tantas instancias como núcleos CPU disponibles y distribuye automáticamente la carga entre ellas. En un VPS de 2 vCPU obtienes dos workers Nitro activos, duplicando el rendimiento en rutas SSR. Verifica con `pm2 status` que todas las instancias están `online`.",{"type":115,"title":118,"body":119},"Documentación oficial","Para la configuración avanzada, las opciones propias de la herramienta y los cambios de versión, consulta la \u003Ca href=\"https:\u002F\u002Fnuxt.com\u002Fdocs\" target=\"_blank\" rel=\"noopener noreferrer\">documentación oficial de Nuxt\u003C\u002Fa>. Esta guía cubre la puesta en línea en un VPS de ServOrbit; la documentación del editor sigue siendo la referencia para los ajustes finos (routeRules, Nitro presets, módulos oficiales).","Despliegue Nuxt en pocos minutos en un VPS Cloud ServOrbit","Disfrute de un VPS Cloud con instalación de Nuxt en 1 clic, Node.js preconfigurado y soporte ágil, sin sorpresas desagradables en la factura.","Lanzar mi VPS Cloud","\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,"desplegar-nextjs-en-un-vps",{"fr":129,"en":130,"ar":131,"es":127},"deployer-nextjs-vps","deploy-a-nextjs-application-on-a-vps","نشر-تطبيق-nextjs-على-vps","Desplegar una aplicación Next.js en un VPS","Despliegue Next.js en un VPS: Node.js, PM2, Nginx, SSL y SSR. Guía completa para desarrolladores y agencias que quieren autoalojar.",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},"desarrollo","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,"desplegar-una-aplicacion-nodejs-en-un-vps",{"fr":149,"en":150,"ar":151,"es":147},"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.",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,"desplegar-con-caddy",{"fr":167,"en":168,"ar":169,"es":165},"deployer-avec-caddy","deploy-your-applications-with-caddy-on-a-vps","انشر-تطبيقاتك-باستخدام-caddy-على-خادم-vps","Caddy como reverse proxy en VPS: guía completa","Instala y configura Caddy como reverse proxy en tu VPS: HTTPS automático con Let's Encrypt, múltiples apps, seguridad y solución de errores comunes.","2026-05-12T00:00:00+00:00","2026-09-25T23:43:04+00:00",{"id":18,"name":175,"slug":176,"color":177,"icon":176},"Despliegue","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},"despliegue-de-aplicaciones-devops","caddy",true,1794270591364]