Simplifier les adresses des applications web avec le domaine .localhost

• Partage d’une configuration permettant d’accéder à une web app en développement via une adresse simple comme appname.localhost, sans avoir à mémoriser un port comme localhost:4333
• Avec ce système, l’accès aux applications web locales devient bien plus intuitif et propre
• Chaque application s’exécute sur un port dédié via un démon launchd
• Dans le fichier /etc/hosts, appname.localhost est redirigé vers 127.0.0.1
  • Exemple : 127.0.0.1 inclouds.localhost
• Caddy sert à proxyfier ce domaine vers le port approprié

Exemple de configuration Caddy

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

• Pour chaque domaine en .localhost, une règle de proxy vers le port correspondant est ajoutée dans le Caddyfile
• La configuration inclut aussi des certificats TLS internes et la prise en charge de la compression

Idées d’amélioration futures

• À l’heure actuelle, il faut encore modifier manuellement trois fichiers (/etc/hosts, Caddyfile et plist launchd)
• L’objectif est à terme de créer un outil d’automatisation pour installer ou supprimer une app sur un domaine .localhost avec une seule commande

Mise à jour

• Cristóbal a proposé une commande basée sur dnsmasq, ce qui simplifie encore le processus
• L’idée centrale est la suivante :
  1. rediriger tous les *.localhost vers 127.0.0.1
  2. configurer un serveur qui effectue un reverse proxy depuis 127.0.0.1 vers un port précis

Configurer la redirection avec dnsmasq

• Utiliser dnsmasq pour router tous les domaines *.localhost vers 127.0.0.1
• Après l’installation, configuration :

  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  
  

• Le port 5353 est utilisé pour dnsmasq afin d’éviter un conflit avec systemd-resolved
• Ajouter la ligne suivante en haut de /etc/resolv.conf pour définir dnsmasq comme résolveur DNS par défaut :

  nameserver 127.0.0.1  
  

Configurer le reverse proxy avec Caddy et un script localhost

• Il est ensuite possible d’utiliser le serveur caddy pour relier chaque sous-domaine à un port spécifique
• On peut modifier le Caddyfile manuellement, mais aussi automatiser cela avec un script bash (localhost)
• Ajouter ce script bash (localhost) au PATH (par exemple dans le fichier .zshrc) :

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

• Utilisation :

  localhost add hello 8000  
  localhost remove hello  
  

Test du fonctionnement réel

• Exemple de lancement d’un serveur local :

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

• Configuration de l’association du domaine :

  localhost add hello 1234  
  

• Il est alors possible d’accéder à hello.localhost dans le navigateur pour afficher le contenu de ce serveur

[dudlf016]

Personnellement, tant qu’il n’y a pas de contrainte empêchant l’accès depuis un réseau externe, j’utiliserais un DNS wildcard comme NIP.IO.

[GN⁺]

Avis sur Hacker News

• Les navigateurs fournissent un contexte sécurisé pour le domaine .localhost

  • Il n’est pas nécessaire d’avoir un certificat auto-signé pour HTTPS
  • C’est utile quand l’API backend et la SPA frontend s’exécutent en même temps
  • On peut utiliser le domaine .internal, récemment approuvé

• L’extrait de configuration nginx pour le développement local est simple

  • Il se connecte au serveur de développement local via des sockets de domaine Unix
  • Il faut ajouter la résolution du nom d’hôte, mais il n’est pas nécessaire de modifier les fichiers de configuration par programmation ni de redémarrer le proxy

• Chrome et Firefox résolvent par défaut tous les domaines <name>.localhost vers localhost

  • Il est possible de configurer un proxy Docker pour traiter automatiquement toutes les requêtes

• Le projet Localias est utile pour le développement web local

  • Il est construit sur Caddy, avec une CLI et un format de fichier de configuration pratiques
  • Il permet d’utiliser des alias de domaine .local depuis d’autres appareils du réseau
  • Il n’est pas nécessaire de modifier manuellement le fichier /etc/hosts

• Les sous-domaines de .localhost fonctionnent par défaut sur Linux, OpenBSD, etc.

  • Sur macOS, il faut ajouter explicitement les sous-domaines dans /etc/hosts

• Si vous utilisez Caddy, il est recommandé d’employer un domaine acheté et le challenge DNS-01

  • Il n’est pas nécessaire d’ajouter un certificat auto-signé au magasin de certificats de confiance
  • Caddy renouvelle automatiquement les certificats

• Certaines personnes utilisent aussi des domaines vanity sur leur réseau personnel

  • Elles utilisent Smallstep CA, CoreDNS et Traefik pour émettre automatiquement des certificats SSL
  • Il est recommandé d’utiliser la zone internal. pour la configuration du réseau interne

• Il est possible d’attribuer une adresse IP distincte à chaque application hébergée localement

  • On peut utiliser des adresses IP dans la plage 127.0.0/24
  • Cela fonctionne aussi sur macOS, mais il peut être nécessaire de les ajouter explicitement à l’interface loopback

• Sur les systèmes Linux, cela fonctionne par défaut via systemd-resolved

  • Cela présente l’avantage de pouvoir bloquer les CSRF avec un proxy inverse