@ledsun blog

無味の味は佳境に入らざればすなわち知れず

WSL上で動かしているWebアプリケーションを外部から参照する

WSL上でWebアプリケーションを開発すると、本番環境とほとんど変わらない環境が手に入るので便利です。 WSL上で動かしているWebアプリケーションはホストのWindowsからはlocalhostで参照できます。 ところが、ホストのWindowsの外、例えば、Androidの実機から参照することはできません。 そこでホストのWindowsでポートフォワードの設定をします。

すべての操作はホストのWindowsPowerShell上で行います。

IPアドレスの取得

ポートフォワードの対象とするIPアドレスを取得します。

ホストのWindows

PS C:\Users\led_l> ipconfig

Windows IP 構成


イーサネット アダプター vEthernet (WSL):

   接続固有の DNS サフィックス . . . . .:
   リンクローカル IPv6 アドレス. . . . .: fe80::18bc:5a4c:432a:f9ca%36
   IPv4 アドレス . . . . . . . . . . . .: 172.20.224.1
   サブネット マスク . . . . . . . . . .: 255.255.240.0
   デフォルト ゲートウェイ . . . . . . .:

Wireless LAN adapter ローカル エリア接続* 1:

   メディアの状態. . . . . . . . . . . .: メディアは接続されていません
   接続固有の DNS サフィックス . . . . .:

Wireless LAN adapter ローカル エリア接続* 2:

   メディアの状態. . . . . . . . . . . .: メディアは接続されていません
   接続固有の DNS サフィックス . . . . .:

Wireless LAN adapter Wi-Fi:

   接続固有の DNS サフィックス . . . . .: flets-east.jp
   IPv6 アドレス . . . . . . . . . . . .: 2405:6580:3700:300:65ae:8b2a:db09:b685
   一時 IPv6 アドレス. . . . . . . . . .: 2405:6580:3700:300:5436:3fc9:fde4:2205
   リンクローカル IPv6 アドレス. . . . .: fe80::65ae:8b2a:db09:b685%8
   IPv4 アドレス . . . . . . . . . . . .: 192.168.1.50
   サブネット マスク . . . . . . . . . .: 255.255.255.0
   デフォルト ゲートウェイ . . . . . . .: fe80::fab7:97ff:fe7b:7df8%8
                                          192.168.1.1

イーサネット アダプター Bluetooth ネットワーク接続:

   メディアの状態. . . . . . . . . . . .: メディアは接続されていません
   接続固有の DNS サフィックス . . . . .:

WSL

PS C:\Users\led_l> wsl exec hostname -I
172.17.153.14

ポートフォワード

Windowsのポートフォワード設定します。

PS C:\Windows\system32> netsh.exe interface portproxy add v4tov4 listenaddress=192.168.1.50 listenport=8000  connectaddress=$IP connectport=8000

設定値を確認します。

PS C:\Windows\system32> netsh.exe interface portproxy show v4tov4

ipv4 をリッスンする:         ipv4 に接続する:

Address         Port        Address         Port
--------------- ----------  --------------- ----------
192.168.1.50    8000        172.17.153.14   8000

実際に動いてるかどうかは、ホストのWindowsから http://localhost:8000 の代わりに、 http://192.168.1.50:8000 で接続出来るかどうかで確認できます。

ここで動かなくて大分悩みました。

portforwarding - NETSH port forwarding from local port to local port not working - Stack Overflow

netsh interface ipv6 install

を参考にして、次のコマンドを実行したら、動くようになりました。

PS C:\Users\led_l> netsh interface ipv4 install
コンピューターを再起動してこの操作を完了してください。

このコマンドが何をする物なのかは、よくわかっていません。

Windowsを再起動すると、WSLのIPアドレスは変わります。 ポートフォワードを設定し直します。

PS C:\Users\led_l> netsh.exe interface portproxy delete v4tov4 listenaddress=192.168.1.50 listenport=8000

PS C:\Users\led_l> netsh.exe interface portproxy show v4tov4

PS C:\Users\led_l> netsh.exe interface portproxy add v4tov4 listenaddress=192.168.1.50 listenport=8000 connectaddress=172.20.232.152

PS C:\Users\led_l> netsh.exe interface portproxy show v4tov4

ipv4 をリッスンする:         ipv4 に接続する:

Address         Port        Address         Port
--------------- ----------  --------------- ----------
192.168.1.50    8000        172.20.232.152  8000

Windows Defenderのルール追加

ここまでで、WSL上で実行しているWebアプリケーションにホストのWindowsからIPアドレスで参照出来るようになりました。 外部から参照するには、さらにホストのWindowsファイアウォールのルール追加が必要です。

WindowsファイアウォールとしてWindows Defenderを使っている場合は、 次のように、ポートを指定して、許可ルールを追加します。

PS C:\Users\led_l> New-NetFirewallRule -DisplayName "TextAEのテスト用" -Direction Inbound  -Protocol TCP -LocalPort 8000 -Profile private  -Action Allow

Name                  : {dd0128eb-39eb-459f-ac5d-448638c49b35}
DisplayName           : TextAEのテスト用
Description           :
DisplayGroup          :
Group                 :
Enabled               : True
Profile               : Private
Platform              : {}
Direction             : Inbound
Action                : Allow
EdgeTraversalPolicy   : Block
LooseSourceMapping    : False
LocalOnlyMapping      : False
Owner                 :
PrimaryStatus         : OK
Status                : 規則は、ストアから正常に解析されました。 (65536)
EnforcementStatus     : NotApplicable
PolicyStoreSource     : PersistentStore
PolicyStoreSourceType : Local

消すときは次のように消します。

PS C:\Users\led_l> Remove-NetFirewallRule -DisplayName "TextAEのテスト用"

参考