Cómo implementar una aplicación Next.js en un VPS

Una guía completa para implementar una aplicación Next.js en un VPS, que abarca la configuración del servidor, la instalación de Node.js (a través de NVM), la clonación de la aplicación, la compilación, el uso de PM2 para la gestión de procesos, la configuración de Nginx como proxy inverso y la configuración de SSL.

Intermediate

La implementación de una aplicación Next.js en un servidor privado virtual (VPS) implica varios pasos clave, desde la configuración del entorno del servidor hasta la configuración de un proxy inverso y un gestor de procesos. Esta guía se centra en el uso de un VPS basado en Ubuntu, Nginx como proxy inverso y PM2 para la gestión de procesos, junto con Certbot para los certificados SSL.

Requisitos previos:

  • Un VPS que ejecute Ubuntu (por ejemplo, 20.04, 22.04 o 24.04).
  • Un nombre de dominio registrado con sus registros DNS apuntando a la dirección IP de su VPS.
  • Conocimientos básicos de la línea de comandos de Linux.
  • Tu aplicación Next.js lista para producción (lo ideal es que esté enviada a un repositorio Git).

Paso 1: Conéctate a tu VPS y actualiza el sistema

  1. Conéctate a través de SSH: Abre tu terminal y conéctate a tu VPS utilizando SSH: bash ssh tu_nombre_de_usuario@tu_ip_vps Reemplaza tu_ip_vps por la dirección IP real de tu VPS.

  2. Actualiza y mejora los paquetes del sistema: es fundamental asegurarse de que los paquetes de tu servidor estén actualizados para garantizar la seguridad y la estabilidad. bash sudo apt update && sudo apt upgrade -y

Paso 2: Instalar Node.js y npm/yarn

Next.js requiere Node.js. Puede instalar Node.js usando Node Version Manager (NVM) para una gestión flexible de versiones, o directamente desde los repositorios de Ubuntu. Por lo general, se recomienda NVM.

Opción A: Instalar Node.js utilizando NVM (recomendado) 1. Instalar NVM: bash curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash (Nota: la versión v0.39.7 procede de un resultado de búsqueda. Puede consultar la página de GitHub de NVM para ver la última versión). 2. Activar NVM: es posible que tenga que cerrar y volver a abrir el terminal, o ejecutar uno de los siguientes comandos, dependiendo de su shell: bash source ~/.bashrc # O source ~/.profile o source ~/.zshrc 3. Instalar la versión LTS de Node.js: bash nvm install --lts También puede instalar una versión específica, por ejemplo, nvm install 20. 4. Verifique la instalación: bash node -v npm -v Esto debería mostrar las versiones instaladas de Node.js y npm.

Opción B: Instalar Node.js y npm desde los repositorios de Ubuntu 1. Instalar Node.js: bash sudo apt install nodejs -y 2. Instalar npm: bash sudo apt install npm -y 3. Verificar la instalación: bash node -v npm -v

Paso 3: Implementa tu aplicación Next.js

  1. Clona tu repositorio: Navega hasta un directorio adecuado (por ejemplo, /var/www/) y clona tu proyecto Next.js desde tu repositorio Git. bash sudo mkdir -p /var/www/your-app-name sudo chown -R your_username:your_username /var/www/your-app-name cd /var/www/your-app-name git clone https://github.com/your-username/your-nextjs-app.git . Si tu repositorio es privado, asegúrate de haber configurado claves SSH o utiliza un token de acceso personal para clonar a través de HTTPS.

  2. Instalar dependencias y compilar: instala las dependencias de tu proyecto y, a continuación, compila la aplicación Next.js para producción. bash npm install # o yarn install npm run build # o yarn build El comando npm run build crea una compilación optimizada para producción de tu aplicación.

Paso 4: Instalar y configurar PM2 (gestor de procesos)

PM2 es un gestor de procesos de producción para aplicaciones Node.js que las mantiene activas indefinidamente y facilita su gestión.

npm install -g pm2 

Inicie su aplicación Next.js con PM2. Las aplicaciones Next.js suelen ejecutarse en localhost:3000 de forma predeterminada.

pm2 start npm --name "my-nextjs-app" -- start 

Reemplaza "my-nextjs-app" por un nombre descriptivo para tu aplicación.

Para asegurarte de que PM2 reinicia tu aplicación al reiniciar el servidor:

pm2 startup systemd pm2 save 

Paso 5: Configurar Nginx como proxy inverso

Nginx actuará como un proxy inverso, reenviando las solicitudes de tu dominio a tu aplicación Next.js que se ejecuta en el puerto 3000.

sudo apt install nginx -y 

Crea un nuevo archivo de configuración de Nginx para tu sitio. Reemplaza tu_dominio.com por tu dominio real.

sudo nano /etc/nginx/sites-available/tu_dominio.com

Añada la siguiente configuración:

server {
 listen 80;
 server_name your_domain.com www.your_domain.com;

 ubicación / {
 proxy_pass http://localhost:3000; # Puerto predeterminado de Next.js  proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection 'upgrade';
 proxy_set_header Host $host;
 proxy_cache_bypass $http_upgrade;  }
} 

Habilita el sitio creando un enlace simbólico a sites-enabled y prueba la configuración de Nginx:

sudo ln -s /etc/nginx/sites-available/your_domain.com /etc/nginx/sites-enabled/
sudo nginx -t 

Si la prueba tiene éxito, reinicia Nginx:

sudo systemctl restart nginx

Paso 6: Configurar el cortafuegos (UFW)

Si utiliza UFW (Uncomplicated Firewall), permita el tráfico HTTP (puerto 80) y HTTPS (puerto 443).

sudo ufw allow 'Nginx Full'
sudo ufw enable 

Paso 7: (Opcional) Configurar SSL con Certbot (Let's Encrypt)

Para proteger su aplicación con HTTPS, utilice Certbot para obtener y configurar certificados SSL de Let's Encrypt.

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your_domain.com -d www.your_domain.com 

Siga las instrucciones. Certbot modificará automáticamente su configuración de Nginx y configurará la renovación automática del certificado.

Paso 8: Verifica tu implementación

Ahora deberías poder acceder a tu aplicación Next.js a través de tu nombre de dominio (o la dirección IP del VPS si omitiste la configuración del dominio) mediante HTTPS. Abre tu navegador web y ve a https://your_domain.com.

(Opcional) Configura CI/CD

Para implementaciones automatizadas, considere la posibilidad de configurar un canal de integración continua/implementación continua (CI/CD) utilizando herramientas como GitHub Actions, GitLab CI o Jenkins. Esto automatizaría los pasos de clonación, instalación, compilación y reinicio de su aplicación en el VPS cada vez que envíe nuevo código a su repositorio.

¡Ahora debería poder acceder a su aplicación Next.js a través de su nombre de dominio!