Visual Studio で開発中の Web アプリをスマートフォンから動作確認するのに ngrok を使う

Windows OS 上で Visual Studio を使っての、Web アプリ開発の話。

このような開発環境では、通常、Visual Studio から自動起動された IIS Express によってこの Web アプリがホストされる。

この開発環境内で PC ブラウザを起動し、開発中の Web アプリの URL ― 一般に "http://localhost:56789/" のような ― を開いて試験実行/動作確認をすることになる。

さらに昨今は、スマートフォン実機のブラウザからもこの開発中の Web アプリにアクセスして試験実行し、スマートフォン上でも正しく動作するか確認することが多い。

しかしスマホから見えるようにする手間が...

さて、上記のようなローカル開発環境で開発中の Web アプリにスマートフォン実機からアクセスするには、まずは同一 LAN 内に立てた WiFi アクセスポイントにスマートフォンを接続する。

その上で、"http://(開発機のホスト名):56789/" といった URL をスマートフォンのブラウザで開くこととなる。

しかしセキュリティ上の観点からであろう、Visual Studio による Web アプリ開発においては、その Web アプリは localhost (127.0.0.1 及び ::1) にしかバインドされていない。

つまり既定では開発機の "外" からは接続できないように構成されている。

これを開発機の外からでも接続できるようにするには、微妙に面倒くさい。
概ね以下の手順を踏む必要がある。

• IIS Express に対する XML 形式の設定ファイルである applicationHost.config をエディタで編集し、開発機ホスト名でのバインドを追加
• 開発機ホスト名での URL アクセスをユーザーに許可 (Visual Studio を管理者モードで起動するならば不要)
• Windows OS のファイヤーウォールで、開発中の Web アプリのポートでの受信を許可

具体的な手順は下記などが詳しい。

しばやん雑記 - IIS Express で仮想サイトに複数のホスト名を割り当てる
http://blog.shibayan.jp/entry/20130306/1362572283

上記、各手順はそうたいした手間ではないけれども、どうにも微妙な面倒を感じる。

おまけに、URL アクセス制御やファイヤーウォールの許可を、ちゃんとこまめに都度元に戻すのであれば、この微妙な手間が倍増である。

そこで ngrok

ということで最近よく使うようになったのが "ngrok" というサービス。

ngrok
https://ngrok.com/

"ngrok" とは、ある種の "リバースプロキシ" サービスとでも言えばよいだろうか。

Web アプリ開発時などローカルループバックでリッスンしているような Web サーバーに対し、ngrok が提供する専用のプログラムを同じマシン上で起動すると、このローカル環境の Web サーバーを、ngrok 提供のインターネット上の URL に "中継" してくれるのだ。

ネットで検索すると、ngrok についての記事がわんさか見つかるので、詳しくはそれら記事も参照されたし。

https://www.google.co.jp/search?q=ngrok

使ってみる

ngrok は、ずばりサービス名と同じ名前の ngrok コマンドを提供している。
これをダウンロード・インストールし、PATH が通っている状態で、コマンドプロンプトから以下のように ngrok コマンドを実行する。

> ngrok http 54090 -host-header=localhost

第 1 引数と第 2 引数がローカルで実行中の Web アプリのプロトコルとポート番号。
第 3 引数は host 要求ヘッダ値の書き換え指定 (詳細後述) である。

実行すると下図のような画面が表示される。上図のようにコンソール上に表示されているとおり、これで http://e1b0d393.ngrok.io/ にインターネット上からアクセスすると、そのアクセスを ngrok が中継して、現在開発中の Web アプリにアクセスできるのだ。
※この URL "http://～.ngrok.io" のサブドメイン部分は、ngrok コマンドを実行するたびに毎回、ランダムに変わる。

これでお手軽にスマホ (に限らないけど) から動作確認ができるというものだ。

終了させるには、このコンソール内で Ctrl + C を押せばよい。
ngrok コマンドは終了し、先の URL にアクセスしても無効となる。

-host-header オプションについて補足

さて、先の ngrok コマンドの説明で第3引数に「-host-header=localhost」を追加した。
これについて説明を。

ブラウザから「http://e1b0d393.ngrok.io/」にアクセスした際、その HTTP 要求に含まれる Host 要求ヘッダには「e1b0d393.ngrok.io」と書かれていることになる。

ところが、Visual Studio で Web アプリ開発時の IIS Express の構成では、Host ヘッダが 「localhost」 でないと「おっと、これは "自分" 宛ての要求じゃないな」と判断してしまう。
その結果、HTTP 400 Bad Request「Invalid Hostname」を返してしまうのだ。

そこで ngrok 側にて、中継の際に Host 要求ヘッダ値を指定の値 (このケースでは "localhost" ) に書き換えるのが「-host-header=」オプションである。

まとめ

さて、毎回ランダムな URL になるとはいえ、LAN 内にとどまらずインターネット上に開発中の Web アプリを公開するということは、それなりのリスクはあるかもしれない。

とはいえ、必要になったらコンソールから ngrok コマンドを叩くだけで、スマホから容易にアクセスできるというのも魅力的だ。

ngrok は無償から利用可能。
毎回ランダムな URL ではなく固定したり、1度に複数の "中継" をしたり、といった使い方をしたくなったら有償プランに移行すればよい。

以上、インターネット上に公開されているという点はしっかり考慮しつつ、リスクとメリットを勘案して適宜利用するとよいと思う。