WSLで開発中のNext.jsアプリにスマホからアクセスする方法

WSL

はじめに

WSL2上でNext.jsアプリを開発していると、実機（スマートフォン）で動作確認をしたい場面があります。
本記事では、Windowsのポートフォワーディングとファイアーウォール設定を行い、同一ネットワーク上のスマホからWSL2のNext.jsアプリにアクセスする手順を解説します。

使用環境

  • ホストPC: Windows 11
  • Linuxディストリビューション: Ubuntu（WSL2）
  • フレームワーク: Next.js

Next.jsアプリの作成と起動

任意のディレクトリで以下のコマンドを実行し、Next.jsアプリを作成します。
今回はテンプレートを使用して、最小限の構成でアプリを作成します。

npx create-next-app@latest my-app --yes
cd my-app

通常の起動コマンドでは、アプリはローカルホスト（localhost）のみでリッスンするため、外部からのアクセスを受け付けません。

npm run dev
# → http://localhost:3000 のみでアクセス可能

スマホなどの外部デバイスからアクセスするには、--hostname 0.0.0.0 オプションを付けて起動します。

npm run dev -- --hostname 0.0.0.0

このオプションにより、Next.jsはすべてのネットワークインターフェースからの接続を受け付けるようになります。

注意：外部アクセスを許可するため、安全なネットワーク環境でのみこの設定を使用してください。

Windows側の設定

WSL2はWindowsの仮想ネットワーク内で動作しているため、外部デバイスからWSL2へ直接アクセスすることができません。
Windowsのポートフォワーディングを設定して、ホストPCのポートをWSL2のポートへ転送する必要があります。

詳細な手順は「Windows上のWSL2に別のPCからSSH接続する方法」でも解説していますが、ここでも要点をまとめます。

WSL2のIPアドレスを確認

WSL2のターミナルで以下のコマンドを実行し、IPアドレスを確認します。

ip a show dev eth0

出力例：

2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 ...
    inet 172.17.104.210/20 brd 172.17.111.255 scope global eth0

この例では 172.17.104.210 がWSL2のIPアドレスです。

ポートプロキシ設定

PowerShellを管理者権限で起動し、以下のコマンドを実行します。
Next.jsのデフォルトポートは 3000 です。

netsh interface portproxy add v4tov4 listenaddress=* listenport=3000 connectaddress=172.17.104.210 connectport=3000

設定が正しく適用されたか確認します。

netsh interface portproxy show v4tov4

ファイアーウォールの設定

外部からのアクセスを許可するために、Windowsファイアーウォールで受信ルールを追加します。

  1. Windows検索窓で「ファイアーウォール」と検索し、「Windowsディフェンダーファイアーウォール」を開きます
  2. 左側の「詳細設定」をクリックします
  3. 「受信の規則」を選択します
  4. 右側の「新しい規則」をクリックします
  5. 規則の種類で「ポート」を選択して「次へ」をクリックします
  6. 「特定のローカルポート」を選択し、ポートフィールドに 3000 を入力して「次へ」をクリックします
  7. 「接続を許可する」を選択して「次へ」をクリックします
  8. 規則を適用するネットワークの種類を選択します（プライベートネットワークのみ推奨）
  9. 規則に分かりやすい名前（例: WSL2 Next.js）を付けて完了します

ホストPCのIPアドレスを確認

PowerShellで以下のコマンドを実行し、ホストPC（Windows）のIPアドレスを確認します。

ipconfig

出力結果から、Wi-Fiアダプターの IPv4 アドレス を確認します（例: 192.168.1.10）。

アクセス確認

スマホをホストPCと同じWi-Fiネットワークに接続した状態で、ブラウザから以下のURLにアクセスします。

http://192.168.1.10:3000

192.168.1.10 の部分を、前の手順で確認したホストPCのIPアドレスに置き換えてください。
Next.jsのウェルカムページが表示されれば、設定は成功です。

まとめ

WSL2上のNext.jsアプリにスマホからアクセスするには、以下の3つの設定が必要です。

  • Next.jsを --hostname 0.0.0.0 オプションで起動する
  • WindowsのポートプロキシでホストのポートをWSL2へ転送する
  • Windowsファイアーウォールで対象ポートへの受信を許可する

これらの設定を行うことで、開発中のアプリをスマホで手軽に確認できるようになります。

コメント

タイトルとURLをコピーしました