WSL2で起動したReactアプリに外部端末からアクセスする

はじめに

WSL2で起動したNext.jsのアプリをスマホやタブレットで動作確認するための手順をメモしておく。

環境

• PC: Dell XPS13/Windows11
• WSL: WSL2/Ubuntu-18.04
• 外部端末: iPad Air(第4世代)/システムバージョン15.3.1

iPadからはchromeでアクセスするが、URLの入力にキーボードを用意しておくと便利。

手順

ネットワーク接続

言わずもがなだが、PCとiPadを同じネットワークに接続しておく。

IPアドレスの確認

ホストマシンのIPアドレスを確認する。
コマンドプロンプトかPowershellで以下のコマンドで確認できる。

> ipconfig

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

Wireless LAN adapter Wi-Fi:

   接続固有の DNS サフィックス . . . . .:
   リンクローカル IPv6 アドレス. . . . .: fe80::2db8:a210:decb:c9b6%17
   IPv4 アドレス . . . . . . . . . . . .: 192.168.0.4
   サブネット マスク . . . . . . . . . .: 255.255.255.0
   デフォルト ゲートウェイ . . . . . . .: 192.168.0.1

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

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

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

   接続固有の DNS サフィックス . . . . .:
   リンクローカル IPv6 アドレス. . . . .: fe80::2108:9dd:7c97:cd62%41
   IPv4 アドレス . . . . . . . . . . . .: 172.21.48.1
   サブネット マスク . . . . . . . . . .: 255.255.240.0

上記の例だと、Wiress LAN adapter Wi-FiのカテゴリーのIPv4アドレス(192.168.0.4)がそれにあたる。

また、vEthernet (WSL)があることを確認しておく。
ただし、ここに表示されているのがWSLのIPアドレスではない。
WSLのIPはWSLを起動して、以下のコマンドで確認する。

$ hostname -I
172.21.52.108

ポートフォワーディングの設定

ホストマシンのIPにアクセスした際に、WSLのサーバーにアクセスできるように、ポートフォワーディングの設定をする。

まず、コマンドプロンプトを管理者権限で起動する。

起動したコマンドプロンプトにて、以下のコマンドで設定する。

> netsh.exe interface portproxy add v4tov4 listenaddress=<ホストマシンのIP> listenport=<公開するポート番号> connectaddress=<WSLのIP> connectport=<公開するポート番号>

# 今回のケースでは以下のようになる
> netsh.exe interface portproxy add v4tov4 listenaddress=192.168.0.4 listenport=3000 connectaddress=172.21.52.108 connectport=3000

設定を確認する場合

> netsh.exe interface portproxy show v4tov4
ipv4 をリッスンする:         ipv4 に接続する:

Address         Port        Address         Port
--------------- ----------  --------------- ----------
192.168.0.4     3000        172.21.48.1     3000

これらのIPアドレスは毎回変わるので、PCを起動する度に設定する必要がある。
そこで以前の設定を削除するには以下のコマンドを使う。

> netsh.exe interface portproxy delete v4tov4 listenport=3000 listenaddress=192.168.0.4

外部端末からアクセス

WSLでサービスを起動する。
今回は、テストしてNext.jsのアプリを起動。

$ yarn create next-app
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-next-app@13.2.1" with binaries:
      - create-next-app
✔ What is your project named? … test-next-app
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Would you like to use experimental `app/` directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*

$ yarn dev
yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback
info  - VS Code settings.json has been created for Next.js' automatic app types, this file can be added to .gitignore if desired
event - compiled client and server successfully in 2.5s (262 modules)
wait  - compiling...
event - compiled client and server successfully in 270 ms (262 modules)
wait  - compiling /page (client and server)...
event - compiled client and server successfully in 2.4s (521 modules)

PCでlocalhost:3000にアクセスして表示できるか確認する。

次に、iPadでホストマシンのIPにアクセスして、表示できるか確認する。

表示に成功！

外部端末からアクセスできなかった場合

Windows Firewallでブロックされている可能性がある。
コマンドプロンプトでWindows Firewallのコンソールを開く。

> wf.msc

新しい規則を作成し、3000番ポートからのアクセスを許可するプロパティを追加する。

参考