00:00:00Este es Portless, una herramienta de CLI de Vercel Labs, el mismo equipo que creó Agent Browser,
00:00:05JSON Render y Skills, que sustituye los números de puerto de localhost por nombres estables,
00:00:10facilitando que humanos y agentes de IA siempre vayan al lugar correcto y eviten conflictos.
00:00:15Pero, ¿cómo funciona esto realmente por dentro y estropeará mi sistema?
00:00:20Suscríbete y vamos a verlo.
00:00:21Veamos cómo usar Portless con un ejemplo sencillo.
00:00:26Ahora mismo tengo un proyecto ejecutándose en el puerto 3001.
00:00:30Y si tuviera esto funcionando en segundo plano y me olvidara por completo,
00:00:33e intentara ejecutar otro proyecto que use un puerto similar,
00:00:37entonces me daría este error diciendo que la dirección ya está en uso.
00:00:40Y este es exactamente el problema que Portless viene a solucionar.
00:00:44Porque imagina que tuvieras diferentes agentes en distintas pestañas para varios proyectos
00:00:48y se encontraran con este problema.
00:00:50Por supuesto que pueden arreglarlo, pero sería mejor que siempre hubiera un puerto disponible
00:00:55para que se ejecuten, y así esto no sucedería en primer lugar.
00:00:58Ahora, con Portless instalado y el proxy de Portless en ejecución,
00:01:01puedo usar el comando "portless" seguido de mi hostname, que en este caso es xdlapi,
00:01:06pero puede ser lo que tú quieras.
00:01:08Luego el comando que quieres ejecutar, que es "bun run devapi".
00:01:12Al pulsar intro, busca un número de puerto libre al azar en el rango de los 4000.
00:01:16Ya que es un rango con menos probabilidades de ser usado por otros programas.
00:01:20Y expone mi app con mi hostname en .localhost 1355.
00:01:25Por defecto será 1355, que viene de "less" porque es Portless. ¿Lo pillas?
00:01:30Si hago clic aquí, pueden ver que tenemos una aplicación funcionando.
00:01:34Y si fuera a esta otra aplicación e hiciera exactamente lo mismo,
00:01:37ahora ha encontrado un puerto libre diferente y está usando el hostname.
00:01:40Pero este número al final siempre será el mismo.
00:01:42De hecho, si quisiéramos, podríamos cambiarlo.
00:01:44Y si lo cambiáramos al puerto 80, podríamos omitir estos dos puntos y el número.
00:01:49Así que si inicio el proxy de Portless en el puerto 80, recordando usar sudo,
00:01:53y también usando sudo para iniciar el proceso de Portless,
00:01:55entonces podemos simplemente usar el subdominio con .localhost.
00:01:59Incluso podríamos obtener soporte HTTPS además de usar el puerto 80
00:02:03usando el flag --https, lo que nos permitiría usar HTTPS.
00:02:08Pero si usas Vite, tendrás que configurar la variable del puerto en la clave port,
00:02:13así como establecer el host con este valor.
00:02:15Explicaré por qué más adelante en el vídeo.
00:02:17Pero hay muchas otras opciones que obtienes con Portless,
00:02:21como poder ejecutar el proxy en primer plano para depuración
00:02:25o ejecutar un comando sin el proxy, de nuevo para depurar o como salida de emergencia.
00:02:30¿Pero por qué usa un número de puerto aleatorio cada vez?
00:02:33¿Y por qué necesita siquiera un proxy?
00:02:35Vamos a ver cómo funciona.
00:02:36Revisaremos dos procesos.
00:02:39¿Qué ocurre cuando se ejecuta el comando principal de Portless en una terminal?
00:02:42¿Y qué ocurre cuando un navegador visita una URL de Portless?
00:02:46Aquí, cuando ejecutas un comando de Portless, en este caso,
00:02:49portless myapp con el comando bun start,
00:02:52lo que sucede es que primero se extraen el host y el comando.
00:02:56Después, lo siguiente que hace es comprobar si el proxy está funcionando.
00:02:59Y si no lo está, lo iniciará.
00:03:01Pero hay una salvedad, porque puedes configurar el puerto en el que quieres que corra el proxy.
00:03:06Por defecto es el 1355.
00:03:08Pero si lo configuras en un valor inferior a 1024,
00:03:12entonces te pedirá confirmación antes de ejecutarse.
00:03:15Si es superior a ese número, se ejecutará automáticamente.
00:03:19A continuación, busca un puerto libre entre el 4000 y el 4999.
00:03:25Y este puerto es aleatorio para que el proceso de búsqueda sea más rápido.
00:03:29Porque si fuera secuencial, tendría que comprobar todos los puertos uno por uno,
00:03:33lo que podría tardar mucho si tienes muchos procesos ejecutándose.
00:03:35Tras encontrar un puerto, añade los detalles a un archivo JSON de almacenamiento raíz.
00:03:40Luego ejecuta tu comando en ese puerto y añade dicho puerto a la variable de entorno PORT,
00:03:47que es accesible para la mayoría de las aplicaciones JavaScript.
00:03:50Ahora centrémonos en esta parte.
00:03:52Cuando un navegador visita una URL de Portless, en este caso sería myapp.
00:03:56Y si mantenemos el puerto por defecto, sería el 1355.
00:04:00Entonces, hace toda la resolución DNS antes de crear una conexión TCP con el proxy,
00:04:06que simplemente extrae el hostname, o sea, myapp,
00:04:09y lo usa para buscar el puerto de tu aplicación dentro del archivo JSON raíz.
00:04:15Una vez que tiene el número de puerto correcto, reenvía la solicitud a tu app real,
00:04:21que envía una respuesta de vuelta al proxy antes de ir al navegador,
00:04:26ya que el navegador espera una respuesta del 1355
00:04:30y no del número que el proxy asignó aleatoriamente en esa etapa del proceso.
00:04:35Esto también funciona de maravilla con WebSockets.
00:04:38Todo esto es muy impresionante para ser un proyecto de fin de semana.
00:04:40Sin embargo, si usas Portless en un proyecto que no sea Next.js, como Vite, podrías tener problemas.
00:04:47Primero, porque utiliza un número de puerto aleatorio asignado a la variable PORT
00:04:52y no un número fijo, debes asegurarte de que tu app pueda ejecutarse en ese puerto
00:04:56para que el proxy sepa a dónde redirigir el tráfico.
00:05:00Y para Vite o un empaquetador equivalente, puede que tengas que añadir esta clave host y darle este valor,
00:05:06ya que rechaza peticiones de orígenes desconocidos, y esto desactiva esa comprobación.
00:05:10Intenté usar la clave de hosts permitidos con diferentes valores, pero no pareció funcionar.
00:05:16Así que, aunque esta solución parezca extrema,
00:05:19realmente no hay nada de qué preocuparse si estás ejecutando cosas localmente.
00:05:22Pero como la mayoría de los proyectos de Vercel Labs, Portless seguirá recibiendo actualizaciones,
00:05:26lo que significa que la mayoría de estos detalles se pulirán en el futuro,
00:05:30así como cosas como el soporte para Windows.
00:05:32Hablando de Vercel Labs, si aún no has probado Agent Browser,
00:05:36la mejor forma para que tu agente interactúe con un navegador,
00:05:39puedes aprender todo al respecto en el siguiente vídeo.