00:00:00Este é o Portless, uma ferramenta de CLI da Vercel Labs, a mesma equipe que criou o Agent Browser,
00:00:05JSON Render e Skills, que substitui números de portas localhost por nomes estáveis,
00:00:10facilitando para que humanos e agentes de IA sempre saibam onde ir e evitem conflitos.
00:00:15Mas como isso realmente funciona por baixo do capô e será que vai bagunçar meu sistema?
00:00:20Inscreva-se no canal e vamos descobrir.
00:00:21Vamos ver como usar o Portless com um exemplo simples.
00:00:26No momento, tenho um projeto rodando na porta 3001.
00:00:30E se eu tivesse isso rodando em segundo plano e esquecesse completamente,
00:00:33e tentasse rodar um projeto diferente que usasse a mesma porta,
00:00:37eu receberia este erro dizendo que o endereço já está em uso.
00:00:40E este é exatamente o problema que o Portless foi projetado para resolver.
00:00:44Pois imagine se você tivesse diferentes agentes rodando em abas diferentes para projetos distintos
00:00:48e eles encontrassem esse problema.
00:00:50Eles até poderiam consertar, mas seria melhor se uma porta estivesse sempre disponível
00:00:55para eles rodarem, evitando que isso acontecesse logo de cara.
00:00:58Agora, com o Portless instalado e o proxy do Portless rodando,
00:01:01posso executar o comando portless seguido do meu hostname, que neste caso é xdlapi,
00:01:06mas pode ser o que você quiser.
00:01:08Depois, o comando que você quer rodar, que é bun run devapi.
00:01:12Ao dar enter, ele encontra um número de porta livre aleatório na faixa de 4000.
00:01:16Já que é uma faixa com menos probabilidade de ser usada por outros programas.
00:01:20E ele expõe meu app com meu hostname em .localhost 1355.
00:01:25Por padrão será 1355, que remete a “less” porque é Portless. Entendeu?
00:01:30Agora, se eu clicar aqui, você pode ver que temos um app funcionando.
00:01:34E se eu fosse para este outro app e fizesse exatamente a mesma coisa,
00:01:37agora ele encontrou uma porta livre diferente e está usando o hostname.
00:01:40Mas este número no final sempre permanecerá o mesmo.
00:01:42Na verdade, se quiséssemos, poderíamos alterá-lo.
00:01:44E se mudássemos para a porta 80, poderíamos omitir esses dois pontos e o número.
00:01:49Então, se eu iniciar o proxy do Portless na porta 80, lembrando de usar sudo,
00:01:53e também usar sudo para iniciar o processo do Portless,
00:01:55então podemos apenas usar o subdomínio com .localhost.
00:01:59Inclusive, poderíamos até ter suporte a HTTPS além de usar a porta 80
00:02:03usando a flag HTTPS, o que nos permitiria usar conexões seguras.
00:02:08Mas se você usar Vite, terá que configurar a variável da porta na chave port,
00:02:13além de definir os hosts para este valor.
00:02:15Explicarei o porquê mais adiante no vídeo.
00:02:17Mas há várias outras opções que você ganha com o Portless,
00:02:21como poder rodar o proxy em primeiro plano para depuração
00:02:25ou rodar um comando sem o proxy, novamente para depuração ou como alternativa de emergência.
00:02:30Mas por que ele usa um número de porta aleatório a cada vez?
00:02:33E por que ele precisa de um proxy? Vamos ver como funciona.
00:02:35Analisaremos dois processos.
00:02:36O que acontece quando o comando principal do Portless é executado no terminal?
00:02:39E o que acontece quando um navegador acessa uma URL do Portless?
00:02:42Aqui, quando você roda um comando Portless, neste caso,
00:02:46Portless meu-app com o comando bun start,
00:02:49o que acontece é que o host e o comando são extraídos primeiro.
00:02:52Em seguida, ele verifica se o proxy está rodando.
00:02:56E se não estiver, ele o iniciará.
00:02:59Mas há uma ressalva, pois você pode definir a porta em que deseja rodar o proxy.
00:03:01Por padrão, é 1355.
00:03:06Mas se você definir um valor abaixo de 1024,
00:03:08ele pedirá sua confirmação antes de executar.
00:03:12Mas se for acima desse número, ele rodará automaticamente.
00:03:15Depois, ele encontra uma porta livre entre 4000 e 4999.
00:03:19Essa porta é aleatória para tornar o processo de busca mais rápido.
00:03:25Porque se fosse sequencial, ele teria que verificar todas as portas uma a uma,
00:03:29o que poderia demorar muito se você tiver muitos processos rodando.
00:03:33Após encontrar uma porta, ele adiciona os detalhes a um arquivo JSON de armazenamento raiz.
00:03:35Então, ele roda seu comando naquela porta e a adiciona à variável de ambiente PORT,
00:03:40que é acessível para a maioria das aplicações JavaScript.
00:03:47Agora, vamos focar nesta parte.
00:03:50Quando um navegador visita uma URL do Portless, neste caso, seria meu-app.
00:03:52E se mantivermos a porta padrão, será 1355.
00:03:56Então, ocorre toda a resolução de DNS antes de criar uma conexão TCP com o proxy,
00:04:00que apenas extrai o nome do host, no caso meu-app,
00:04:06e o utiliza para buscar a porta da sua aplicação no arquivo JSON raiz.
00:04:09Assim que tem o número da porta correto, ele encaminha a requisição para o seu app real,
00:04:15que envia uma resposta de volta ao proxy antes de ir para o navegador,
00:04:21já que o navegador espera uma resposta da porta 1355
00:04:26e não do número que o proxy atribuiu aleatoriamente nesta etapa do processo.
00:04:30Isso também funciona perfeitamente com WebSockets.
00:04:35Tudo isso é muito impressionante para um projeto de fim de semana.
00:04:38No entanto, se você usar o Portless em um projeto que não seja Next.js, como o Vite, pode ter problemas.
00:04:40Primeiro, porque ele usa uma porta aleatória atribuída à variável PORT
00:04:47em vez de um número fixo, você deve garantir que seu app rode nessa porta
00:04:52para que o proxy saiba para onde redirecionar o tráfego.
00:04:56E para o Vite ou equivalente, você pode precisar adicionar a chave host e defini-la com este valor,
00:05:00pois ele rejeita requisições de origens desconhecidas, e isso desativa essa verificação.
00:05:06Tentei usar a chave de hosts permitidos com valores diferentes, mas não pareceu funcionar.
00:05:10Então, embora essa solução pareça extrema,
00:05:16não há com o que se preocupar se você estiver rodando as coisas localmente.
00:05:19Mas, como a maioria dos projetos da Vercel Labs, o Portless continuará recebendo atualizações,
00:05:22o que significa que esses detalhes serão polidos no futuro,
00:05:26assim como o suporte para Windows.
00:05:30Falando em Vercel Labs, se você ainda não experimentou o Agent Browser,
00:05:32a melhor maneira de seu agente interagir com um navegador,
00:05:36você pode aprender tudo sobre ele no próximo vídeo.
00:05:39...