Simplificando endereços de web apps com o domínio .localhost

• Compartilhamento de uma experiência de configuração para acessar web apps em desenvolvimento com endereços simples como appname.localhost, sem precisar memorizar portas como localhost:4333
• Ao usar esse sistema, o acesso a web apps locais fica muito mais intuitivo e organizado
• Cada app é executado em uma porta exclusiva como um daemon do launchd
• No arquivo /etc/hosts, appname.localhost é redirecionado para 127.0.0.1
  • Exemplo: 127.0.0.1 inclouds.localhost
• O Caddy faz o proxy desse domínio para a porta apropriada

Exemplo de configuração do Caddy

  inclouds.localhost {  
    reverse_proxy localhost:5050  
    tls internal  
    encode gzip zstd  
  }  

• Para cada domínio .localhost, escreve-se no Caddyfile a configuração de proxy para a porta correspondente
• Também inclui certificado TLS interno e suporte a compressão

Ideias de melhorias futuras

• Atualmente, ainda é preciso editar manualmente três arquivos (/etc/hosts, Caddyfile e plist do launchd)
• O objetivo no futuro é criar uma ferramenta de automação que instale/remova apps em domínios .localhost com um único comando

Atualização

• Cristóbal sugeriu um comando baseado em dnsmasq, tornando esse processo mais simples
• A ideia principal é a seguinte:
  1. Redirecionar todos os *.localhost para 127.0.0.1
  2. Configurar um servidor em 127.0.0.1 para fazer reverse proxy para portas específicas

Configurando o redirecionamento com dnsmasq

• Uso do dnsmasq para rotear todos os domínios *.localhost para 127.0.0.1
• Configuração após a instalação:

  echo 'port=5353' | sudo tee -a /etc/dnsmasq.conf  
  echo 'address=/localhost/127.0.0.1' | sudo tee -a /etc/dnsmasq.conf  
  sudo systemctl restart dnsmasq  
  

• A porta do dnsmasq é configurada como 5353 para evitar conflito com o systemd-resolved
• Adicione o seguinte no topo de /etc/resolv.conf para definir o dnsmasq como resolvedor DNS padrão:

  nameserver 127.0.0.1  
  

Configurando reverse proxy com Caddy e o script localhost

• Agora é possível usar o servidor caddy para conectar cada subdomínio a uma porta específica
• Também é possível editar o Caddyfile manualmente, mas dá para automatizar criando um script bash (localhost)
• Adicione esse script bash (localhost) ao PATH (por exemplo, no arquivo .zshrc):

  export PATH="$PATH:$HOME/dev/localhost"  
  

• O uso fica assim:

  localhost add hello 8000  
  localhost remove hello  
  

Teste de funcionamento real

• Exemplo de execução de um servidor local:

  echo 'hello.localhost!' > index.html  
  python3 -m http.server 1234  
  

• Configuração da conexão do domínio:

  localhost add hello 1234  
  

• Agora, ao acessar hello.localhost no navegador, o conteúdo desse servidor será exibido

[dudlf016]

A menos que não seja possível acessar a rede externa, eu usaria um Wildcard DNS como o NIP.IO.

[GN⁺]

Comentários do Hacker News

• Os navegadores fornecem um contexto seguro para o domínio .localhost

  • Não é necessário um certificado autoassinado para HTTPS
  • Útil quando a API de backend e o SPA de frontend estão rodando ao mesmo tempo
  • É possível usar o domínio .internal, aprovado recentemente

• O snippet de configuração do nginx para desenvolvimento local é simples

  • Ele se conecta ao servidor de desenvolvimento local por meio de um socket de domínio Unix
  • É preciso adicionar a resolução de nome de host, mas não é necessário editar arquivos de configuração programaticamente nem reiniciar o proxy

• Chrome e Firefox resolvem por padrão todo domínio <name>.localhost para localhost

  • É possível configurar um proxy do Docker para lidar automaticamente com todas as requisições

• O projeto Localias é útil para desenvolvimento web local

  • É construído com base no Caddy, e a CLI e o formato do arquivo de configuração são convenientes
  • Permite usar aliases de domínio .local em outros dispositivos da rede
  • Não é necessário editar manualmente o arquivo /etc/hosts

• Os subdomínios de .localhost funcionam por padrão em Linux, OpenBSD etc.

  • No macOS, é preciso adicionar explicitamente os subdomínios em /etc/hosts

• Se você usa Caddy, é melhor usar um domínio comprado e o desafio DNS-01

  • Não é necessário adicionar certificados autoassinados ao armazenamento de confiança
  • O Caddy renova os certificados automaticamente

• Algumas pessoas também usam domínios vanity em redes pessoais

  • Recebem certificados SSL automaticamente usando Smallstep CA, CoreDNS e Traefik
  • Recomenda-se usar a zona internal. na configuração da rede interna

• É possível atribuir um endereço IP separado para cada app hospedado localmente

  • Podem ser usados endereços IP no intervalo 127.0.0/24
  • Também funciona no macOS, mas pode ser necessário adicioná-los explicitamente à interface de loopback

• Em sistemas Linux, isso funciona por padrão por meio do systemd-resolved

  • Há a vantagem de poder bloquear CSRF com um proxy reverso