はじめに|
WEBアプリの開発中、WSL2で「npm run dev」や「yarn start」などでローカルにアプリを起動すると思います。
その際にスマホのブラウザで確認したくなったことありませんか？
chromeの開発者ツールのスマホエミュレータではなく、実機でです。
そんな時の備忘録です。
動作環境
- 開発環境
- Windows10（※会社貸与ではない）
- ターミナル
- Ubuntu 22.04.2 LTS (WSL2)
- スマホ
- iPhone12（※これももちろん自前の端末）
- スマホのブラウザ
- Safari
大前提として、PCとスマホが同一ネットワークに接続してある必要があります。
PCのローカルIPアドレスの確認
画面右下のネットワークアイコンをクリック
→ 接続中のネットワークの「プロパティ」をクリック
→ 画面下部にあるプロパティ内の「IPv4 アドレス」「IPv4 DNSサーバー」を確認
スマホのローカルIPアドレスの確認
設定アプリを起動
→ 「Wi-Fi」押下
→ 接続中のネットワークを押下
→ 画面下部のIPV4内の「ルーター」を確認
PCの方で確認した、「IPv4 DNSサーバー」と
スマホで確認した「ルーター」が一致していればOKです。
設定
まずは、今回確認したいアプリのIPアドレスとポート番号を確認。
アプリ起動時に出てくると思います。適宜読み替えてください。（ここだけ雑ですみません）
今回は
IPアドレス「172.24.201.10」
ポート「5174」
ですね。
PowerShellを管理者権限で立ちあげます。
2> netsh.exe interface portproxy add v4tov4 listenaddress=192.168.11.27 listenport=5174 connectaddress=172.24.201.10 connectport=5174
を実行して、ポートフォワーディングを設定します。
192.168.11.27 は先ほどPCでIPアドレスを確認した時に確認した「IPv4 DNSサーバー」を入力してください。
最後に、ファイアウォールの設定を変更します。
同一ネットワーク内でもブロックされます。
PC左下の検索窓にファイアと入力したら候補出ると思うので立ち上げてください。
立ち上げ後、左側にある「詳細設定」をクリック
左側、「受信の規則」を右クリック、「新しい規則」をクリック。
「ポート」を選択し、「次へ」
「TCP」を選択し、先ほど確認したポート番号を「特定のローカルポート」に入力し「次へ」
「接続を許可する」を選択し「次へ」
「プライベート」を選択し「次へ」
画像のようにそれぞれ「名前」と「説明」を入力してください。そして「完了」
確認
ここまで設定が完了したらスマホ側のブラウザで、PCのIPアドレスとポート番号を指定し
アクセスします。
すると、よく見る画面をスマホから確認できます。
以上です。
動作確認終わったら、ファイアウォールの設定で先ほど、追加したものを右クリックし、「規則の無効化」をクリックして停止しておいてください。
PowerShellで以下を実行し、ポートフォワーディングの停止もお忘れなく。
> netsh.exe interface portproxy delete v4tov4 listenport=5174 listenaddress=192.168.11.27