1. 概要
前回はPankoにBingoが追加された内容についてでした。今回はスマホからローカル環境にアクセスする内容についてです。
大体の事はDeveloper Toolsで確認できますが、実機でも確認できるように設定する内容です。
2. ネットワーク接続
同一ネットワークに接続
- NextJSアプリ
- スマホ等の外部端末
3. IPアドレスの確認（Windows）
Powershellで下記コマンドで確認
ipconfigWindows IP 構成
Wireless LAN adapter ローカル エリア接続* 1:
メディアの状態. . . . . . . . . . . .: メディアは接続されていません
接続固有の DNS サフィックス . . . . .:
Wireless LAN adapter ローカル エリア接続* 2:
メディアの状態. . . . . . . . . . . .: メディアは接続されていません
接続固有の DNS サフィックス . . . . .:
Wireless LAN adapter Wi-Fi:
接続固有の DNS サフィックス . . . . .: to-the-world
IPv6 アドレス . . . . . . . . . . . .: 1001:abc:defg:hij:1234:5678:9012:3456
一時 IPv6 アドレス. . . . . . . . . .: 1001:abc:defg:hij:4528:3456:7890:1234
リンクローカル IPv6 アドレス. . . . .: 3456::1234:5678:1598:3574%18
IPv4 アドレス . . . . . . . . . . . .: 192.168.1.3
サブネット マスク . . . . . . . . . .: 255.255.255.0
デフォルト ゲートウェイ . . . . . . .: 6587::2541:5874:6985:2145%18
192.168.1.1
イーサネット アダプター Bluetooth ネットワーク接続:
メディアの状態. . . . . . . . . . . .: メディアは接続されていません
接続固有の DNS サフィックス . . . . .:
イーサネット アダプター vEthernet (WSL (Hyper-V firewall)):
接続固有の DNS サフィックス . . . . .:
リンクローカル IPv6 アドレス. . . . .: 5412::258:9654:147:3654%41
IPv4 アドレス . . . . . . . . . . . .: 172.11.105.1
サブネット マスク . . . . . . . . . .: 255.255.231.0
デフォルト ゲートウェイ . . . . . . .:- Wireless LAN adapter Wi-Fi:
- IPv4 アドレス . . . . . . . . . . . .: 192.168.1.3
4. IPアドレスの確認（WSL2）
WSL2に入って下記コマンドで確認
ifconfigeth0: flags=1234<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500
inet 172.20.111.110 netmask 255.255.240.0 broadcast 172.20.121.255
inet6 1234::456:5678:9012:2541 prefixlen 64 scopeid 0x20<link>
ether 00:15:5d:e1:a5:7d txqueuelen 1000 (Ethernet)
RX packets 3059972 bytes 3446112986 (3.4 GB)
RX errors 0 dropped 0 overruns 0 frame 0
TX packets 928202 bytes 163696266 (163.6 MB)
TX errors 0 dropped 0 overruns 0 carrier 0 collisions 0
lo: flags=73<UP,LOOPBACK,RUNNING> mtu 65536
inet 127.0.0.1 netmask 255.0.0.0
inet6 ::1 prefixlen 128 scopeid 0x10<host>
loop txqueuelen 1000 (Local Loopback)
RX packets 15669600 bytes 24295981548 (24.2 GB)
RX errors 0 dropped 0 overruns 0 frame 0
TX packets 15669600 bytes 24295981548 (24.2 GB)
TX errors 0 dropped 0 overruns 0 carrier 0 collisions 0- eth0
- inet 172.20.111.110
5. ポートフォワーディングの設定
Powershell（管理者権限）で実行（WSL2でない）
5-1-1. 確認
netsh.exe interface portproxy show v4tov45-1-2. 設定
netsh.exe interface portproxy add v4tov4 listenaddress=192.168.1.3 listenport=3000 connectaddress=172.20.111.110 connectport=3000- listenaddress
- 上記３にて確認したIP
- listenport
- 3000
- connectaddress
- 上記４にて確認したIP
- connectport
- 3000
5-1-3. 確認
netsh.exe interface portproxy show v4tov4ipv4 をリッスンする: ipv4 に接続する:
Address Port Address Port
--------------- ---------- --------------- ----------
192.168.1.3 3000 172.20.111.110 3000※PCを再起動した時にはIPが変わってる可能性があるため、その際は再設定が必要
5-1-4. 削除
netsh.exe interface portproxy delete v4tov4 listenport=3000 listenaddress=192.168.1.36. Windows Firewallの設定
※既にTCPのポート3000が開いてる（設定されてる）場合は不要
Powershell（管理者権限）で下記コマンドを実行
wf.msc- 新しい規則を作成し、3000番ポートからのアクセスを許可するプロパティを追加
- 受信の規制
- 新しい規制
- TCP
- 特定のローカルポート：3000
- 新しい規制
- 受信の規制
7. 外部端末からアクセス
NextJSアプリを起動後、スマホからアクセス
- http://192.168.1.3:3000
8. 備考
今回はスマホ（外部端末）からローカル環境にアクセスする内容についてでした。
下記のようなやり方もあるよう。
{
"scripts": {
"dev": "next dev --hostname 0.0.0.0"
}
}npm run devPankoでは、ログイン不要でそれぞれのイベントを作成しURLを共有するだけで日程調整からグループ分け・精算、そしてビンゴができますので是非使ってみてください。
9. 参考
- Docs | Next.js (nextjs.org)
- Quick Start – React
- Getting Started with Redux | Redux
- Getting Started with React Redux | React Redux (react-redux.js.org)
- Material UI: React components based on Material Design (mui.com)
- WSL2で起動したReactアプリに外部端末からアクセスする ##localhost – Qiita
投稿者プロフィール
-
開発好きなシステムエンジニアです。
卓球にハマってます。
