Implementación de una aplicación Next.js en un Droplet de DigitalOcean

Introducción

Next.js es un framework de React popular para crear fácilmente aplicaciones React renderizadas en servidor. En este tutorial, explicaremos cómo implementar una aplicación Next.js en un droplet de DigitalOcean usando Nginx como proxy inverso. Esta guía paso a paso asume que ya tienes una aplicación Next.js lista para implementar y una cuenta de DigitalOcean.

Requisitos previos

• Una aplicación Next.js
• Una cuenta de DigitalOcean
• Nombre de dominio registrado (opcional pero recomendado)
• Instalación local de Node.js y npm o yarn

Paso 1: Crear una gota de digitalocean

Alojaremos nuestra aplicación Next.js en un droplet de DigitalOcean que configuraremos nosotros mismos. Ahora, creemos el droplet.

• Inicie sesión en su cuenta de DigitalOcean y vaya a la sección Droplets.
• Haga clic en “Crear GOTA”.
• Seleccione la imagen de Ubuntu (preferiblemente la última versión LTS).
• Elija el tamaño de gota deseado según sus necesidades y presupuesto.
• Para un mejor rendimiento, elija el área del centro de datos más cercana a su público objetivo.
• Agregue sus claves SSH para tener acceso seguro a su droplet.
• Elija un nombre de host para su droplet, que puede ser su nombre de dominio o cualquier nombre preferido.
• Haga clic en “Crear GOTA”.
• Crea la gota

Después de crear el Droplet, anote la dirección IP que se le asigna.

Paso 2: Iniciar el Droplet

Ahora que hemos creado la gota, debemos prepararla para que pueda aceptar conexiones entrantes y enrutar esas conexiones a nuestra aplicación Next.js.

Acceda por SSH a su droplet usando la dirección IP y la clave SSH que proporcionó durante la creación del droplet:

ssh root@<DROPLET_IP>

Actualizar y mejorar paquetes en Droplet:

sudo apt update && sudo apt upgrade -y

Instalar los paquetes necesarios:

sudo apt install -y nodejs npm nginx

Paso 3: Configurar Nginx

Nginx es la herramienta que gestiona todo el enrutamiento hacia nuestra aplicación Next.js. Cree un nuevo archivo de configuración de Nginx para su aplicación Next.js:

sudo nano /etc/nginx/sites-available/nextjs

Pegue la siguiente configuración, reemplazando server_name con el nombre de dominio o la dirección IP de su droplet:

server {
listen 80;
server_name YOUR_IP_ADDRESS;
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;
}
}

Guarde y cierre el archivo. Cree un enlace simbólico para activar la configuración:

sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/

Pruebe la configuración de Nginx para detectar cualquier error de sintaxis:

sudo nginx -t

Si la prueba de configuración fue exitosa, reinicie Nginx:

sudo service nginx restart

Paso 4: Implementar la aplicación Next.js

A continuación, introducimos una aplicación Next.js en el Droplet. Hay varias opciones para hacerlo.

1. Crea una clave SSH en el servidor, conéctala a tu cuenta de GitHub y clona tu repositorio.
2. Crear una aplicación Next.js en Droplet

Para este tutorial, crearemos una nueva aplicación Next.js en nuestro Droplet.

Vuelve a tu droplet mediante SSH:

ssh root@<DROPLET_IP>

Crea una nueva aplicación Next.js y sigue las instrucciones:

cd /var/www
npx create-next-app nextjs

Vaya al directorio de la aplicación Next.js:

cd nextjs

Instalar las dependencias del programa:

npm install

Construya la aplicación Next.js:

npm run build

Por último, ejecute la aplicación Next.js:

npm start

Su aplicación Next.js ya está implementada y accesible en el nombre de dominio o dirección IP de su droplet. Para que su aplicación se ejecute en segundo plano y se reinicie automáticamente cuando el servidor falla o se reinicia, necesitará usar un administrador de procesos como PM2.

Paso 5: Inicie PM2 Process Manager

Iniciamos npm desde nuestro Droplet. En ocasiones, este comando puede dejar de ejecutarse por razones como el reinicio del servidor o la necesidad de instalar una actualización. Usaremos una herramienta llamada PM2 para asegurarnos de que nuestra aplicación Next.js siempre esté en ejecución. PM2 se reiniciará incluso si la aplicación Next.js falla.

Para instalar PM2 globalmente en su droplet:

sudo npm install -g pm2

Vaya al directorio de la aplicación Next.js (si aún no está allí):

cd /var/www/nextjs

Inicie la aplicación Next.js usando PM2:

pm2 start npm --name "nextjs" -- start

Este comando inicia la aplicación Next.js llamada "nextjs" mediante el comando npm start. PM2 reiniciará automáticamente la aplicación si el servidor falla o se reinicia.

Para garantizar que PM2 se inicie al arrancar, ejecute:

pm2 startup

Este comando creará un script que puedes copiar y pegar en tu terminal para iniciar PM2 en el momento del arranque.

Guardar los procesos PM2 actuales:

pm2 save

Resultado

Ha ejecutado correctamente una aplicación Next.js en un droplet de DigitalOcean usando Nginx como proxy inverso y PM2 como gestor de procesos. Su aplicación debería ser accesible en el nombre de dominio o la dirección IP de su droplet.

Si usa un nombre de dominio, recuerde configurar sus ajustes de DNS. Apunte el registro A de su dominio a la dirección IP de su droplet para poder acceder a la aplicación usando el nombre de dominio.

Para mejorar la seguridad y el SEO, considere configurar certificados SSL con Let's Encrypt e implementar conexiones HTTPS. Además, puede explorar la posibilidad de optimizar su aplicación Next.js con almacenamiento en caché y otras mejoras de rendimiento.