En este artículo aprenderás a desplegar (deploy) una aplicación de Next.js en un servidor Ubuntu. Veremos todo el proceso: desde la configuración del entorno hasta la puesta en producción usando un servidor web como Nginx para manejar las peticiones. ¡Comencemos!
Requisitos Previos
Antes de comenzar, asegúrate de contar con lo siguiente:
- Un servidor Ubuntu (por ejemplo, Ubuntu 20.04 LTS o superior) con acceso SSH.
- Un usuario con privilegios de sudo para ejecutar comandos administrativos.
- Un dominio o una dirección IP pública para acceder a tu aplicación.
- Node.js (versión 14 o superior) y npm o yarn instalados (veremos la instalación más adelante si no los tienes).
Configurando el Servidor Ubuntu
Para empezar, conéctate por SSH a tu servidor y asegúrate de actualizar los paquetes:
sudo apt-get update && sudo apt-get upgrade -y
Esto garantizará que tu sistema esté al día y listo para instalar nuevas dependencias.
Instalación de Node.js y Dependencias
En caso de que no tengas instalado Node.js, puedes usar el repositorio oficial de NodeSource. Por ejemplo, para instalar la versión 18:
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
Esto instalará tanto Node.js como npm. Si prefieres Yarn, instálalo con:
sudo npm install --global yarn
Para verificar la instalación, usa:
node -v
npm -v
Clonar o Subir Tu Proyecto Next.js
Existen varias formas de llevar tu proyecto al servidor:
Clonar desde Git:
git clone <URL_de_tu_repositorio.git>
cd nombre-de-tu-proyecto
Subir los archivos via SFTP/FTP:
Coloca los archivos en la carpeta donde quieras alojar tu aplicación, por ejemplo /var/www/tu-app.
Una vez que tu proyecto esté en el servidor, entra en la carpeta y ejecuta:
npm install
# o
yarn install
Así instalarás todas las dependencias definidas en tu proyecto.
Compilando la Aplicación (Build)
Para generar la versión de producción optimizada de tu proyecto:
npm run build
# o
yarn build
Este comando creará la carpeta .next con los archivos de tu aplicación ya compilados.
Ejecuta la Aplicación
Para probar tu aplicación en modo producción, ejecuta:
npm run start
# o
yarn start
Por defecto, tu aplicación se muestra en http://localhost:3000.
- Si accedes a la dirección IP pública de tu servidor con el puerto 3000 (p. ej.
http://<tu_IP>:3000), deberías ver tu aplicación en funcionamiento. - Aunque esto sirve para pruebas, en producción es recomendable usar un administrador de procesos (como PM2) o configurar systemd para que la app siga corriendo incluso si cierras la sesión SSH o se reinicia el servidor.
Configurando PM2 para Producción
Para mantener tu aplicación corriendo en segundo plano, usa PM2:
sudo npm install -g pm2
Luego, arranca la aplicación:
pm2 start npm --name "tu-app" -- run start
Con pm2 status podrás verificar que tu aplicación está en ejecución.
Para que PM2 se inicie automáticamente tras un reinicio del servidor:
pm2 startup systemd
Configuración de Nginx como Reverse Proxy
Para que tu aplicación sea accesible a través de los puertos 80 (HTTP) o 443 (HTTPS) y responda a tu dominio (sin mostrar :3000), vamos a configurar Nginx como “reverse proxy”.
Instala Nginx
sudo apt-get install nginx -y
Crea un Archivo de Configuración para tu Sitio
Por ejemplo, si tu dominio es capobytes.com, crea el archivo de configuración:
sudo nano /etc/nginx/sites-available/capobytes.conf
Dentro de él, pega la siguiente configuración (ajusta dominio y rutas según corresponda):
server {
listen 80;
server_name capobytes.com www.capobytes.com;
location / {
proxy_pass http://localhost:3000;
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;
}
}
Guarda y cierra el archivo.
Habilita el Sitio y Reinicia Nginx
sudo ln -s /etc/nginx/sites-available/capobytes.conf /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx
Ahora tu aplicación debería estar disponible al abrir http://capobytes.com en el navegador (o el dominio que hayas configurado).
Añadiendo SSL con Let’s Encrypt
Para asegurar tu sitio con HTTPS, instala Certbot:
sudo apt-get install certbot python3-certbot-nginx -y
Luego ejecuta:
sudo certbot --nginx -d capobytes.com -d www.capobytes.com
Sigue las instrucciones. Al terminar, tu sitio estará configurado para HTTPS automáticamente.
¡Listo! Has aprendido a desplegar una aplicación Next.js en un servidor Ubuntu, usando Nginx como servidor web y, opcionalmente, PM2 para mantener tu aplicación ejecutándose en segundo plano.
Si, además, añadiste el certificado SSL de Let’s Encrypt, tu sitio estará disponible de forma segura por HTTPS.
Consejo final: monitorea tu aplicación revisando los registros de PM2 y de Nginx:
- PM2:
pm2 logs - Nginx:
sudo tail -f /var/log/nginx/error.log
Y recuerda mantener tu servidor y dependencias actualizadas periódicamente:
sudo apt-get update && sudo apt-get upgrade -y
¿Tienes alguna duda o recomendación adicional? ¡Déjala en los comentarios y con gusto te ayudaremos!
No Comments