Guía Completa para Montar una VPS con Next.js en Hostinger

Desplegar un proyecto Next.js en una VPS de Hostinger puede parecer un desafío, pero con esta guía detallada lo lograrás de forma rápida y eficiente. Ya sea que tu dominio esté configurado en Hostinger o apuntando a la IP de tu VPS desde un proveedor externo, aquí te mostrare cómo hacerlo paso a paso.

Nota: Usa el código de referencia 1EDUARDO804 para obtener un 20% de descuento en Hostinger.

1. Configuración Inicial de tu VPS en Hostinger

Sigue estos pasos para configurar tu VPS:

1. Compra tu VPS en Hostinger y selecciona Ubuntu como sistema operativo.
2. Crea una contraseña segura para tu VPS y guarda tanto el nombre de host como tu clave SSH. Copia tu clave SSH localmente con:

pbcopy < ~/.ssh/id_rsa.pub

3. Copia la IP de tu VPS para conectarte en los siguientes pasos.

2. Conexión SSH y Actualización del Servidor

Conéctate a tu VPS usando SSH y asegúrate de actualizar el sistema para mantenerlo seguro y eficiente:

ssh usuario@123.123.123.123
sudo apt update && sudo apt upgrade

Verifica si git está instalado:

git --version

Si no lo está, instálalo con:

sudo apt install git

3. Clonación de tu Proyecto Next.js

Clona tu proyecto desde GitHub (recuerda que necesitarás un token de acceso personal):

git clone https://github.com/tu_usuario/tu_proyecto.git
cd tu_proyecto

4. Instalación de NVM y Node.js

Usa NVM (Node Version Manager) para instalar la versión LTS de Node.js:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.bashrc
nvm install --lts

5. Instalación de Paquetes y Ejecución del Proyecto

Dentro del directorio de tu proyecto, instala las dependencias:

npm install

Ejecuta el proyecto en modo desarrollo o producción:

npm run dev  # Modo desarrollo
npm run build && npm start  # Modo producción

6. Configuración de PM2 para Producción

PM2 garantiza que tu aplicación permanezca activa incluso después de un reinicio del servidor:

npm install -g pm2
pm2 start npm -- start
pm2 list  # Verifica que tu aplicación esté en ejecución

7. Instalación y Configuración de Nginx

Nginx funciona como un proxy inverso para dirigir las solicitudes HTTP a tu aplicación Next.js:

sudo apt install nginx

Crea un archivo de configuración para tu dominio en /etc/nginx/sites-available/tudominio:

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

Agrega la siguiente configuración:

server {
    listen 80;
    listen [::]:80;
    server_name tudominio.com www.tudominio.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;
    }
}

Crea un enlace simbólico y reinicia Nginx:

sudo ln -s /etc/nginx/sites-available/tudominio /etc/nginx/sites-enabled/
sudo nginx -t  # Verifica la configuración
sudo service nginx restart

8. Instalación de Certificados SSL con Certbot

Protege tu sitio con Certbot:

Instala snapd si no lo tienes:

sudo apt install snapd

Instala Certbot:

sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot

Genera los certificados SSL:

sudo certbot --nginx -d tudominio.com -d www.tudominio.com

Ingresa un correo electrónico para recibir notificaciones sobre la renovación del certificado.

9. Actualización del Proyecto

Cuando necesites actualizar tu proyecto:

pm2 stop npm
git pull origin main  # O la rama que uses
npm install
npm run build
pm2 start npm -- start

Recuerda puedes usar el código de referencia 1EDUARDO804 para obtener un 20% de descuento en Hostinger.

¡Felicidades, tu proyecto Next.js ya está desplegado en tu VPS de Hostinger!