Webapp-Adressen mit der Domain .localhost vereinfachen

• Erfahrungsbericht darüber, wie sich für Webapps in der Entwicklung der Zugriff über einfache Adressen wie appname.localhost einrichten lässt, ohne sich Ports wie localhost:4333 merken zu müssen
• Mit diesem System wird der Zugriff auf lokale Webapps deutlich intuitiver und aufgeräumter
• Jede App läuft auf einem eigenen Port als launchd-Daemon
• In der Datei /etc/hosts wird appname.localhost auf 127.0.0.1 umgeleitet
  • Beispiel: 127.0.0.1 inclouds.localhost
• Über Caddy wird die Domain an den passenden Port weitergeleitet

Beispiel für eine Caddy-Konfiguration

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

• Für jede .localhost-Domain wird im Caddyfile eine Proxy-Konfiguration auf den entsprechenden Port angelegt
• Enthalten sind auch interne TLS-Zertifikate und Komprimierungsunterstützung

Ideen für künftige Verbesserungen

• Derzeit müssen drei Dateien (/etc/hosts, Caddyfile, launchd plist) manuell bearbeitet werden
• Ziel ist künftig ein Automatisierungstool, das Apps mit einem einzigen Befehl unter einer .localhost-Domain installiert oder entfernt

Update

• Cristóbal schlug einen auf dnsmasq basierenden Befehl vor, der den Prozess weiter vereinfacht
• Die Kernidee ist wie folgt:
  1. *.localhost wird vollständig auf 127.0.0.1 umgeleitet
  2. Es wird ein Server eingerichtet, der auf 127.0.0.1 Reverse Proxying auf bestimmte Ports ausführt

Umleitung mit dnsmasq einrichten

• dnsmasq verwenden, um alle *.localhost-Domains auf 127.0.0.1 zu routen
• Konfiguration nach der Installation:

  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  
  

• Den dnsmasq-Port auf 5353 setzen, um Konflikte mit systemd-resolved zu vermeiden
• Ganz oben in /etc/resolv.conf Folgendes hinzufügen, um dnsmasq als Standard-DNS-Resolver zu setzen:

  nameserver 127.0.0.1  
  

Reverse Proxying mit Caddy und dem localhost-Skript einrichten

• Nun lässt sich mit dem caddy-Server jede Subdomain an einen bestimmten Port anbinden
• Das Caddyfile kann manuell bearbeitet werden, es lässt sich aber auch mit einem Bash-Skript (localhost) automatisieren
• Dieses Bash-Skript (localhost) zum PATH hinzufügen (zum Beispiel in der Datei .zshrc):

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

• Verwendung zum Beispiel so:

  localhost add hello 8000  
  localhost remove hello  
  

Test des tatsächlichen Verhaltens

• Beispiel für das Starten eines lokalen Servers:

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

• Domain-Zuordnung einrichten:

  localhost add hello 1234  
  

• Ruft man nun im Browser hello.localhost auf, wird der Inhalt dieses Servers angezeigt

[dudlf016]

Wenn ich nicht vom Zugriff auf externe Netze ausgeschlossen bin, würde ich eher Wildcard-DNS wie NIP.IO verwenden.

[GN⁺]

Hacker-News-Kommentare

• Browser stellen für .localhost-Domains einen sicheren Kontext bereit

  • Ein selbstsigniertes Zertifikat für HTTPS ist nicht erforderlich
  • Nützlich, wenn Backend-API und Frontend-SPA gleichzeitig laufen
  • Die kürzlich freigegebene .internal-Domain kann verwendet werden

• Das nginx-Konfigurations-Snippet für lokale Entwicklung ist einfach

  • Die Verbindung zum lokalen Entwicklungsserver erfolgt über Unix-Domain-Sockets
  • Die Hostnamenauflösung muss ergänzt werden, aber es ist nicht nötig, Konfigurationsdateien programmatisch zu bearbeiten oder den Proxy neu zu starten

• Chrome und Firefox lösen standardmäßig alle <name>.localhost-Domains zu localhost auf

  • Man kann einen Docker-Proxy einrichten, um alle Anfragen automatisch zu verarbeiten

• Das Projekt Localias ist für lokale Webentwicklung nützlich

  • Es basiert auf Caddy, und CLI sowie Konfigurationsdateiformat sind praktisch
  • Es ermöglicht, .local-Domain-Aliasse auf anderen Geräten im Netzwerk zu verwenden
  • Die Datei /etc/hosts muss nicht manuell bearbeitet werden

• Subdomains von .localhost funktionieren unter Linux, OpenBSD usw. standardmäßig

  • Unter macOS müssen Subdomains explizit in /etc/hosts eingetragen werden

• Wenn man Caddy verwendet, empfiehlt sich eine gekaufte Domain mit DNS-01-Challenge

  • Es ist nicht nötig, selbstsignierte Zertifikate dem Trust Store hinzuzufügen
  • Caddy erneuert Zertifikate automatisch

• Manche verwenden Vanity-Domains im privaten Netzwerk

  • Mit Smallstep CA, CoreDNS und Traefik werden SSL-Zertifikate automatisch ausgestellt
  • Für interne Netzwerkkonfigurationen empfiehlt sich die Zone internal.

• Jeder lokal gehosteten App kann eine eigene IP-Adresse zugewiesen werden

  • Es können IP-Adressen aus dem Bereich 127.0.0/24 verwendet werden
  • Es funktioniert auch unter macOS, möglicherweise müssen sie aber explizit zur Loopback-Schnittstelle hinzugefügt werden

• Auf Linux-Systemen funktioniert es standardmäßig über systemd-resolved

  • Ein Vorteil ist, dass sich CSRF über einen Reverse Proxy blockieren lässt