ngrok を ASP.NET で使う (Debug と Capture)

昨今の WebHook や BOT 開発のように、インターネット上で Inbound 呼び出しされる Web アプリの Debug や HTTP Protocol (Raw) Capture をする場合に欠かせない ngrok を ASP.NET と組み合わせて使う場合に必要な設定と動作確認方法を簡単に紹介する。

ASP.NET プロジェクトの設定

ngrok を使うには、まず、ASP.NET のプロジェクトに以下の設定をおこなっておく。

まず、Visual Studio のプロジェクトのプロパティで、[すべてのユーザーにサーバー設定を適用] (Apply server settings to all users) が選択されていることを確認する。(既定では選択されているはず)

apply_settings

開いている Visual Studio ソリューションのフォルダーの .vs\config にある applicationhost.config (IIS Express が使用) を開き、下記の binding を追加しておく。

<configuration>
  . . .

  <system.applicationHost>
    . . .

    <sites>
      . . .

      <site name="WebApplication1" id="2">
        <application path="/" applicationPool="Clr4IntegratedAppPool">
          <virtualDirectory path="/" physicalPath="C:\Demo\WebApplication1\WebApplication1" />
        </application>
        <bindings>
          <binding protocol="http" bindingInformation="*:60587:localhost" />
          <binding protocol="http" bindingInformation="*:60587:*" />
        </bindings>
      </site>
      . . .

ngrok の実行と動作確認

上記の ASP.NET Web アプリケーションを localhost で Debug 実行したら、ngrok をダウンロード (および展開) して、コマンド プロンプトから下記の通り実行する。(60587 は、この ASP.NET Web アプリケーションが実行されている IIS Express でのポート番号)
特に ASP.NET では、Host ヘッダーをちゃんと指定しないと Bad Request (400) になるので、下記の通り指定する。

ngrok http 60587 --host-header="localhost:60587"

上記の実行結果として下記の通り表示されるが、これは、インターネット上の http://ae8b8019.ngrok.io のアドレスが Tunnel されて http://localhost:60587 に行くよ、という意味。

Tunnel Status                 online
Version                       2.0.25/2.1.1
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://ae8b8019.ngrok.io -> localhost:60587
Forwarding                    https://ae8b8019.ngrok.io -> localhost:60587

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

そこで、あとは、ブレークポイントを置いて、http://ae8b8019.ngrok.io に接続すると、Tunnel されてきて、ちゃんとブレークポイントで止まる。

HTTP Capture

Web ブラウザを使って上記出力の http://127.0.0.1:4040 (http://localhost:4040) を表示すると、下図の通り HTTP Protocol (Raw) を Capture できる。
WebHook や BOT で、どのような request が来ているか簡単に確認可能だ。

HTTP_Capture

BOT 開発のように双方向連携をおこなうものは、この ngrok と Fiddler を一緒に使えば、inbound と outbound の双方がキャプチャーできるので、最強のデバッグ環境を手に入れることができる。

 

広告