Tutorial 7: Visualize seu servidor de desenvolvimento em seu telefone

O agente construiu uma UI da web. Use a mesma tailnet do ccmux para abri-lo em seu telefone, sem implantá-lo.

Compartilhar com Tailscale Serve

Conecte ambos os dispositivos à sua tailnet. Inicie o servidor de desenvolvimento em um painel tmux e observe a porta que ele imprime. Este exemplo do Vite usa a porta 5173; Astro normalmente usa 4321.

npm run dev

Em um segundo painel, compartilhe essa porta:

tailscale serve 5173

Siga qualquer prompt de configuração do HTTPS e abra o URL HTTPS impresso em seu telefone. Sirva proxies para o servidor local sem exigir que ele escute em todas as interfaces de rede. O acesso segue sua política de tailnet.

Mantenha este painel em execução. Pressione Ctrl-C no painel Servir quando desejar interromper o compartilhamento. Isso interrompe a sessão do Serve em primeiro plano sem redefinir a configuração do Serve não relacionada.

Veja o documentação do Tailscale Serve para requisitos e comandos de configuração atuais.

Se a estrutura rejeitar o nome do host

Alguns servidores de desenvolvimento validam o cabeçalho Host. Adicione apenas o nome de host exato impresso por Tailscale à lista de hosts permitidos da sua estrutura. Para Vite, consulte servidor.allowedHosts. Evite desabilitar verificações de host globalmente.

Se o recarregamento ao vivo falhar por trás do proxy, atualize a página manualmente ou configure a origem do WebSocket da sua estrutura. Você também pode vincular diretamente ao IP Tailscale da máquina. Para Vite:

npm run dev -- --host "$(tailscale ip -4)"

Abra o IP Tailscale impresso e a porta em seu telefone através de HTTP. Isso é realizado dentro do túnel criptografado do Tailscale, mas os recursos do navegador que exigem uma origem HTTPS podem não estar disponíveis. Use Servir quando precisar de HTTPS.

Vinculação a 0.0.0.0 também exporia o servidor em outras interfaces, incluindo sua rede local. A ligação ao IP Tailscale mantém este exemplo com escopo para essa interface. Sua política de acesso à tailnet e firewall do host ainda se aplicam.

O ciclo de feedback do telefone

1. Mantenha o agente em um painel, o servidor de desenvolvimento em outro e o Servir em um terceiro.
2. Abra o URL HTTPS em seu telefone e atualize após cada alteração.
3. Desconecte do tmux com Ctrl-bd quando você se afasta.

O link funciona enquanto o host está ativo, conectado ao Tailscale e executando ambos os processos. Desconectar tmux preserva os processos; não garante que uma máquina de dormir permaneça acessível.

Detectou um erro ou algo desatualizado? Edite esta página em GitHub.