.NET Core 6.0を使用してタブレット、スマホ向けのWebアプリを構築する際に、開発段階で各端末(タブレットやスマートフォン)からローカルサーバにアクセスできないかなと調べていたところ、思ったよりも簡単にできたため、備忘録に書き残しておきます。
実現したいこと
開発段階のIIS Expressに同じネットワーク上の他端末(タブレットやスマートフォン)からアクセスし、表示を確認出来るようにする。
具体的な手順
.NET Coreプロジェクトを選択します。
今回はASP.NET Core MVCのテンプレートを使用します。
プロジェクト設定はデフォルトの設定で問題ありませんが、対象とするフレームワークは「.NET 6.0」としておきます。「次へ」を繰り返しクリックして、「作成」をクリックします。
プロジェクトが作成できたら、先にローカルサーバを立てるPCのIPアドレスを調べておきます。コマンドプロンプトを開き、「ipconfig」と入力します。
これはネットワーク上におけるローカルサーバのホストPCのIPアドレスを調べています。
スマホは無線LAN接続が基本だと思いますので、PC側も無線LAN上のローカルIPアドレスを調べます。「Wireless LAN adapter Wi-Fi」のIPv4アドレスをメモしておきます。この例だと192.168.11.8です。
続いて、Visual Studioに戻ります。ソリューションエクスプローラーのPropertiesフォルダから「launchSetting.json」を開きます。
画像の15行目に”applicationUrl”があるので、そちらに以下を記述します。
"applicationUrl" : "https://localhost:7123;http://localhost:5123;https://IPアドレス:ポート番号",今回は以下の設定で進めます。
"applicationUrl" : "https://localhost:7123;http://localhost:5123;https://192.168.11.8:40000",launchSetting.jsonに追記が完了したら、Ctrl+Sでファイル変更を保存しておきます。
後は、サービスを起動します。
ソリューションエクスプローラーのプロジェクトを右クリックし、「ターミナルで開く」を選択します。
画面の下の方にターミナルが起動したら、「dotnet run」と入力します。
このような画面になっていれば、OKです。後は同じネットワーク内にある他端末から「https://192.168.11.8:40000」にアクセスすれば、完了です。
もしもアクセスできない場合
アクセスが出来ない場合はローカルサーバを立てているPCのブラウザで「https://192.168.11.8:40000」にアクセスできるか、確認してください。下の画面が表示された場合は「詳細設定」→「192.168.11.8にアクセスする」をクリックします。
ローカルサーバを立てているPCからはアクセス出来ることが分かりました。
この場合は、ファイアウォールのポート開放設定が不足しているため、アクセスが遮断されている可能性があります。ポート開放の設定をしてあげます。(プライベートからの接続しか許可しないので、大丈夫だとは思いますが、念のため自己責任でお願いします。)
ローカルサーバを立てているPCから「コントロールパネル」→「システムとセキュリティ」→「Windows Defender ファイアウォール」→「詳細設定」をクリックします。
受信の規則から「新しい規則」をクリックします。作成ウィザードが開いたら、
・「ポート」を選択
・TCP 特定のローカルポート:40000
・接続を許可する
・パブリックのチェックを外す
・名前を「40000ポート設定」とする(何でもよいですが、後で分かりやすいものを)
再度、他端末からアクセスを試し、接続できることを確認します。
他に考えられる原因
- IPアドレスが誤っている→ipconfigの確認を再度行なう
- 同じネットワーク内にない端末からアクセスしている→PC or 他端末のWi-Fi設定を見直す
まとめ
ポートさえ開けてしまえば、簡単に外部(同ネットワーク)からアクセスできることが分かりました。さすがVisual Studio、開発のしやすいのはMicrosoftのお墨付きですね。では今回はここまでです。
最後までお読みいただきありがとうございました。
コメント