.localhostドメインでWebアプリのアドレスを簡潔にする

 (inclouds.space)
17 ポイント 投稿者 GN⁺ 2025-04-12 | 2件のコメント | WhatsAppで共有
  • 開発中のWebアプリについて、localhost:4333 のようなポート番号を覚えなくても、appname.localhost のようなシンプルなアドレスでアクセスできるように設定した体験の共有
  • この仕組みを使うと、ローカルWebアプリへのアクセスがはるかに直感的で整ったものになる
  • 各アプリは固有のポートで launchd デーモンとして実行される
  • /etc/hosts ファイルで appname.localhost を 127.0.0.1 にリダイレクトする
    • 例: 127.0.0.1 inclouds.localhost
  • Caddy を通して、そのドメインを適切なポートへプロキシする

Caddy設定例

  inclouds.localhost {  
    reverse_proxy localhost:5050  
    tls internal  
    encode gzip zstd  
  }
  • .localhost ドメインごとに、Caddyfile に対応するポートへのプロキシ設定を記述する
  • 内部TLS証明書と圧縮サポートも含まれる

今後の改善アイデア

  • 現在は3つのファイル（/etc/hosts、Caddyfile、launchd plist）を手動で編集する必要がある
  • 将来的には、単一のコマンドでアプリを .localhost ドメインにインストール／削除できる自動化ツールを作るのが目標

更新

  • Cristóbal が dnsmasq ベースのコマンドを提案し、この作業をさらに簡単にした
  • 核となるアイデアは次のとおり:
    1. *.localhost をすべて 127.0.0.1 にリダイレクトする
    2. 127.0.0.1 で特定のポートへのリバースプロキシを行うサーバーを設定する

dnsmasqでリダイレクトを設定する

  • すべての *.localhost ドメインを 127.0.0.1 にルーティングするために dnsmasq を使用
  • インストール後の設定: 
    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
  • dnsmasq のポートを 5353 に設定し、systemd-resolved との衝突を回避する
  • /etc/resolv.conf の先頭に次を追加して、既定のDNSリゾルバを dnsmasq に設定する: 
    nameserver 127.0.0.1

Caddyとlocalhostスクリプトでリバースプロキシを設定する

  • これで caddy サーバーを使って、各サブドメインを特定のポートへ接続できる
  • Caddyfile を手動で編集することもできるが、bashスクリプト（localhost）を作って自動化することもできる
  • このbashスクリプト（localhost）を PATH に追加する（例として .zshrc に追加）: 
    export PATH="$PATH:$HOME/dev/localhost"
  • 次のように使える: 
    localhost add hello 8000  
localhost remove hello

実際の動作テスト

  • ローカルサーバー実行例: 
    echo 'hello.localhost!' > index.html  
python3 -m http.server 1234
  • ドメイン接続の設定: 
    localhost add hello 1234
  • これでブラウザで hello.localhost にアクセスすると、上記サーバーの内容が表示される

関連記事

2件のコメント

 
dudlf016 2025-04-12

外部ネットワークにアクセスできないのでなければ、NIP.IO のようなワイルドカードDNSを使います。
 
GN⁺ 2025-04-12
Hacker Newsの意見

  • ブラウザは .localhost ドメインに対してセキュアコンテキストを提供する

    • HTTPS 用の自己署名証明書が不要
    • バックエンド API とフロントエンド SPA を同時に動かすときに便利
    • 最近承認された .internal ドメインも使える

  • nginx のローカル開発設定スニペットはシンプル

    • Unix ドメインソケット経由でローカル開発サーバーに接続する
    • ホスト名解決の追加は必要だが、設定ファイルをプログラムで編集したり、プロキシを再起動したりする必要はない

  • Chrome と Firefox はデフォルトであらゆる <name>.localhost ドメインを localhost として解決する

    • Docker プロキシを設定すれば、すべてのリクエストを自動処理できる

  • Localias プロジェクトはローカル Web 開発に役立つ

    • Caddy ベースで構築されており、CLI と設定ファイル形式が使いやすい
    • .local ドメインのエイリアスをネットワーク上のほかのデバイスでも使えるようにする
    • /etc/hosts ファイルを手動で編集する必要がない

  • .localhost のサブドメインは Linux、OpenBSD などではデフォルトで動作する

    • macOS では /etc/hosts にサブドメインを明示的に追加する必要がある

  • Caddy を使う場合は、購入したドメインと DNS-01 チャレンジを使うのがよい

    • 自己署名証明書を信頼ストアに追加する必要がない
    • Caddy が証明書を自動更新する

  • 個人ネットワークで Vanity ドメインを使っている人もいる

    • Smallstep CA、CoreDNS、Traefik を使って SSL 証明書を自動発行する
    • 内部ネットワーク設定には internal. zone を使うのがよい

  • 各ローカルホスティングアプリに個別の IP アドレスを割り当てることもできる

    • 127.0.0/24 範囲の IP アドレスを使用できる
    • macOS でも動作するが、ループバックインターフェースに明示的に追加する必要がある場合がある

  • Linux システムでは systemd-resolved によってデフォルトで動作する

    • CSRF をリバースプロキシでブロックできる利点がある