React dice localhost, pero yo digo producción - La odisea del puerto 3001 - Episodio 41

Todo parecía ir bien.

Tenía React funcionando. npm start lanzaba la app sin errores.

Además, veía el frontend en el navegador del VPS y pensaba:

"ya está, puedo seguir montando cosas".

Hasta que intenté acceder desde fuera.

Mi portátil, en otra red.

Página en blanco.

Tiempo de espera agotado.

Nada.

¡Pero si estaba funcionando!

¿Por qué no se veía desde fuera?

Bienvenido al infierno silencioso de los puertos, firewalls y el falso confort de localhost.

🧱 CRA, puertos y un poco de trampa mental

Cuando usas Create React App (CRA) y haces npm start, la aplicación se lanza en http://localhost:3000 o...

En mi caso, http://localhost:3001.

Y ahí está el truco: localhost no significa lo mismo dentro que fuera del VPS.

Desde el navegador del servidor, sí, se ve perfecto.

Pero si intentas acceder desde fuera usando la IP del VPS (http://MI_IP:3001), no pasa nada.

Como si el puerto no existiera.

Y eso te vuelve loco.

En realidad, sí existe.

Pero nadie lo está "escuchando" de cara al mundo exterior.

📌 Paso 1: Lanzar CRA con host 0.0.0.0

Por defecto, CRA se ejecuta escuchando solo en localhost, que es igual a 127.0.0.1, es decir: solo accesible desde dentro del servidor.

Para que acepte conexiones externas necesitas lanzar así:

HOST=0.0.0.0 PORT=3001 npm start

Esto le dice a CRA que escuche todas las IPs disponibles, no solo la local.

 

¿Funcionó?

No.

Aún no.

(Estrés, desesperación, llanto!)

🔥 Paso 2: El firewall… ese gran bloqueador de sueños

En mi caso, uso AlmaLinux 8 con firewalld, y además tengo Plesk como panel de control.

Primero verifiqué que el puerto 3001 no estaba abierto:

sudo firewall-cmd --list-ports

Nada.

Ni rastro del 3001.

Así que lo abrí:

sudo firewall-cmd --permanent --add-port=3001/tcp
sudo firewall-cmd --reload

¡Ahora sí!

En teoría, todo estaba preparado.

CRA escuchando en todas las IPs, puerto abierto en el firewall. ¿

Funcionó?

Por fin, sí.

Desde mi portátil, accedí con la IP pública:

http://MI_IP:3001

Y apareció la app React.

🤯 Los errores que me marearon (y cómo los resolví)

1. CRA lanzado pero inaccesible

El típico caso de

"¡pero en el navegador del servidor sí se ve!".

Claro, porque localhost no equivale a externo.

Es como hablar contigo mismo y pensar que los demás te oyen.

Solución: HOST=0.0.0.0

2. El firewall bloqueando

Incluso con CRA bien lanzado, si el puerto está bloqueado, es como tener una puerta cerrada con llave.

Solución: firewall-cmd + abrir puerto 3001 + reload.

3. Puerto ocupado o en uso

A veces, ya hay algo corriendo en ese puerto y ni lo sabes.

Me pasó con un proceso zombie de vite que se había quedado abierto.

lsof -i :3001

Y si hay algo, lo matas:

kill -9 [PID]

4. CRA usando scripts rotos

Había tocado el package.json y algún script estaba mal definido.

El clásico:

"start": "react-scripts start"

Pero si el react-scripts no estaba instalado correctamente, fallaba.

Solución: Reinstalar dependencias:

npm install

💡 Lecciones aprendidas

🔸 localhost ≠ IP pública

Es el primer mito que hay que romper. Si no lanzas tu app con 0.0.0.0, nadie te verá.

🔸 El firewall no es tu enemigo, pero exige respeto

Me costó una tarde entera entender por qué el puerto abierto no funcionaba.

Spoiler: no estaba abierto realmente.

🔸 Los procesos fantasma existen

Si algo parece estar fallando, asegúrate de que el puerto no está ocupado por otra instancia vieja.

🔸 CRA está bien para empezar, pero en producción tiene límites

Después de esto, me planteé seriamente migrar a Vite + NGINX. Pero eso será otra historia...

🧠 Cierre del día

Hoy aprendí que una app en React puede estar viva… y aún así ser invisible para el mundo.

Que el puerto 3001 puede parecer abierto y no estarlo.

Y que, como en la vida, no basta con que algo funcione para ti.

Tiene que funcionar también para los demás.

Y sí, abrí el navegador, vi mi frontend desde el exterior y solté un "¡vamos!" en voz alta.

💬 ¿Te ha pasado algo parecido?

¿Tu app se veía en local pero no desde fuera?

Cuéntamelo.

No estás solo.

Este tipo de errores son parte del viaje.

Si quieres conocer otros artículos parecidos a React dice localhost, pero yo digo producción - La odisea del puerto 3001 - Episodio 41 puedes visitar la categoría Proyecto-IA.