Teams Bot をローカルでデバッグする。

こんにちは、Teams チームの吉野です。
今回は Teams Bot をローカルの Visual Studio でデバッグする方法をご案内いたします。
といってもTeamsに限った話ではないのですが…。

まず、Azure で Web App Bot を作成します。今回はv3のBasic C#（おうむ返しをする）テンプレートにしました。
作成できましたらソースコードをダウンロードします。

ZIPファイルですので任意のフォルダに展開し、 sln ファイルを開きます。

また、[アプリケーション設定]にある AzureWebJobsStorage の値をコピーします（赤い丸の部分をクリックすると値が見れます）

ちなみに AppID とAppPassword(青い部分)も利用しますので、コピーを忘れた人はこちらもコピーしておきます。

Visual Studioで web.config を開き、3つの値を入力します。 MicrosoftAppID と MicrosoftPassword は最初からありますが、Valueは未記入ですので入力します。
AzureWebJobsStorageはキーがありませんので、タグから入力します。

とりあえずこの状態で実行してみましょう。メニューの下にあるIIS Express(Microsoft Edge) をクリックしてデバッグ開始します（ブラウザ名など違う場合がありますが）。
起動すると以下のようにブラウザが起動します。 localhost のポート番号が表示されます。こちらは後ほど利用します。

次にブラウザを起動して、ngrokのサイトにアクセスします。まずはサインアップをクリックし、必要な項目を入力しましょう。

次に実行ファイルをダウンロードし、左メニューのAuth をクリックします。

認証コードが出てきますのでこれをコピーします。

コマンドプロンプトから以下のコマンドを実行します。

ngrok authtoken <取得した認証コード>
ngrok http --host-header=localhost <デバッグ実行でブラウザに表示されたポート番号>

成功すると以下のように表示されます。

最後に Azure ポータルに戻り、エンドポイントを ngrok で表示されたものに変更します。

これでリクエストをローカルに送ることができるようになりました。試しに 「Webチャットでテスト」でメッセージを送ってみましょう。

ローカルでメッセージを受け取っていることが分かります。

もちろん Teams でメッセージをやり取りすることも可能です。

これで、例えばVisual Studioでブレークポイントを貼ればそこで止めることができます。