WSLの開発環境にスマホからアクセスする

【目的】
WSLで開発しているものをスマホからもアクセ スできるようにしたい

【環境】
Windows11
WSL2
Ubuntu 24.04 LTS

目次

1. はじめに
2. PCのローカルIPアドレスを調べる
3. wslのローカルipアドレスを調べる
4. ポートフォワードの設定をする
5. ポートフォワード設定を削除する

はじめに

PCにて動かしている環境にスマホからアクセスする場合、ポートフォワードを行う。
ポートフォワード設定にはNetsh interface portproxy コマンドを用いる。

簡単に手順説明

PCのローカルIPアドレスとWSLのローカルIPアドレスを結び付け、WSLで動かしているコードをPCのローカルIPアドレスからアクセスできるようにする

→同じネットワーク（≒同じWi-Fi）に接続時、PCで動かしているシステムにスマホからアクセスができるようになる

Let's try!

手順

PCのローカルIPアドレスを調べる

ipconfig を叩くといろいろと表示されるが、そのうちのイーサネット 4のIPv4アドレスを使用する
環境によってはethernet 4と英語で表示される
以下の場合は198.168.100.10がPCのローカルIPアドレスになる

コマンドプロンプト

$ ipconfig 

Windows IP 構成
(...省略...)
イーサネット アダプター イーサネット 4:

   接続固有の DNS サフィックス . . . . .:
   リンクローカル IPv6 アドレス. . . . .: (略)
   IPv4 アドレス . . . . . . . . . . . .: 192.168.100.10
   サブネット マスク . . . . . . . . . .:  (略)
   デフォルト ゲートウェイ . . . . . . .:  (略)
(...省略...)

WSLのローカルIPアドレスを調べる

WSL上でip a sを叩く
表示されたレスポンスのうち、eth0のinetを使用する
以下の場合は172.19.129.50がWSLのローカルIPアドレスとなる

wsl

$ ip a s

(...省略...)
2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc mq state UP group default qlen 1000
    link/ether 00:15:5d:3f:fc:06 brd ff:ff:ff:ff:ff:ff
    inet 172.19.129.50/20 brd 172.19.143.255 scope global eth0
       valid_lft forever preferred_lft forever
    inet6 fe80::215:5dff:fe3f:fc06/64 scope link
       valid_lft forever preferred_lft forever
(...省略...)

ポートフォワードの設定をする

Windows PowerShellを管理者として起動し、Netsh interface portproxy コマンドを叩いて設定する

・listenaddress:　PCのローカルIP
・listenport:　任意のPORT
・connectaddress:　WSLのローカルIP
・connectport:　任意のPORT
を設定する。

以下ポート5000で接続する場合のコマンド例

PowerShell

netsh interface portproxy add v4tov4 listenaddress=192.168.100.10 listenport=5000 connectaddress=172.19.129.50 connectport=5000

上記コマンドを叩いたのち、netsh interface portproxy show v4tov4を叩くと設定状態を確認できる

PowerShell

$ netsh interface portproxy show v4tov4

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

Address         Port        Address         Port
--------------- ----------  --------------- ----------
192.168.100.10  5000        172.19.129.50   5000

この時、スマホから192.168.100.10:5000でアクセスすると、PCで起動しているシステムを表示することができる

■PCからアクセスできるIP
172.19.129.50:5000
192.168.100.10:5000
※ポートフォワード設定前にアクセスしていたIPも表示可能
　localhost
　localhost:5000
　127.0.0.1
　etc....

■スマホからアクセスできるIP
192.168.100.10:5000

おまけ

ポートフォワードの設定をする

上記の設定を削除する場合、以下を叩く

PowerShell

netsh interface portproxy delete v4tov4 listenaddress=192.168.100.10 listenport=5000

以上