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
-
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_vpsReemplazatu_ip_vpspor la dirección IP real de tu VPS. -
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
-
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. -
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 buildEl comandonpm run buildcrea 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!