NGINX - Contenido estático

¿Que es Nginx?

Nginx, es un servidor web de codigo abierto capaz de manejar multiples conexiones en simultaneo, se utiliza para servir aplicaciones web modernas.

Ademas de ser un servidor web, como apache tambien sirve como:

• Proxy inverso, redirige trafico entre servidores.

• Balanceador de cargas, distribuye peticiones para evitar sobrecargas.

• Cache de contenido, acelera la entrega de paginas estáticas.

¿Por que usarlo?

Rendimiento:

• Maneja 10,000+ conexiones simultáneas con poco consumo de RAM.

• Ideal para sitios con alto tráfico (ej: Netflix, Airbnb).

Seguridad:

• Bloquea ataques DDoS (Denegación de Servicio Distribuido) es un ciberataque que inunda un servidor, sitio web o red con tráfico malicioso, con configuraciones sencillas.

Flexibilidad:

• Sirve páginas estáticas, aplicaciones dinámicas (NodeJS, Python), y hasta APIs.

Caso de uso para servir contenido estático

En este caso en particular vamos a utilizar Nginx para servir contenido estatico generado en una aplicación ReactJS.

Nos saltearemos los pasos de crear una nueva aplicacion, en este articulo solo nos limitaremos a la utilización de Nginx en una aplicación ReactJs ya creada.

Diagrama - Arquitectura

El siguiente diagrama demuestra como una aplicación ReactJS interactua con el servidor de Nginx para servir contenido estático generado a partir de la construcción de la aplicación web.

Primer paso - Construir app ReactJS

Generar los archivos estáticos de tu aplicación ReactJS, con el siguiente comando, esto generara un directorio llamado build o dist con todo el contenido estático generado.

npm run build

Segundo paso - Instalar Nginx

Instalación de Nginx en tu entorno local.

Si tienes linux ejecuta el siguiente comando para la instalación:

sudo apt update && sudo apt install nginx

Si tienes macOs ejecuta el siguiente comando para la instalación:

brew install nginx

Copiar los archivos estaticos generados en el paso anterior de la aplicacion ReactJS en el directorio de Nginx:

sudo cp -r build/* /var/www/html/  # Linux
cp -r build/* /usr/local/var/www/   # macOS

Tercer paso - Configurar Nginx

Deberas editar el archivo de configuración de nginx para servir contenido estatico, el archivo se encuentra en /etc/nginx/sites-available/default en Linux o /usr/local/etc/nginx/nginx.conf en macOS, configuralo con el siguiente contenido:

server {
    listen 80;
    server_name tu-dominio.com;  # Usa `localhost` para pruebas locales

    root /var/www/html;          # Ruta donde copiaste los archivos
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # Necesario para React Router
    }
}

Explicación:

• try_files: Permite que React Router maneje las rutas (evita errores 404 al refrescar).

• index.html: Punto de entrada de tu app React.

Cuarto paso - Prueba la aplicación

Inicia o reinicia Nginx

sudo systemctl restart nginx  # Linux
nginx -s reload               # macOS

Ingresa desde el browser a http://localhost deberias ver tu aplicación ReactJS normalmente, pero ahora configurada para servir contenido estático con Nginx.

Conclusion

Utilizar Nginx para servir contenido estático en una aplicación ReactJS garantiza:

• Rendimiento, sirve archivos estático de forma mas rapida y eficiente que NodeJS.

• Simplicidad, no necesitas realizar grandes configuraciones para producción.

• Escalabilidad, garantiza el manejo de miles de peticiones sin esfuerzo.