Cómo Configurar un Proxy Inverso con Nginx para Flask - Episodio 18

Configurar Nginx como proxy inverso para Flask no es opcional si quieres seguridad y rendimiento en producción.

En este post te cuento cómo lo hice, los errores que encontré y cómo los solucioné. 🚀🔥

🚀 ¿Por qué necesito Nginx si Gunicorn ya funciona?

Después de configurar Gunicorn y hacer que Flask funcionara en producción, me enfrenté a un nuevo dilema:

¿Realmente necesito Nginx?

Mi aplicación ya estaba respondiendo peticiones en el servidor, pero había tres grandes problemas que no podía ignorar:

1️⃣ Gunicorn no maneja tráfico directamente de internet de forma segura.

2️⃣ No hay soporte para HTTPS ni gestión avanzada de peticiones.

3️⃣ Si Gunicorn se cae, necesito una capa que lo proteja y lo reinicie si es necesario.

Aquí es donde entra en juego Nginx como proxy inverso.

Si no lo configuro, estoy dejando la aplicación expuesta y sin optimización de tráfico.

Vamos a ver cómo lo solucioné. 🔥

🔍 Problema: Flask sin protección y sin balanceo de carga

Flask con Gunicorn funcionaba, pero al probar con carga real noté algunos problemas:

🔴 Acceso directo al puerto de Gunicorn. Estaba exponiendo la aplicación en un puerto específico (AQUÍ_VA_EL_PUERTO) y cualquier usuario podía intentar conectarse directamente.

🔴 No había HTTPS. En pleno 2024, servir una web sin HTTPS es prácticamente un crimen digital. 🔐

🔴 Gunicorn no maneja estáticos de forma eficiente. Todo el tráfico de imágenes, CSS y JS estaba pasando por Gunicorn en vez de servirse de forma optimizada.

Era hora de configurar Nginx como proxy inverso, para manejar estas peticiones y mejorar el rendimiento.

🛠️ Instalación de Nginx y Configuración del Proxy Inverso

✅ 1. Instalar Nginx en el servidor

sudo apt update && sudo apt install nginx -y

✅ 2. Crear un archivo de configuración para la aplicación

Abrimos un nuevo archivo en /etc/nginx/sites-available/mi_saas:

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

Dentro de este archivo, agregamos la configuración para redirigir el tráfico HTTP al servidor de Gunicorn:

server {
    listen 80;
    server_name mi-saas.com www.mi-saas.com;

    location / {
        proxy_pass http://127.0.0.1:AQUÍ_VA_EL_PUERTO;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /static/ {
        alias /var/www/mi_saas/static/;
    }
}

✅ 3. Activar la configuración y reiniciar Nginx

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

Si no hay errores, Nginx ya está funcionando como proxy inverso, redirigiendo todas las peticiones al servidor Flask que corre con Gunicorn.

❌ Errores encontrados y cómo los solucioné

🔴 502 Bad Gateway al acceder a la aplicación

El primer error que encontré fue un clásico 502 Bad Gateway al intentar acceder a la app.

¿La razón?

Gunicorn no estaba corriendo o Nginx estaba apuntando a un puerto incorrecto.

Solución:

1. Verificar que Gunicorn está activo con systemctl status gunicorn.
2. Confirmar el puerto en la configuración de Nginx y asegurarse de que coincida con el de Gunicorn.

🔴 Archivos estáticos no se servían correctamente

Al probar la aplicación, los estilos CSS y las imágenes no cargaban.

Esto se debe a que Flask no sirve archivos estáticos en producción.

Solución:

1. Asegurar que la carpeta /static/ se mapee correctamente en la configuración de Nginx.
2. Ejecutar sudo systemctl restart nginx para aplicar los cambios.

🔴 Conflictos con otro proceso en el puerto 80

Si otro servicio ya está usando el puerto 80, Nginx no podrá iniciarse.

Solución:

1. Ver qué está usando el puerto con sudo netstat -tulnp | grep :80.
2. Detener el proceso en conflicto o cambiar el puerto de Nginx.

💡 Aprendizajes del proceso

🔹 Gunicorn necesita Nginx para ser seguro y escalable

Gunicorn no está diseñado para recibir tráfico directamente de internet.

O sea, Nginx actúa como una capa de protección y balanceo de carga.

🔹 Los archivos estáticos no deben pasar por Gunicorn

Si no configuras Nginx para servir los archivos estáticos, estarás sobrecargando Gunicorn innecesariamente.

🔹 Nginx requiere pruebas antes de aplicarse en producción

Cada vez que configures Nginx, ejecuta nginx -t antes de reiniciar el servicio para evitar errores de configuración.

🔹 No asumas que todo funcionará a la primera

Entre errores de permisos, puertos ocupados y configuraciones mal escritas, configurar un proxy inverso es un proceso de prueba y error.

🚀 Próximos Pasos

Ahora que la aplicación está detrás de un proxy inverso seguro y optimizado!

Ahora, el siguiente paso es habilitar HTTPS con Let's Encrypt para cifrar todas las comunicaciones. 🔐🚀

➡️ ¿Has configurado Nginx como proxy inverso?

¿Tuviste problemas? Cuéntame tu experiencia.

Si quieres conocer otros artículos parecidos a Cómo Configurar un Proxy Inverso con Nginx para Flask - Episodio 18 puedes visitar la categoría Proyecto-IA.