Una aplicación Nuxt puede ser desplegada en un servidor Node.js, pre-renderizada para hosting estático, o desplegada en entornos serverless o edge (CDN).

Servidor Node.js

Descubre el preset de servidor Node.js con Nitro para desplegar en cualquier hosting de Node.

• Formato de salida predeterminado si no se especifica o se detecta automáticamente
  
• Carga solo los fragmentos necesarios para renderizar la solicitud para un tiempo de inicio en frío óptimo
  
• Útil para desplegar aplicaciones Nuxt en cualquier hosting de Node.js

Punto de Entrada

Al ejecutar nuxt build con el preset de servidor Node, el resultado será un punto de entrada que lanza un servidor Node listo para ejecutarse.

node .output/server/index.mjs

Esto lanzará tu servidor de producción Nuxt que escucha en el puerto 3000 por defecto.

Respeta las siguientes variables de entorno en tiempo de ejecución:

• NITRO_PORT o PORT (por defecto 3000)
• NITRO_HOST o HOST (por defecto '0.0.0.0')
• NITRO_SSL_CERT y NITRO_SSL_KEY - si ambos están presentes, esto lanzará el servidor en modo HTTPS. En la gran mayoría de los casos, esto no debería usarse más que para pruebas, y el servidor Nitro debería ejecutarse detrás de un proxy inverso como nginx o Cloudflare que termine SSL.

PM2

PM2 (Process Manager 2) es una solución rápida y fácil para alojar tu aplicación Nuxt en tu servidor o VM.

Para usar pm2, utiliza un ecosystem.config.cjs:

module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      port: '3000',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs'
    }
  ]
}

Modo Cluster

Puedes usar NITRO_PRESET=node_cluster para aprovechar el rendimiento multiproceso usando el módulo cluster de Node.js.

Por defecto, la carga de trabajo se distribuye a los trabajadores con la estrategia de round robin.

Aprende Más

Hosting Estático

Hay dos maneras de desplegar una aplicación Nuxt en cualquier servicio de hosting estático:

• La generación de sitios estáticos (SSG) con ssr: true pre-renderiza las rutas de tu aplicación en tiempo de construcción. (Este es el comportamiento predeterminado al ejecutar nuxt generate.) También generará las páginas de fallback de aplicación de una sola página /200.html y /404.html, que pueden renderizar rutas dinámicas o errores 404 en el cliente (aunque puede que necesites configurar esto en tu host estático).
• Alternativamente, puedes pre-renderizar tu sitio con ssr: false (aplicación estática de una sola página). Esto producirá páginas HTML con un <div id="__nuxt"></div> vacío donde normalmente se renderizaría tu aplicación Vue. Perderás muchos beneficios de SEO al pre-renderizar tu sitio, por lo que se sugiere en su lugar usar <ClientOnly> para envolver las partes de tu sitio que no pueden ser renderizadas en el servidor (si las hay).

Renderizado Solo del Lado del Cliente

Si no deseas pre-renderizar tus rutas, otra forma de usar hosting estático es establecer la propiedad ssr en false en el archivo nuxt.config. El comando nuxt generate entonces producirá un punto de entrada .output/public/index.html y paquetes de JavaScript como una aplicación clásica de Vue.js del lado del cliente.

export default defineNuxtConfig({
  ssr: false
})

Proveedores de Hosting

Nuxt puede ser desplegado en varios proveedores de nube con una cantidad mínima de configuración:

Presets

Además de servidores Node.js y servicios de hosting estático, un proyecto Nuxt puede ser desplegado con varios presets bien probados y con una cantidad mínima de configuración.

Puedes establecer explícitamente el preset deseado en el archivo nuxt.config.ts:

export default defineNuxtConfig({
  nitro: {
    preset: 'node-server'
  }
})

... o usar la variable de entorno NITRO_PRESET al ejecutar nuxt build:

NITRO_PRESET=node-server nuxt build

🔎 Consulta el despliegue de Nitro para todos los posibles presets de despliegue y proveedores.

Proxy CDN

En la mayoría de los casos, Nuxt puede trabajar con contenido de terceros que no es generado o creado por Nuxt mismo. Pero a veces dicho contenido puede causar problemas, especialmente las "Opciones de Minificación y Seguridad" de Cloudflare.

Por lo tanto, debes asegurarte de que las siguientes opciones estén desmarcadas / deshabilitadas en Cloudflare. De lo contrario, el re-renderizado innecesario o los errores de hidratación podrían afectar tu aplicación de producción.

1. Velocidad > Optimización > Optimización de Contenido > Deshabilitar "Rocket Loader™"
2. Velocidad > Optimización > Optimización de Imágenes > Deshabilitar "Mirage"
3. Escudo de Raspado > Deshabilitar "Ofuscación de Dirección de Correo Electrónico"

Con estas configuraciones, puedes estar seguro de que Cloudflare no inyectará scripts en tu aplicación Nuxt que puedan causar efectos secundarios no deseados.