En este tutorial aprenderás a servir un frontend React dockerizado detrás de Nginx mientras se proxifican las peticiones a un backend Node.js. Es una guía práctica para containerizar una aplicación full stack y dejarla lista para producción con un proxy inverso sencillo.
Requisitos previos: manejo básico de terminal y comandos Docker, conocimientos de Node.js y npm, conceptos de redes como puertos y diferencias host versus contenedor, Docker instalado con docker-compose y Git para clonar repositorios. También es útil entender imágenes, contenedores, volúmenes y redes de Docker.
Al finalizar tendrás un frontend React servido por Nginx en su propio contenedor, un backend Node.js en otro contenedor accesible mediante rutas que empiezan por /api/, y un archivo docker-compose.yml que orquesta frontend, backend y MongoDB. Esta arquitectura es ligera y fácil de ampliar con SSL, caching o funciones en tiempo real.
Antes de entrar en materia, una breve nota sobre Nginx y por que usarlo: si vienes de plataformas como Vercel o Netlify, Nginx cumple funciones similares pero con mayor control y menor coste en escenarios propios. Sus usos principales son servir ficheros estáticos, actuar como proxy inverso, balancear carga, terminar conexiones SSL TLS y servir como capa de caché.
Clona el repositorio de ejemplo para seguir los archivos tal cual: https github com pksri1996 Nginx. En la carpeta frontend verás un Dockerfile de varias etapas. La primera etapa parte de node:18 como build y genera los artefactos de producción. La segunda etapa usa una imagen muy reducida de nginx alpine que solo sirve los archivos estáticos generados. Esa estrategia crea dos imágenes pero solo un contenedor final muy lean dedicado a servir contenido estático.
Veamos la configuración de Nginx y dónde se aplican los roles mencionados. Para servir ficheros estáticos se usa un bloque server que escucha en el puerto 80 y apunta su root a la ruta donde Nginx sirve los activos, por ejemplo root /usr/share/nginx/html; index index.html; server_name _; El guion bajo como server_name actua como comodin para manejar peticiones que no coinciden con otros nombres de servidor.
El proxy inverso es la parte que permite mantener el backend oculto y solo exponer Nginx. Un ejemplo de bloque para enrutar /api/ hacia el contenedor backend es location /api/ { proxy_pass https://backend:5000/; 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; } En esencia proxy_pass https://backend:5000/; es lo que direcciona las peticiones al servicio llamado backend en la red de Docker. Las demas directivas ayudan con protocolos como WebSocket y evitan problemas de cache o encabezados incorrectos.
Este enfoque permite separar responsabilidades: Nginx se encarga de servir activos y gestionar conexiones externas, mientras que Node procesa la logica y la API. Es una buena base para añadir certificados SSL TLS, caching avanzado, balanceo de carga o WAF y así cumplir requisitos de seguridad y rendimiento.
Si buscas desarrollo profesional de soluciones empresariales, en Q2BSTUDIO diseñamos y desplegamos aplicaciones a medida y software a medida optimizado para producción. También ofrecemos despliegues y configuraciones en la nube como parte de nuestros servicios cloud aws y azure, lo que facilita llevar este tipo de arquitecturas a entornos seguros y escalables.
En Q2BSTUDIO combinamos experiencia en inteligencia artificial, ciberseguridad, servicios de inteligencia de negocio y agentes IA para empresas. Palabras clave que trabajamos a diario en proyectos incluyen aplicaciones a medida, inteligencia artificial, ciberseguridad, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi.
Recomendaciones finales: prueba el setup localmente con docker-compose, monitoriza logs de Nginx y del backend, añade certificados SSL y políticas de seguridad en producción, y considera integraciones con herramientas de observabilidad y automatizacion. Si necesitas ayuda para llevar tu proyecto a producción con buenas practicas de seguridad y escalabilidad, en Q2BSTUDIO podemos acompañarte desde el desarrollo hasta el despliegue.
Este es solo el inicio para dominar Nginx en un stack MERN. En próximas entregas profundizaremos en configuraciones avanzadas, cacheo, balanceo y ejemplos con WebSocket y autenticacion.