🐧

WSL2で開発中のWebアプリを同じLANのスマホで動作確認する方法

2022/06/04に公開

PowerShell

WSL 2

tech

WSL2で開発中のWebアプリをスマホで即座に動作確認したい

スマホとPCが同一のWifiに接続している状態でスマホのブラウザから http://<PCのIPアドレス>:<Webアプリのポート> にアクセスして動作確認出来ることがよく知られています。
私は普段PC向けの業務システムやライブラリを作っているのでこの方法を使う機会がほとんどないのですが、久しぶりにスマホでの確認が必要になりました。

開発環境がWSL2の場合に固有処理が必要だったのでメモ代わりに公開しておきます。

WSL2固有処理だけ知りたい人のための結論

PowerShellを管理者権限で開いてください。
以下を1行ずつ入力してもいいし、ps1ファイルに書いて実行でもいいはずです。
私はPowerShellに慣れてないので1行ずつ打ち込んでます。

開始

$ports = @(3000, 8000) # Webアプリで使うポートを配列で指定
$fwRuleName = "WSL 2 Firewall Unlock"
$wsl2Address = wsl -e hostname -I | ForEach-Object { $_.trim() }

New-NetFireWallRule -DisplayName $fwRuleName -Direction Inbound -LocalPort $ports -Action Allow -Protocol TCP

for ($i = 0; $i -lt $ports.length; $i++) {
  $port = $ports[$i]
  netsh interface portproxy add v4tov4 listenport=$port listenaddress=* connectport=$port connectaddress=$wsl2Address
}

確認

Get-NetFireWallRule -DisplayName $fwRuleName | Get-NetFireWallPortFilter
netsh interface portproxy show v4tov4

終了

Remove-NetFireWallRule -DisplayName $fwRuleName

for ($i = 0; $i -lt $ports.length; $i++) {
  $port = $ports[$i]
  netsh interface portproxy delete v4tov4 listenport=$port listenaddress=*
}

ポートを一つしか使わないなら $ports = @(3000) の代わりに $port = 3000 と定義してfor文を解体するといいです。

開始

$port = 3000
$fwRuleName = "WSL 2 Firewall Unlock"
$wsl2Address = wsl -e hostname -I | ForEach-Object { $_.trim() }

New-NetFireWallRule -DisplayName $fwRuleName -Direction Inbound -LocalPort $port -Action Allow -Protocol TCP
netsh interface portproxy add v4tov4 listenport=$port listenaddress=* connectport=$port connectaddress=$wsl2Address

終了

Remove-NetFireWallRule -DisplayName $fwRuleName
netsh interface portproxy delete v4tov4 listenport=$port listenaddress=*

以下MSの公式ドキュメント通りだとスマホからのアクセスがFirewallに弾かれるので New-NetFireWallRule が必要でした。

$wsl2Address に標準出力を代入する際に末尾の空白を ForEach-Object でtrimしましたがもっと短い記述があれば教えてください。
(% エイリアスはPowerShellに慣れてないと意味がわからないのでやめました)

参考にしたサイト

上記だけでは接続できなかった人のための追加情報

PCのIPアドレスの確認

「windows ipconfig」でググってください。

WSL2のIPアドレスの確認

上記の開始コマンド内にもある

wsl -e hostname -I

で表示されます。

Wifiルーターの設定

プライバシーセパレーターという機能が有効になっているとスマホからPCを見つけられません。

Webフレームワークの設定

最近のWebフレームワークはDNSリバインディング対策で「localhost」「127.0.0.1」以外のアクセスを弾くことがあります。

Webフレームワークのドキュメントを読んで host: '0.0.0.0' に設定してください。

デバッグ手順

上記のどこで失敗しているかわからないときは以下の手順で確かめると良いです。

Windows側にWebフレームワークを素でインストール
host: '0.0.0.0' を設定
サーバー起動
http://localhost:<port> にPCのブラウザでアクセスし表示確認
ipconfig でPCのIPアドレスを確認
スマホで http://<PCのIPアドレス>:<port> にアクセス
表示されないならWifiルーターのプライバシーセパレーター設定が怪しいので確認
表示されたらサーバー停止、Webフレームワーク削除
WSL2側にWebフレームワークを素でインストール
host: '0.0.0.0' を設定
サーバー起動
記事最上部の開始コマンドを入力
http://<PCのIPアドレス>:<port> にPCのブラウザでアクセス
表示されないなら netsh interface portproxy add ~ のコマンドが間違っているので netsh interface portproxy show v4tov4 で内容確認
PCで表示されたらスマホで http://<PCのIPアドレス>:<port> にアクセス
スマホで表示されないなら New-NetFireWallRule -DisplayName ~ のコマンドが間違っているので Get-NetFireWallRule -DisplayName $fwRuleName | Get-NetFireWallPortFilter で内容確認
表示成功

良きWSL2ライフを！