検索
リンク
タグ
ASP.NET
.NET
ASP.NET MVC
F#
Visual Studio
Azure
ASP.NET Core
ライトニングトーク
Plone
AJAX
Selenium
C#
jQuery
ADO.NET Entity Framework
SQL Server
JavaScript
LINQ
WebMatrix
EFCore
Fizz-Buzz
カテゴリ
最新の記事
最新のコメント
記事ランキング
最新のトラックバック
以前の記事
2022年 12月 2022年 11月 2022年 10月 2022年 09月 2022年 08月 2022年 07月 2022年 06月 2022年 05月 2022年 04月 2022年 03月 2022年 02月 2022年 01月 2021年 12月 2021年 11月 2021年 10月 2021年 09月 2021年 08月 2021年 07月 2021年 06月 2021年 05月 2021年 04月 2021年 03月 2021年 02月 2021年 01月 2020年 12月 2020年 11月 2020年 10月 2020年 09月 2020年 08月 2020年 07月 2020年 06月 2020年 05月 2020年 04月 2020年 03月 2020年 02月 2020年 01月 2019年 12月 2019年 11月 2019年 10月 2019年 09月 2019年 08月 2019年 07月 2019年 06月 2019年 05月 2019年 04月 2019年 03月 2019年 02月 2019年 01月 2018年 12月 2018年 11月 2018年 10月 2018年 09月 2018年 08月 2018年 07月 2018年 06月 2018年 05月 2018年 04月 2018年 03月 2018年 02月 2018年 01月 2017年 12月 2017年 11月 2017年 10月 2017年 09月 2017年 08月 2017年 07月 2017年 06月 2017年 05月 2017年 04月 2017年 02月 2017年 01月 2016年 12月 2016年 11月 2016年 10月 2016年 09月 2016年 08月 2016年 07月 2016年 06月 2016年 05月 2016年 04月 2016年 03月 2016年 02月 2016年 01月 2015年 12月 2015年 11月 2015年 10月 2015年 09月 2015年 08月 2015年 07月 2015年 05月 2015年 04月 2015年 03月 2015年 02月 2015年 01月 2014年 12月 2014年 11月 2014年 10月 2014年 09月 2014年 08月 2014年 06月 2014年 04月 2014年 03月 2014年 02月 2014年 01月 2013年 12月 2013年 10月 2013年 09月 2013年 08月 2013年 07月 2013年 06月 2013年 05月 2013年 04月 2013年 03月 2013年 02月 2013年 01月 2012年 12月 2012年 11月 2012年 10月 2012年 09月 2012年 08月 2012年 07月 2012年 06月 2012年 05月 2012年 04月 2012年 03月 2012年 02月 2012年 01月 2011年 12月 2011年 11月 2011年 10月 2011年 09月 2011年 08月 2011年 07月 2011年 06月 2011年 05月 2011年 04月 2011年 03月 2011年 02月 2011年 01月 2010年 12月 2010年 11月 2010年 10月 2010年 09月 2010年 08月 2010年 07月 2010年 06月 2010年 05月 2010年 04月 2010年 03月 2010年 02月 2010年 01月 2009年 12月 2009年 10月 2009年 09月 2009年 07月 2009年 06月 2009年 05月 2009年 04月 2009年 03月 2009年 02月 2009年 01月 2008年 12月 2008年 11月 2008年 10月 2008年 09月 2008年 08月 2008年 07月 2008年 06月 2008年 05月 2008年 04月 2008年 03月 2008年 02月 2008年 01月 2007年 12月 2007年 11月 2007年 04月 2007年 03月 2007年 02月 2007年 01月 2006年 11月 2006年 10月 2006年 09月 2006年 08月 2006年 07月 ファン
ブログジャンル
画像一覧
|
2016年 04月 14日
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 で仮想サイトに複数のホスト名を割り当てる 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 要求ヘッダ値の書き換え指定 (詳細後述) である。 実行すると下図のような画面が表示される。 ![]() ※この 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度に複数の "中継" をしたり、といった使い方をしたくなったら有償プランに移行すればよい。 以上、インターネット上に公開されているという点はしっかり考慮しつつ、リスクとメリットを勘案して適宜利用するとよいと思う。
by developer-adjust
| 2016-04-14 20:05
| Web系一般
|
Comments(0)
|
ファン申請 |
||