🐳

LaravelプロジェクトのWSL2とDocker環境をスマホで確認する方法

2023/11/12に公開

Docker

やりたいこと

開発中のLaravelプロジェクトを、スマホで表示確認したい。

環境情報と前提条件

ホストOS Windows 10
WSL2 Ubuntu

開発に利用しているPCと表示確認したいスマホが同じネットワーク内にある（同じルータを利用している）

確認方法

PCとスマホのipアドレスを確認し、192.168.XX.YのXXが同じ数字なら同じネットワークです。

PC(Windows)

コマンドプロンプトに以下のコマンドを入力
ipconfig
イーサネットアダプターイーサネット:の IPv4 アドレスの値を確認。
message:::
ipconfigコマンドによりWindowsのIPアドレスを確認できます
:::

スマホ(iOS)

設定アプリ→Wi-Fi→接続中のネットワーク機器を選択→ipアドレスの値を確認。

作業手順

1. wsl2(ubuntu)のipアドレスを確認

wsl2の環境で、以下のコマンドを入力
ip a show dev eth0

2. wsl2でサーバー起動

Docker Sailを使っている場合（エイリアス設定済み）は以下のコマンドで起動できますね。
sail up -d
今回はport番号の80で起動しています。

3. ホストOSからwslのipアドレスへアクセスできるか確認

ホストOSのブラウザで＜wsl2のipアドレス＞:80にアクセス。

アクセスできない場合は、wsl内かWSLのイーサネットアダプター周りに問題が起きていないか調べます。
無事にアクセスできる場合は次へ進んでください。

4. ポートフォワーディングを設定

ホストOSのipアドレスでwslのサーバーにアクセスできるようにポートフォワーディングを設定します。

ポートフォワーディングとは、IPネットワーク上のある機器が、自らのIPアドレスのTCPやUDPの特定のポート番号への通信を、別のアドレスの特定のポートへ自動的に転送すること。また、ネットワーク機器などの持つそのような機能。

引用元:https://e-words.jp/w/ポートフォワーディング.html

以下のコマンドを利用します。
コマンドはホストOSで、管理者権限で実行する必要があります。

message::: alert
ポートフォワーディングの設定にはセキュリティリスクが伴います。
設定変更は自己責任でお願いいたします。
:::

コマンドプロンプトを利用する場合、スタートメニューのコマンドプロンプトを右クリックし、「管理者として実行」で起動してください。

ポートフォワーディングを設定
netsh.exe interface portproxy add v4tov4 listenaddress=＜ホストOSのipアドレス＞listenport=<ポート番号> connectaddress=＜wslのipアドレス＞ connectport=<ポート番号>

ポートフォワーディングの設定を確認
netsh.exe interface portproxy show v4tov4

ポートフォワーディングの設定を削除する場合は以下のコマンドを実行してください。
netsh.exe interface portproxy delete v4tov4 listenport=<ポート番号> listenaddress=＜ホストOSのipアドレス＞

5. ホストOSのipアドレスで、wsl2サーバーにアクセスできるか確認

ホストOSのブラウザに＜ホストOSのipアドレス＞:80を入力してアクセスできるか確認。

ポートフォワーディングが正しく設定できていればアクセスできるはずです。

6. スマホからwslのサーバーにアクセスできるか確認

スマホのブラウザから＜ホストOSのipアドレス＞:80にアクセス。

アクセスできない場合は、ファイアウォールの設定を確認する必要があります。

7. ファイアウォールの設定変更

スタートメニューから「セキュリティが強化されたWindows Defender ファイアウォール」を起動。
左側のタブから「受信の規則」を選択します。
右側のタブから「新しい規則」を選択し、該当するポート番号に対して接続を許可するように設定してください。

message::: alert
ファイアウォールの設定にはセキュリティリスクが伴います。
設定変更は自己責任でお願いいたします。
:::

筆者の場合は、ここにXAMPPインストールによって設定された規則があり、スマホからの接続がブロックされていました。
規則を整理することで、無事にアクセスできました。

おわりに

ウェブアプリケーション開発で、スマホから手軽に表示確認できると開発効率を上げられると思います。
WindowsでLaravelプロジェクトを開発する場合、WSLを利用するため難しく感じましたが、ポートフォワーディングを利用することで環境構築できました。

message::: alert
ファイアーウォールの設定も必要になるためセキュリティリスクには注意しなければなりません。
:::

この記事がLaravel開発を学ぶ人の助けになれば幸いです。