【NextJS】Access nextjs app launched on WSL2 from an external terminal

【NextJS】Pankoにオンラインビンゴが追加されました

【NextJS】Upload and Render Images with AWS S3

1. 概要

前回はPankoにBingoが追加された内容についてでした。今回はスマホからローカル環境にアクセスする内容についてです。

大体の事はDeveloper Toolsで確認できますが、実機でも確認できるように設定する内容です。

Panko | 無料オンラインビンゴを楽しんでください。

2. ネットワーク接続

同一ネットワークに接続

  • NextJSアプリ
  • スマホ等の外部端末

3. IPアドレスの確認（Windows）

Powershellで下記コマンドで確認

ipconfig
Windows 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に入って下記コマンドで確認

ifconfig
eth0: 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 v4tov4

5-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 v4tov4
ipv4 をリッスンする:         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.3

6. 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 dev

Pankoでは、ログイン不要でそれぞれのイベントを作成しURLを共有するだけで日程調整からグループ分け・精算、そしてビンゴができますので是非使ってみてください。

9. 参考

【NextJS】View and Download PDF

投稿者プロフィール

Sondon
開発好きなシステムエンジニアです。
卓球にハマってます。

関連記事

  1. 【NextJS】ChatApp with Realtime updat…

  2. 【NextJS】Upload and Render Images wi…

  3. 【NextJS】Metadata(Head,Title)・Script…

  4. 【NextJS】Error Handling

  5. 【NextJS】Pankoにオンラインビンゴが追加されました

  6. 【NextJS】Online HTML Editor with Tip…

最近の記事

  1. 2026.01.27

    情報処理安全確保支援士（セキスペ）試験対策について ~試…

  2. 2026.01.11

    情報処理安全確保支援士（セキスペ）試験対策について

  3. 2025.12.31

    情報処理安全確保支援士（セキスペ）について

  4. 2025.12.26

    RAG改良手法の学習

  5. 2025.12.25

    StreamlitでRAGを作ってみた

  6. 2025.12.23

    Pythonを学習するにあたってやったこと

  7. 2025.12.07

    複数のGitHubアカウントを使い分ける方法

  8. 2025.11.28

    『Webを支える技術』を読んだ学び

  9. 2025.11.22

    25年 11月 isub 全社会（忘年会）at 渋谷【P…

制作実績一覧

  2. Checkeys