Cómo desplegar una aplicación NextJS en un VPS de Clouding.io

Desplegar una app Next.js en Clouding.io es totalmente posible, pero Clouding no tiene un servicio “Next.js nativo” como Vercel o Netlify, así que normalmente se hace desplegando en un servidor VPS con Node.js. Te explico paso a paso la forma más típica de hacerlo:

1. Preparar el VPS en Clouding

1. Crea un VPS desde Clouding.io.

• Recomiendo Ubuntu 22.04 LTS.
• Elige al menos 2 GB de RAM para Next.js en producción.
• Parece una locura, pero elige 10GB, porque a poco que añadas paquetes se te consumen 5GB

2. Conéctate al VPS por SSH:

ssh usuario@IP_DEL_SERVIDOR

2. Instalar Node.js y npm

1. Actualiza el sistema:

sudo apt update && sudo apt upgrade -y

2. Instala Node.js (recomiendo LTS, actualmente 20.x):

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

3. Verifica:

node -v
npm -v

3. Subir tu app Next.js al servidor

git clone https://github.com/usuario/mi-app-next.git
cd mi-app-next

Si tienes dudas o problemas, visita mi guía, Adding a SSH key to an VPN.

4. Instalar dependencias y construir la app

Paso previo, por si acaso:

sudo apt install -y bzip2

Y ahora intenta isntalar las dependencias

npm install
npm run build

Esto generará la carpeta .next lista para producción.

5. Ejecutar la app

npm start

Por defecto Next.js corre en el puerto 3000, algo así:

   ▲ Next.js 15.3.4
   - Local:        http://localhost:3000
   - Network:      http://[IP]:3000

 ✓ Starting...
 ✓ Ready in 484ms

6. Crear el archivo .env en tu proyecto

1. En tu VPS, dentro de la carpeta de tu app (/root/[proyecto]):

vi .env

Ejemplo:

NODE_ENV=production
NEXT_PUBLIC_API_URL=https://api.midominio.com
DATABASE_URL=mysql://user:pass@localhost:3306/dbname

2. Reconstruir la app cuando cambies el `.env`` Next.js lee el .env en build time, así que cada vez que lo modifiques, debes volver a construir:

npm run build
npm start

7. Configurar un proceso en segundo plano (opcional pero recomendado)

Usa PM2 para que la app siga corriendo si cierras la sesión SSH:

sudo npm install -g pm2
pm2 start npm --name "mi-app-next" -- start
pm2 save
pm2 startup

Mas información sobre pm2: https://help.clouding.io/hc/es/articles/4402736917394-C%C3%B3mo-usar-PM2-para-gestionar-una-app-en-Node-js

8. Configurar Nginx como reverse proxy (para usar tu dominio y HTTPS)

1. Instala Nginx:

sudo apt install nginx -y

2. Configura el archivo de sitio (/etc/nginx/sites-available/mi-app):

server {
    listen 80;
    server_name midominio.com www.midominio.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;
    }
}

3. Habilita el sitio:

sudo ln -s /etc/nginx/sites-available/mi-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

4. Instala Certbot para HTTPS:

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

Con esto, tu app Next.js debería estar corriendo en Clouding.io con tu dominio y HTTPS.

Troubleshooting

Activar la el acceso via IP sin nombre de dominio aun?

Usar Nginx como reverse proxy

No es muy práctico exponer el puerto 3000. Lo normal es:

Dejar Next.js corriendo en localhost:3000.

Configurar Nginx para que escuche en el puerto 80 (y 443 con HTTPS) y redirija las peticiones al 3000.

Ejemplo de config /etc/nginx/sites-available/NOMBRE:

server {
    listen 80;
    server_name 200.234.238.114 tu-dominio.com;

    location / {
        proxy_pass http://127.0.0.1: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;
    }
}

Activar config:

sudo ln -s /etc/nginx/sites-available/accessiblai /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

Con eso podrás abrir tu app directamente en http://200.234.238.114 (y luego añadir HTTPS con Let’s Encrypt).