ES
Inicia sesión Crea tu cuenta

Cómo instalar Nuxt en Saplo (Vue con renderizado SSR)

Nuxt es para Vue lo que Next.js es para React: un renderizado completo del lado del servidor que requiere un proceso Node de larga duración en segundo plano, no solo un directorio con archivos estáticos. En Saplo, ejecutas Nuxt como un servicio gestionado con reinicio automático, con implementación directamente desde un repositorio Git.

Grzegorz Kalmus ·

Nuxt es un framework construido sobre Vue con renderizado completo del lado del servidor, análogo a lo que Next.js es para React. Sin embargo, SSR requiere un proceso Node de larga ejecución mantenido en memoria, no solo un directorio con archivos estáticos, por lo que el alojamiento compartido habitual no puede con ello. En Saplo, ejecutas Nuxt como un servicio gestionado con reinicio automático, y nginx dirige el tráfico del dominio a él.

Para quién es Nuxt en Saplo

Antes de empezar la instalación, comprueba si es una buena opción para tu proyecto:

  • página web corporativa creada en Vue, que quieres que funcione bien en los resultados de búsqueda - el renderizado del lado del servidor ofrece una ventaja que no ofrece una SPA clásica compuesta únicamente por una compilación estática,
  • tienda headless conectada a tu propia API - Nuxt renderiza las páginas de productos en el lado del servidor, lo que ayuda en la indexación,
  • aplicación fullstack - Nuxt tiene rutas de servidor integradas (/server/api), por lo que puedes escribir un backend simple en el mismo proyecto,
  • quieres implementaciones con git push en lugar de la configuración manual del proceso Node - conectas el repositorio una vez, y Saplo compila y reinicia el servicio automáticamente.

Si la página no necesita SSR (solo nuxt generate, totalmente estática), una pila estática del mismo directorio será más ligera y económica de mantener.

Requisitos

Para instalar Nuxt en Saplo, necesitas:

  • Un Box en el plan L o superior: SSR mantiene el proceso de Node constantemente en memoria y renderiza cada solicitud de nuevo, por lo que necesita más RAM que una página estática normal.
  • Un mínimo de 512 MB de RAM libre y 3 GB de espacio en disco para el proceso de la aplicación.
  • Un dominio o subdominio *.saploapp.pl incluido en el precio de cada plan.
  • Un repositorio Git, si quieres utilizar la implementación automática (opcional para empezar, también puedes subir la aplicación como un archivo .zip a través del panel).

Instalación paso a paso

  1. En el panel de Saplo, ve a Catálogo de aplicaciones y selecciona Nuxt (categoría "Aplicaciones").
  2. Indica un Box de plan L o superior y el nombre de la aplicación; de ahí se creará el subdominio predeterminado.
  3. Selecciona la versión de Node.js para la compilación (18, 20 o 22, por defecto 22) y confirma la instalación.
  4. El motor crea una estructura mínima de Nuxt 4 (en Nuxt 4, el código de la aplicación se ha movido al directorio app/), compila el proyecto y ejecuta el proceso de larga duración .output/server/index.mjs a través del supervisor en el puerto 3000, mientras que nginx hace proxy del tráfico del dominio a ese puerto.
  5. Una vez finalizada la instalación, el dominio del paso 2 muestra la página de inicio de Nuxt en funcionamiento; a partir de ese momento, podrás implementar tu propio proyecto en ella.

Despliega tu propio código con Git

  1. En los detalles de la aplicación, busca la sección Git / CI-CD y haz clic en "Conectar GitHub", confirma la instalación de la aplicación "Saplo Deploy" y selecciona el repositorio con tu proyecto Nuxt.
  2. El archivo saplo.yaml debe estar en el directorio raíz del repositorio.
  3. Confirma (commit) y envía (push) el archivo saplo.yaml a la rama de producción (por defecto main).
  4. Cada git push posterior a esta rama iniciará la compilación y el reinicio del servicio; puedes ver el estado en la pestaña Despliegues.
  5. Después de la compilación, Saplo verifica la presencia del archivo .output/server/index.mjs; si no lo encuentra, el despliegue terminará con un error en lugar de reemplazar la versión funcional con una defectuosa.

Ejemplo de un archivo saplo.yaml mínimo para Nuxt:

name: my-project
stack: nuxt
runtime:
  node: "22"
build:
  install: npm ci
  command: npm run build
start:
  command: node .output/server/index.mjs
  port: 3000

Nuxt en Saplo vs. alternativas

Vercel para Nuxt VPS propio Nuxt en Saplo
Modelo de facturación consumo de funciones y transferencia, aumenta con el tráfico costo fijo del servidor, configuración manual costo fijo del Box
Despliegues desde Git sí, nativo hay que hacerlo manualmente (CI/CD) sí, git push a la rama de producción
Ejecución del proceso SSR totalmente gestionado pm2 o systemd manualmente servicio gestionado con reinicio automático
Migración de un proyecto existente punto de partida construcción del entorno desde cero añades saplo.yaml, el resto sin cambios

Preguntas frecuentes

¿Puedo generar una versión completamente estática en lugar de SSR? Sí, nuxt generate da una salida estática; en ese caso, en el Catálogo de aplicaciones, elige la pila estática en lugar de Nuxt.

¿Cuánta RAM necesita Nuxt en la práctica? El manifiesto de la receta indica un mínimo de 512 MB, pero bajo tráfico de producción real, es mejor planificar un Box L (139 €) para que el proceso SSR tenga un margen para los picos de carga.

¿Funcionará también Nuxt 3, ya que el scaffold genera Nuxt 4? Sí, la instalación desde el catálogo establece un esqueleto de inicio de Nuxt 4, pero puedes implementar tu propio proyecto en Nuxt 3 a través de git push sin ningún cambio: la compilación y el inicio del proceso funcionan de la misma manera.

¿Qué sucede si la compilación falla? La versión anterior en funcionamiento de la aplicación permanece en su lugar; Saplo no la reemplaza por una rota.

¿Obtendré SSL y mi propio Dominio? Sí, el certificado SSL es automático, y un Dominio o subDominio *.saploapp.pl está incluido en el precio de cada plan.

Configuras Nuxt en Saplo desde cero hasta un Dominio funcional en minutos, y cada git push posterior reinicia el servicio con la nueva versión sin tu intervención. Si el proyecto no necesita SSR, una pila estática más ligera y económica en mantenimiento te espera en el mismo catálogo.

  • #Git Deploy
  • #JavaScript
  • #Nuxt
  • #Guía
  • #Vue