A Vercel Finalmente Matou os Números de Porta (Portless)

BBetter Stack
컴퓨터/소프트웨어AI/미래기술

Transcript

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...

Key Takeaway

O Portless simplifica o desenvolvimento local ao eliminar a gestão manual de portas TCP, substituindo-as por nomes de host amigáveis e um sistema de proxy inteligente que evita conflitos e facilita a automação.

Highlights

O Portless é uma ferramenta de CLI da Vercel Labs que substitui números de portas localhost por nomes de host estáveis.

A ferramenta resolve conflitos de endereços já em uso ao automatizar a busca por portas livres em uma faixa específica.

Utiliza um proxy (padrão na porta 1355) para rotear o tráfego de subdomínios .localhost para as aplicações reais.

Oferece suporte nativo para HTTPS e conexões via WebSockets para ambientes de desenvolvimento modernos.

O uso de portas aleatórias (4000-4999) acelera a inicialização do processo ao evitar verificações sequenciais lentas.

Configurações específicas são necessárias para ferramentas como o Vite para garantir a aceitação de origens de host personalizadas.

O projeto é voltado tanto para desenvolvedores humanos quanto para facilitar a navegação de agentes de IA em microserviços.

Timeline

Introdução ao Portless e o Fim das Portas Manuais

Nesta seção inicial, o palestrante apresenta o Portless como a nova criação da equipe Vercel Labs, focada em substituir o tradicional localhost por nomes estáveis. O principal problema abordado é o erro comum de "endereço já em uso" que ocorre quando múltiplos projetos tentam ocupar a mesma porta simultaneamente. Explica-se que humanos e agentes de IA se beneficiam de URLs consistentes para evitar confusão durante o ciclo de desenvolvimento. A ferramenta visa criar um ambiente onde uma porta esteja sempre disponível sem intervenção manual constante. É ressaltado que essa estabilidade é crucial para fluxos de trabalho automatizados e ferramentas de IA modernas.

Demonstração Prática e Comandos da CLI

O vídeo demonstra a instalação e o uso prático do comando portless seguido de um hostname personalizado e o comando de execução da aplicação. No exemplo, o uso de "bun run devapi" ilustra como a ferramenta encontra automaticamente uma porta livre na faixa de 4000. O Portless expõe a aplicação através de um subdomínio como "xdlapi.localhost:1355", onde o número 1355 é um trocadilho visual com a palavra "less". O apresentador mostra que iniciar múltiplos apps resulta em portas internas diferentes, mas o ponto de acesso externo permanece padronizado. Essa consistência permite que o desenvolvedor mude de projeto sem precisar decorar números de porta variáveis.

Configurações Avançadas: Porta 80 e HTTPS

O conteúdo explora opções avançadas para tornar a experiência de desenvolvimento ainda mais limpa, como o uso da porta 80 para omitir números na URL. Para isso, é necessário utilizar privilégios de administrador (sudo) ao iniciar o proxy e o processo do Portless no sistema. Além disso, a ferramenta oferece suporte a conexões seguras através da flag HTTPS, permitindo testar funcionalidades que exigem criptografia localmente. São mencionadas opções de depuração, como rodar o proxy em primeiro plano ou executar comandos sem a camada de proxy em casos de emergência. Estas funcionalidades mostram a flexibilidade da ferramenta para diferentes cenários de infraestrutura local.

Funcionamento Interno e Arquitetura do Proxy

O apresentador detalha o que ocorre "por baixo do capô" quando um comando é executado e uma URL é acessada no navegador. O Portless extrai o host, verifica o status do proxy e seleciona uma porta aleatória entre 4000 e 4999 para agilizar o processo de busca. As informações de mapeamento são armazenadas em um arquivo JSON de raiz, que o proxy consulta para redirecionar o tráfego TCP corretamente. Quando o navegador faz uma requisição, o proxy identifica o hostname, busca a porta real no JSON e encaminha a resposta de volta ao usuário. Este sistema robusto também garante suporte total a WebSockets, essencial para aplicações em tempo real.

Compatibilidade com Vite e Considerações Finais

Na conclusão, o vídeo aborda desafios de compatibilidade com ferramentas como o Vite, que possuem verificações de segurança de host rigorosas. É explicado que desenvolvedores podem precisar configurar manualmente a chave "host" em seus arquivos de configuração para aceitar os subdomínios do Portless. O palestrante tranquiliza os usuários afirmando que o projeto continuará evoluindo com melhorias constantes e futuro suporte para Windows. O vídeo encerra reforçando que, apesar de ser um projeto recente da Vercel Labs, o Portless já resolve dores latentes no desenvolvimento web moderno. Por fim, há um convite para explorar outras ferramentas de IA da mesma equipe, como o Agent Browser.

Community Posts

View all posts