Implementar Next.js en un VPS: desde la compilación hasta HTTPS

#Prepare una autorización identificable

Comience desde una confirmación conocida, su archivo de bloqueo y una versión de Nodo compatible con la versión Next.js instalada. Para npm, npm ci instala dependencias desde ese archivo de bloqueo. Mantenga el administrador de paquetes existente y el modo de instalación reproducible para pnpm o Yarn.

Compile en un directorio de lanzamiento o CI en lugar de dentro del directorio de salida de un servidor en ejecución. Una compilación puede ejecutar código de aplicación y contactar servicios. Suministre las variables que necesita sin hacer públicos los secretos. Los valores NEXT_PUBLIC_ están destinados al navegador y se incrustan durante la compilación.

node --version
npm ci
npm run build

#Inicie el servidor de producción en loopback

Compruebe que el script de inicio se ejecute el próximo inicio. El servidor de desarrollo no es el proceso para mantener en producción. La vinculación a 127.0.0.1 limita el acceso directo al servidor y su proxy local, manteniendo el puerto de la aplicación fuera de la interfaz pública.

En otra terminal, inspecciona una página real con curl -i http://127.0.0.1:3000/. Consulta su contenido y activos. Si seleccionó salida: independiente, use el server.js generado y su estructura de directorio esperada, incluidos public y .next/static. Ese modo tiene su propio punto de entrada.

npm run start -- --hostname 127.0.0.1 --port 3000

#Deje que systemd administre el proceso

Una unidad systemd ejecuta el servicio independientemente de su sesión. Este ejemplo supone una cuenta de aplicación web existente y una versión en /srv/my-next-app. Verifique la ruta del nodo con el comando -v nodo y adapte ExecStart. La cuenta necesita leer la versión y escribir solo en las ubicaciones de la aplicación que lo requieran.

Mantenga las variables del servidor en el archivo de entorno con los permisos adecuados para la cuenta de servicio. Después de instalar la unidad en su entorno, valídela con systemd-analyze verificar, vuelva a cargar systemd e inicie el servicio. Inspeccione su diario si falla el inicio. Los reinicios automáticos no reemplazan la investigación de una salida relacionada con la memoria.

[Unit]
Description=My Next.js application
After=network.target

[Service]
Type=simple
User=webapp
WorkingDirectory=/srv/my-next-app
Environment=NODE_ENV=production
EnvironmentFile=/etc/my-next-app.env
ExecStart=/usr/bin/node /srv/my-next-app/node_modules/next/dist/bin/next start --hostname 127.0.0.1 --port 3000
Restart=on-failure
RestartSec=5

[Install]
WantedBy=multi-user.target

#Enrutar el dominio a la aplicación

Dentro del bloque del servidor del dominio, una ubicación puede reenviar solicitudes a la aplicación local. El siguiente fragmento cubre HTTP y la transmisión; intégrelo con la configuración existente y ejecute nginx -t antes de recargar. No es una configuración TLS completa.

El dominio debe resolverse en el VPS y tener un certificado válido con renovación funcional. Conserve el host y el protocolo original de la aplicación. Comience sin una caché de respuesta dinámica compartida: las páginas privadas, las cookies y las variantes de navegación necesitan una política explícita. Si la aplicación utiliza WebSockets, agregue el encabezado de actualización de Nginx apropiado que maneja por separado.

location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_buffering off;
}

#Verificar el sitio público

Una respuesta 200 de la página de inicio no verifica toda la solicitud. Ejercita una ruta dinámica, una página faltante, inicio de sesión, cierre de sesión y un formulario. Consulta redirecciones, cookies seguras, imágenes y navegación en un navegador.

Pruebe también una página de transmisión. Si el contenido llega todo al mismo tiempo a través del dominio pero progresivamente en bucle invertido, examine el almacenamiento en búfer en cada intermediario. Mantenga la versión anterior y su configuración antes de cambiar de tráfico. Revertir el código de la aplicación también requiere compatibilidad con cualquier migración de base de datos.

#Dimensionar y evolucionar la implementación

Mida la memoria inactiva, los picos de tráfico y la superposición de implementaciones. Dos versiones pueden coexistir brevemente y la construcción sobre el VPS añade su propio pico. La base de datos y el proxy también pertenecen al presupuesto total.

Para evaluar PRNext, conserve la referencia Next.js y cree un candidato en otro directorio. Verifique el comportamiento y el rendimiento de su aplicación antes de cambiar su tiempo de ejecución.

Tamaño de la memoria VPS para Next.js

Verifique la compatibilidad de PRNext antes de migrar