VisualStudio開発環境IISをLAN内スマホからアクセスできるようにする

VisualStudioデバッグ環境

VisualStudioデバッグ環境で、webアプリ開発の際、スマホからのアクセス画面を確認したいです。別に立てたIISサーバに配置するのもちょっとおっくうだし、開発しながらスマホで開きたいと思い、開発環境のローカルIISにLAN内スマホからアクセスできるように設定してみました。

開発環境はVisualStudio 2017です。

WindowsDefender ファイヤーウォールを無効

まずは、WindowsDefender ファイヤーウォールを無効にします。

IISの設定変更 applicationhost.config

VisualStudioインストール時にIIS Expressが同時インストールされています。この設定ファイルをさがすのに苦労しました。

VisualStudio2017では、開発したプロジェクトのフォルダにコンフィグが入っています。

プロジェクトフォルダの .vs を開くとconfigフォルダがあります。この中に

applicationhost.config

が入っています。

hostsファイルを書き換えて、直接ドメイン名でアクセスさせるような事も可能ですが、スマホアクセスだとDNSの設定なども面倒なので、ローカルホストに割り当てられたIPアドレスを調べます。

コマンドプロンプトから、自分のマシンに割り当てられているIPアドレスを調べます。

192.168.10.30

です。

Wireless LAN adapter Wi-Fi:

   接続固有の DNS サフィックス . . . . .: flets-west.jp
   IPv6 アドレス . . . . . . . . . . . .: b3:81db:9879
   一時 IPv6 アドレス. . . . . . . . . .: :73ac:3951:1b4e
   リンクローカル IPv6 アドレス. . . . .: :81db:9879%22
   IPv4 アドレス . . . . . . . . . . . .: 192.168.10.30
   サブネット マスク . . . . . . . . . .: 255.255.255.0
   デフォルト ゲートウェイ . . . . . . .: :8ea0%22
                                          192.168.10.1

applicationhost.config に

<binding protocol=”http” bindingInformation=”*:8493:192.168.10.30″ />

を書き加えます。

            <site name="WebApplication1" id="2">
                <application path="/" applicationPool="Clr4IntegratedAppPool">
                    <virtualDirectory path="/" physicalPath="C:\Users\User\Documents\Visual Studio 2017\Project\webappli" />
                </application>
                <bindings>
                    <binding protocol="http" bindingInformation="*:8493:localhost" />
		    <binding protocol="http" bindingInformation="*:8493:192.168.10.30" />
                </bindings>
            </site>

VisualStudio プロジェクトのプロパティ

プロジェクトのプロパティから web の設定で

プロジェクトのURLを

http://192.168.10.30:8493/

と設定し、「仮想ディレクトリの作成」ボタンを押下

URLの予約

管理者権限で起動したコマンドプロントにおいて、

Microsoft Windows [Version 10.0.19042.1052]
(c) Microsoft Corporation. All rights reserved.

C:\WINDOWS\system32>netsh http add urlacl url=http://192.168.10.30:8493/ user=Everyone

URL 予約を正常に追加しました

を実行します。

スマホからアクセス

デバッグを開始し、LAN内スマホから

http://192.168.10.30:8493/

にアクセスすると、webページが表示できました。

まとめ

上記手順により、同一LAN内スマホから開発中のwebアプリにアクセスが可能になります。

参考にさせて頂いたサイト

http://surferonwww.info/BlogEngine/post/2017/04/23/where-is-applicationhost-config-file-for-iis-express.aspx

https://devadjust.exblog.jp/23066969/

情報をまとめてくださっている方々に感謝