Simplificar la dirección de una web app con el dominio .localhost

• Comparte la experiencia de configurar una web app en desarrollo para poder acceder con una dirección simple como appname.localhost, sin tener que recordar puertos como localhost:4333
• Al usar este sistema, el acceso a web apps locales se vuelve mucho más intuitivo y limpio
• Cada app se ejecuta en un puerto único como un daemon de launchd
• En el archivo /etc/hosts, appname.localhost se redirige a 127.0.0.1
  • Ejemplo: 127.0.0.1 inclouds.localhost
• Mediante Caddy, ese dominio se proxifica hacia el puerto adecuado

Ejemplo de configuración de Caddy

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

• Para cada dominio .localhost, se escribe en el Caddyfile la configuración de proxy hacia su puerto correspondiente
• También incluye certificados TLS internos y soporte de compresión

Ideas para mejorar a futuro

• Actualmente hay que editar manualmente tres archivos (/etc/hosts, Caddyfile y plist de launchd)
• A futuro, el objetivo es crear una herramienta de automatización para instalar o eliminar apps en dominios .localhost con un solo comando

Actualización

• Cristóbal sugirió un comando basado en dnsmasq, haciendo este proceso más sencillo
• La idea central es la siguiente:
  1. Redirigir todos los *.localhost a 127.0.0.1
  2. Configurar un servidor que haga reverse proxy desde 127.0.0.1 hacia un puerto específico

Configurar la redirección con dnsmasq

• Se usa dnsmasq para enrutar todos los dominios *.localhost a 127.0.0.1
• Configuración después de instalarlo:

  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  
  

• El puerto de dnsmasq se configura como 5353 para evitar conflictos con systemd-resolved
• Agrega lo siguiente al inicio de /etc/resolv.conf para establecer dnsmasq como resolvedor DNS predeterminado:

  nameserver 127.0.0.1  
  

Configurar reverse proxy con Caddy y el script localhost

• Ahora se puede usar el servidor caddy para conectar cada subdominio con un puerto específico
• También se puede editar manualmente el Caddyfile, pero es posible automatizarlo creando un script bash (localhost)
• Agrega este script bash (localhost) al PATH (por ejemplo, en el archivo .zshrc):

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

• Se puede usar así:

  localhost add hello 8000  
  localhost remove hello  
  

Probar cómo funciona en la práctica

• Ejemplo de ejecución de un servidor local:

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

• Configurar la conexión del dominio:

  localhost add hello 1234  
  

• Ahora, si accedes a hello.localhost en el navegador, se mostrará el contenido de ese servidor

[dudlf016]

Yo usaría un DNS wildcard como NIP.IO a menos que no se pueda acceder desde una red externa.

[GN⁺]

Opiniones de Hacker News

• Los navegadores ofrecen un contexto seguro para el dominio .localhost

  • No se necesita un certificado autofirmado para HTTPS
  • Es útil cuando el backend API y el frontend SPA se ejecutan al mismo tiempo
  • Se puede usar el dominio .internal, aprobado recientemente

• El fragmento de configuración de nginx para desarrollo local es sencillo

  • Se conecta al servidor de desarrollo local mediante sockets de dominio Unix
  • Hay que agregar la resolución de nombres de host, pero no hace falta editar archivos de configuración de forma programática ni reiniciar el proxy

• Chrome y Firefox resuelven por defecto todos los dominios <name>.localhost como localhost

  • Se puede configurar un proxy de Docker para manejar automáticamente todas las solicitudes

• El proyecto Localias es útil para el desarrollo web local

  • Está construido sobre Caddy, y su CLI y formato de archivo de configuración son prácticos
  • Permite usar alias de dominio .local desde otros dispositivos de la red
  • No hace falta editar manualmente el archivo /etc/hosts

• Los subdominios de .localhost funcionan por defecto en Linux, OpenBSD y otros sistemas

  • En macOS, hay que agregar explícitamente los subdominios en /etc/hosts

• Si usas Caddy, se recomienda usar un dominio comprado y el desafío DNS-01

  • No hace falta agregar certificados autofirmados al almacén de confianza
  • Caddy renueva automáticamente los certificados

• Algunas personas también usan dominios vanity en redes personales

  • Usan Smallstep CA, CoreDNS y Traefik para emitir certificados SSL automáticamente
  • Se recomienda usar la zona internal. para la configuración de la red interna

• Se puede asignar una dirección IP separada a cada aplicación alojada localmente

  • Se pueden usar direcciones IP del rango 127.0.0/24
  • También funciona en macOS, aunque puede requerir agregarlas explícitamente a la interfaz loopback

• En sistemas Linux, funciona por defecto mediante systemd-resolved

  • Tiene la ventaja de que CSRF se puede bloquear con un proxy inverso