やりたいこと
WSL上で行っている Expo でのアプリ開発サーバーとかそういうときに、LANの端末からWSLで建てたサーバーに接続したい。
方法
1. PowerShell から Windows の IP を確認する
ipconfig
を実行して IPv4アドレスのところをメモする
PS C:\Users\user> ipconfig
# 不要な箇所は省略
Windows IP 構成
Wireless LAN adapter Wi-Fi:
IPv4 アドレス . . . . . . . . . . . .: 192.168.11.31
2. WSL から WSL の IP を確認する
inet の後のが IP(v4)アドレス
❯ ip a show dev eth0
# 不要な箇所は省略
2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc mq state UP group default qlen 1000
link/ether 24:b2:b9:7c:8f:4b brd ff:ff:ff:ff:ff:ff
inet 192.168.11.31/24 brd 192.168.11.255 scope global noprefixroute eth0
valid_lft forever preferred_lft forever
3. ポートフォワーディングの設定
管理者権限で Powershell を開き、以下のコマンドで設定
netsh interface portproxy add v4tov4 listenport=<ポート番号> listenaddress=0.0.0.0 connectport=<ポート番号> connectaddress=<WSL2のIPアドレス>
Expo は開発サーバーのポート番号が8081なので、
netsh interface portproxy add v4tov4 listenport=8081 listenaddress=0.0.0.0 connectport=8081 connectaddress=192.168.11.31
Powershell で反映されているか確認
netsh interface portproxy show v4tov4
にて確認する
PS C:\Users\user> netsh interface portproxy show v4tov4
ipv4 をリッスンする: ipv4 に接続する:
Address Port Address Port
--------------- ---------- --------------- ----------
0.0.0.0 8081 192.168.11.31 8081
4. Windowsファイアウォールの設定
Windows + R キーで、ファイル名を指定して実行から wf.msc
を入力し OK
- “受信の規則” から左側にある “新しい規則…”
- 規則の種類: ポートを選択
- TCP/UDP どちらかを選択し、特定のローカルポートに使用する番号を入力
- 接続を許可するを選択(つなぎ方に応じて選んでください。Wi-Fi設定などに対応させるはず)
- 規則の名前を入力して完成
iPhone のデバッグビルドから WSL上の Expo 開発サーバーにつなげたとさ!