環境はWindows11 + WSL2 + Vite(HonoX)です。
開発環境などのアクセスの詳細
localhostでのアクセス
localhostはHost自身を表す特別なアドレス。デフォルトは127.0.0.1になっている。
Viteで作成したプロジェクトの開発環境を立ち上げる時はpnpm run devとかする。
開発時には、開発しているHost(PC)でWebサーバーを立ち上げて、それにHost自身のブラウザからアクセスする。
自分のHost自身にアクセスしたい → localhost(127.0.0.1)にアクセスすればよい。
サーバーを立てる場合に、ViteはデフォルトでlocalhostをbindしてListenしている。（localhostからのアクセスを受け付けるようにサーバー設定して起動する。）
別のHostからアクセス
例えば同一ネットワーク内のiPhoneなりiPadなりにアクセスする場合は別の端末からWebサーバーを立てたHostのIPアドレスに対してアクセスをする必要がある。
ただ、サーバーを立てる場合、ViteはデフォルトでlocalhostをbindしてListenしていて、自身のIPアドレス（198.168.0.1）はbindしておらずListenしていないため、アクセス不可である。（bindとはサーバーが起動したときに）
（補足） 0.0.0.0にアクセスする
0.0.0.0は住所不定のIPアドレス。0.0.0.0へブラウザがアクセスを試行すると、OSによってはカーネルがlocalhostにルーティングして、迷子にならずに自分自身へアクセスできることがある。
問題発生？
Host自身はlocalhostでアクセスできる。が、自身のIPアドレスでbindしておらずListenしていないため同一ネットワークの別のHost（iPhone・iPadとか）からのアクセスはできない。（自身のIPアドレス（198.168.0.1）はbindしておらずListenしていないため。）
iPadからデバッグしたい時にかなり不便。
iPad（別のHost）からアクセスできるようにする
Webサーバーの設定とOSの二つで通信を許可する必要がある。
① 0.0.0.0にbindする（サーバーの設定）
0.0.0.0はワイルドカード的なもので、0.0.0.0をバインドすると、システム上のすべてのネットワークインターフェースに対してListen状態になる。すなわちHost自身のIPアドレス（198.168.0.1）もループバックアドレス（localhost = 127.0.0.1）からもWifiのIPアドレスからもアクセスできることになる。
セキュリティ上の問題があるようなので、開発環境に限るらしいが…
Viteで設定する
vite.config.tsのserver.hostをtrueにすると開発サーバーを立ち上げる際に0.0.0.0をバインドしてくれる。該当箇所は以下の通り。
export default defineConfig(({ mode }) => {
server: {
host: true,
port: 5174,
}
}（付録）WSLでサーバーを立てている人
WSL を使用したネットワーク アプリケーションへのアクセス | Microsoft Learn
WSLを使用してる人は外部からのアクセスをWindowsPCのHostからWSLにポートフォワーディングする必要があるので注意。listenしたものをWSL側にConnectする。
すなわちWindowsHostがListenするIPとポート + WindowsHostと接続するWSL側のIPとポートを設定する。
詳細はMicrosoftを参照してほしいが、端的に以下のコマンドを実行した。
WindowsHostのIPとポート
listenport：WindowsがListenしたいポート（ブラウザがアクセスするときに指定するポート）
listenaddress：WindowsがListenしたいIPアドレス。iPadからアクセスしたいならiPadのアドレス。
WSLのIPとポート
connectport：WSL側につなぎたいポート（WSLで起動しているWebサーバーのポート）（今回は5147で起動している）
connectaddress：WSLのIPアドレス
netsh interface portproxy add v4tov4 listenport=5174 listenaddress=0.0.0.0 connectport=5174 connectaddress=[wslのIPアドレス]② Windowsのファイアーウォールの設定（OSの設定）
①で設定したサーバーへのアクセスをOS側で許可しないとOSに弾かれてしまう。
ということで、ファイアーウォールの設定で通信を許可する。
設定項目
- 規則の種類：ポート
- プロトコル：TCP
- ポート：WindowsHostのポート（自分の場合は
5127）を指定 - 通信形態：保護されていない通信も許可
- プロファイル：プライベートネットワークに限定
- 規則の名前：WSL接続用設定？わかりやすい名前を付ける
③ 接続してみる
iPadから接続してみる。接続はWindowsのIPアドレスとポートにアクセスすればいい。（自分の環境ではhttp://192.168.1.161:5147だった。PowerShellでipconfigで調べればわかる。）
結果以下のようにWebサーバーとOSのファイアーウォールの設定をして同一ネットワークからのアクセスを有効にした。
まとめ
いやー、0.0.0.0やlocalhostに始まり、長い道のりだった。bindとかport周りの知識は若干怪しいけど、開発環境を整えられたからよし。
