Site cover image

blog by izumiz

blog by izumiz

WSL上のローカルサーバーにLANの端末からつなげるには

やりたいこと

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=<WSL2IPアドレス>

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

  1. “受信の規則” から左側にある “新しい規則…”
  2. 規則の種類: ポートを選択
  3. TCP/UDP どちらかを選択し、特定のローカルポートに使用する番号を入力
  4. 接続を許可するを選択(つなぎ方に応じて選んでください。Wi-Fi設定などに対応させるはず)
  5. 規則の名前を入力して完成


iPhone のデバッグビルドから WSL上の Expo 開発サーバーにつなげたとさ!