Olvídate de serve - Cómo desplegar React en producción con NGINX (sin ser un experto) - Episodio 35

Si serve -s dist --listen 3000 es lo único que conoces para correr React en producción...

Este post te va a cambiar la cabeza (como me la cambió a mí).

Olvídate de serve y utiliza NGINX. Diario de un SaaS

Todo lo que había leido era que  serve es buenísimo para mostrar mi frontend en producción.

Y lo confieso: me parecía mágico.

Ejecutas un comando y voilà, tu app aparece en el navegador.

Pero cuando empecé a montar mi SaaS de verdad, empecé a notar sus límites.

Las rutas fallaban. HTTPS brillaba por su ausencia.

Y todo se sentía... precario.

Así que, con la IA como copiloto, me lancé a descubrir cómo hacerlo con NGINX.

Este post cuenta el proceso tal cual lo viví. Sin postureo. Con errores, descubrimientos y muchos "ahhh, ahora entiendo".

❌ Por qué serve no es ideal en producción

• No maneja bien las rutas internas si usas React Router.
• No puedes personalizar headers o gzip.
• No soporta HTTPS de forma sencilla.
• Es un proceso Node.js corriendo en segundo plano... nada eficiente ni seguro para prod.

Sirve para salir del paso.

Pero si quieres algo serio, hay que dar un paso más.

✅ Instalación y configuración básica de NGINX en AlmaLinux

sudo dnf install epel-release -y
sudo dnf install nginx -y
sudo systemctl enable nginx
sudo systemctl start nginx

Una vez instalado, puedes probar que funciona accediendo a la IP del servidor.

Deberías ver la página por defecto de NGINX.

✅ Servir archivos estáticos desde dist/

Después de hacer el build con Vite (npm run build), el contenido queda en dist/. En mi caso, lo moví a:

/var/www/frontend/dist

Y configuré el bloque de NGINX así:

server {
    listen 80;
    server_name midominio.com;

    root /var/www/frontend/dist;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

Esto solucionó los errores de rutas internas y recargas con React Router.

✅ Habilitar HTTPS con Let's Encrypt

Este paso ya lo habíamos hecho antes para otro servicio del VPS, pero me pareció importante entender cómo funcionaba por dentro.

Aunque en este caso no tuve que repetirlo, dejo anotado el proceso para futuras apps que necesiten HTTPS desde cero:

sudo dnf install certbot python3-certbot-nginx -y

Y luego:

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

Esto genera certificados válidos y configura automáticamente NGINX. No lo ejecuté esta vez, pero ahora sé cómo funciona y lo tengo documentado para el futuro.

✅ Deploys sin downtime con systemctl reload nginx

Cuando hago un nuevo build y reemplazo la carpeta dist, simplemente ejecuto:

sudo systemctl reload nginx

NGINX recarga la configuración sin cerrar conexiones activas.

No hay caídas.

Y eso, para mí, ya es nivel pro (aunque no lo sea).

🧠 Reflexión final

serve fue mi primer paso en esto de desplegar un frontend.

Y me ayudó.

Pero como todo en esta aventura del SaaS, llega un momento en el que tienes que aprender cosas nuevas si quieres crecer.

Gracias a NGINX, ahora mi app carga más rápido, las rutas funcionan, tengo HTTPS... y, sobre todo, siento que tengo más control.

Todo esto lo aprendí preguntando, fallando, y apoyándome en la IA.

No soy experto, pero estoy más cerca que ayer.

💬 ¿Tú también estás en ese punto de transición?

¿Pasaste ya de serve a NGINX?

¿Te planteas hacerlo?

Cuéntamelo abajo.

Seguro que algo aprendemos juntos. 🚀

 

 

Si quieres conocer otros artículos parecidos a Olvídate de serve - Cómo desplegar React en producción con NGINX (sin ser un experto) - Episodio 35 puedes visitar la categoría Proyecto-IA.