Nginx como reverse proxy: la guía que ojalá me hubieran explicado antes

Te voy a ser sincero: la primera vez que escuché “reverse proxy”, pensé:

Vale… esto suena a cosa rara de DevOps y servidores de empresas grandes. Paso.

Y luego – sorpresa – montas tu primera web, quieres ponerla en un dominio bonito con HTTPS…
Y descubres que no hay escapatoria: vas a usar Nginx sí o sí.

En este artículo voy a contártelo como si estuviésemos tomando un café:
Hablaremos de:

1. Qué demonios es un reverse proxy ?
2. Por qué todo el mundo usa Nginx ?
3. Cómo montarlo paso a paso ?
5. Y los errores típicos que te vuelven loco ?

Sin humo. Sin palabrejas raras. Todo muy mascadito.

Qué es exactamente un reverse proxy ?

Imagina que tu aplicación corre así:

• Node -> http://localhost:3000
• Laravel -> http://localhost:8000
• Python -> http://localhost:5000

Funciona, pero solo desde el servidor.

El problema: la gente quiere entrar así: https://ejemplo.com

Ahí es donde Nginx entra a jugar:

• Recibe la petición en el puerto 80/443
• La pasa “por detrás” a tu app
• Devuelve la respuesta al usuario

Como un guardaespaldas:

Internet -> Nginx -> tu app -> Nginx -> usuario

Las ventajas ?

• Puedes usar HTTPS.
• Ganas velocidad.
• Tienes control total de seguridad.

Y tu aplicación sigue tan tranquila en su puerto secreto.

Si aún no tienes nginx instalado, aquí encontrarás una forma de instalar nginx en Ubuntu:

Instalar y configurar Nginx

Ahora veremos cómo podemos configurar los ajustes para que el proxy inverso funcione corretamente.

Por ejemplo, supongamos que tiene un proyecto ejecutándose en el puerto 3000 y puede explorarlo desde el servidor usando este comando:

curl http://localhost:3000

curl http://localhost:3000

Si aparece algo, significa que funciona correctamente. Ahora, pasemos al siguiente paso:

Configuramos Nginx como reverse proxy:

Ahora vamos a crear un archivo nuevo de configuración para nginx.

sudo nano /etc/nginx/sites-available/ejemplo.com.conf

sudo nano /etc/nginx/sites-available/ejemplo.com.conf

Pegamos lo siguiente:

server {
    listen 80;
    server_name ejemplo.com www.ejemplo.com;

    location / {
        proxy_pass http://127.0.0.1:3000;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

server {
    listen 80;
    server_name ejemplo.com www.ejemplo.com;

    location / {
        proxy_pass http://127.0.0.1:3000;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Como se muestra aqui:

Luego guardamos el archivo presionando CTRL + X

Después de guardar, vamos a activar el nuevo archivo de configuración usando el siguiente comando:

sudo ln -s /etc/nginx/sites-available/ejemplo.com.conf /etc/nginx/sites-enabled/

sudo ln -s /etc/nginx/sites-available/ejemplo.com.conf /etc/nginx/sites-enabled/

Ahora, vamos a comprobar si todo esta bien, usando el siguiente comando:

sudo nginx -t

sudo nginx -t

Si vemos un mensaje de éxito como el anterior, reiniciaremos el servicio nginx usando el siguiente comando:

sudo systemctl reload nginx

sudo systemctl reload nginx

Ahora, cuando visites tu dominio: http://ejemplo.com

Verás tu app (todavía sin HTTPS).

Si no funciona probablemente será debido a los siguientes problemas:

Si ves el error 502:

Será porque tu app está apagada o el puerto no coincide, luego verificamos si el puerto 3000 está funcionando o no, usando el siguiente comando:

sudo lsof -i -P -n | grep LISTEN

sudo lsof -i -P -n | grep LISTEN

A continuación, veremos los puertos que están activos en el servidor y comprobaremos el puerto específico de nuestro proyecto.