WSL2の localhost:3000 にスマホからアクセスするための設定

はじめに

WSL2で立ち上げたアプリケーションのhttp://localhost:3000へ，スマホでアクセスしたいことがあると思います．
しかし，MacやUbuntu，WSL2を使わずにWindowsで立ち上げた時と違い，単純にWSL2のホストへアクセスすることはできません．

WSL2で作成したアプリケーションへアクセスするための設定を，スクリプトで簡単に設定する方法紹介します．

環境

OS: Windows 10
WSL2: Ubuntu-20.04

もくじ

• 手順
  • 準備
  • 設定用スクリプト
  • PowerShellから実行
  • スマホからアクセス
• 問題点
• 対処
  • 準備
  • 設定消去スクリプト
  • PowerShellから実行
• おわりに
• 参考記事

手順

PowerShellスクリプトを作成します．
コピペでOKです！

準備

適当な場所にopen_wsl_port.ps1など適当な名前の.ps1ファイルを作成します．

メモ帳などで開きます．

設定用スクリプト

以下のスクリプトを.ps1ファイルに書き込みます．
ポートフォワーディングを設定しています．

open_wsl_port.ps1

if (!([Security.Principal.WindowsPrincipal][Security.Principal.WindowsIdentity]::GetCurrent()).IsInRole("Administrators")) { Start-Process powershell.exe "-File `"$PSCommandPath`"" -Verb RunAs; exit }

$ip = bash.exe -c "ip r |tail -n1|cut -d ' ' -f9"
if( ! $ip ){
  echo "The Script Exited, the ip address of WSL 2 cannot be found";
  exit;
}

# All the ports you want to forward separated by comma
$ports=@(22,3000,3001,8080);
$ports_a = $ports -join ",";

# Add envvironment variable is port number
[Environment]::SetEnvironmentVariable('PORT',$ports,"User");

# Remove Firewall Exception Rules
iex "Remove-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' ";

# Adding Exception Rules for inbound and outbound Rules
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort $ports_a -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort $ports_a -Action Allow -Protocol TCP";

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

# Show proxies
iex "netsh interface portproxy show v4tov4";

$ports=@(22,3000,3001,8080);の部分に，アクセスしたいポートを列挙します．

参考：Windows WSL2に外部から直接アクセスするための設定

[Environment]::SetEnvironmentVariable('PORT',$ports,"User");でユーザ環境変数を設定していますが，理由は後述します．

PowerShellから実行

1. ファイルを保存しておきます．
2. WSL2を起動しておきます．
3. ファイルを右クリックし「PowerShell で実行」を選択します．
   
   PowerShellが一瞬開きます．これで，設定は完了です！簡単でしょ？

スマホからアクセス

同一LAN内に入る

PCと同じWifiにスマホを接続します．かならず同じものに接続し，同一LAN内にPC，スマホがある状態にします．

WSLでローカルホストでアプリを起動

ReactでもVueでもRailsでも何でもいいので，スマホからアクセスしたいアプリケーションを起動します．

WindowsのIPにアクセス

PCでコマンドプロンプトを開き，以下のコマンドを実行します．

cmd

ipconfig

その中にWireless LAN adapter Wi-Fi:のIPv4 アドレス: 192.168.x.xxというものがあると思います．(x: 伏字)

これをスマホのブラウザで入力します．
たとえばhttp://192.168.x.xx:3000(ローカルホストが3000番ポートで開いた場合)

接続できない時

1. 先ほどのポートフォワーディング時にポートを指定できていない．
   1. 今回，WSLのポート3000にアクセスするので，スクリプトで@(3000)の記述は必須
2. もしくは，同一LAN内に接続できていない．
3. windowsのファイアウォールでポート3000が制限されてしまっている．
4. ポートフォワーディングの設定が古くなっている
   1. WSLのホストが新しくなったりしていませんか？
   2. こちらを参考にホストの齟齬が起きていないかチェックしましょう

等を疑ってみてください．

問題点

一つ問題があります．
WSL2を立ち上げなおすたびにホストが変わってしまうので，そのたびにこのスクリプトを走らせなければいけません．
何が問題かというと，古い設定値が残っているとポートフォワーディングが不適切に行われることで，そのポートへのアクセスができなくなります．

私がまさしくこの地雷を踏んでしまい四苦八苦しました．

対処

こちらの記事で示す通り ポートフォワーディングの古い設定を更新する，もしくは消してしまえば，またアクセスできるようになります．

しかし，毎回手作業で１つ１つポートフォワーディングの古い設定を消すのもめんどくさいので，設定値を消すスクリプトも同時に用意しておきましょう！

準備

適当な場所にclose_wsl_port.ps1など適当な名前の.ps1ファイルを作成します．

メモ帳などで開きます．

設定消去スクリプト

以下のスクリプトを.ps1ファイルに書き込みます．
ポートフォワーディングの設定を消去します．

close_wsl_port.ps1

if (!([Security.Principal.WindowsPrincipal][Security.Principal.WindowsIdentity]::GetCurrent()).IsInRole("Administrators")) { Start-Process powershell.exe "-File `"$PSCommandPath`"" -Verb RunAs; exit }

# Get current portforwarding numbers from environment variable
$ports = @([Environment]::GetEnvironmentVariable("PORT","User") -Split " ");

for( $i = 0; $i -lt $ports.length; $i++ ){
  $port = $ports[$i];
  iex "netsh interface portproxy delete v4tov4 listenport=$port";
  echo "closed Port:$port"
}

# Remove environment values is port number
[Environment]::SetEnvironmentVariable('PORT',"","User")

# Show proxies
iex "netsh interface portproxy show v4tov4";

先ほどユーザ環境変数にポート番号を設定していたのは，このポートフォワーディングの設定を消すときに使いたかったからです．(もっといい方法あったら教えてください．)

ユーザ環境変数PORTには常にWSLとポートフォワーディングするために開放したポートが記されるようにしているので，この値をもとに設定の消去を行います．

また，[Environment]::SetEnvironmentVariable('PORT',"","User")で定義したユーザ環境変数を消しています．

参考：PowerShellでシステム環境変数を取得・上書・追加・削除する

PowerShellから実行

先ほどと同様です。

1. ファイルを保存しておきます．
2. WSL2を起動しておきます．
3. ファイルを右クリックし「PowerShell で実行」を選択します．

PowerShellが一瞬開きます．これで，設定を消去できます．

おわりに

手作業で設定していくと意外とめんどくさいので，自動化していきましょう！
ポートを開放し，作業が終わったら忘れないように閉じることを心がければ，私のような地雷は踏まなくてよくなるはず．

良いWebアプリ制作ライフを！

それでは

参考記事

• PowerShellでシステム環境変数を取得・上書・追加・削除する
• Windowsでnesh portproxyコマンドでポートフォワーディングする方法
• 【PowerShell】環境変数を設定する
• PowerShell/文字列をカンマなどで区切り文字を指定し配列に格納する・Split

関連記事

• WSL2でReactの localhost:3000 にアクセスできなくなった時