こんにちは、Teams チームの吉野です。
今回は Teams Bot をローカルの Visual Studio でデバッグする方法をご案内いたします。
といってもTeamsに限った話ではないのですが…。
まず、Azure で Web App Bot を作成します。今回はv3のBasic C#（おうむ返しをする）テンプレートにしました。
作成できましたらソースコードをダウンロードします。
Image may be NSFW.
Clik here to view.
ZIPファイルですので任意のフォルダに展開し、 sln ファイルを開きます。
Image may be NSFW.
Clik here to view.
また、[アプリケーション設定]にある AzureWebJobsStorage の値をコピーします（赤い丸の部分をクリックすると値が見れます）
ちなみに AppID とAppPassword(青い部分)も利用しますので、コピーを忘れた人はこちらもコピーしておきます。
Image may be NSFW.
Clik here to view.
Visual Studioで web.config を開き、3つの値を入力します。 MicrosoftAppID と MicrosoftPassword は最初からありますが、Valueは未記入ですので入力します。
AzureWebJobsStorageはキーがありませんので、タグから入力します。
とりあえずこの状態で実行してみましょう。メニューの下にあるIIS Express(Microsoft Edge) をクリックしてデバッグ開始します（ブラウザ名など違う場合がありますが）。
起動すると以下のようにブラウザが起動します。 localhost のポート番号が表示されます。こちらは後ほど利用します。
Image may be NSFW.
Clik here to view.
次にブラウザを起動して、ngrokのサイトにアクセスします。まずはサインアップをクリックし、必要な項目を入力しましょう。
Image may be NSFW.
Clik here to view.
次に実行ファイルをダウンロードし、左メニューのAuth をクリックします。
Image may be NSFW.
Clik here to view.
認証コードが出てきますのでこれをコピーします。
Image may be NSFW.
Clik here to view.
コマンドプロンプトから以下のコマンドを実行します。
ngrok authtoken <取得した認証コード>
ngrok http --host-header=localhost <デバッグ実行でブラウザに表示されたポート番号>
Image may be NSFW.
Clik here to view.
成功すると以下のように表示されます。
Image may be NSFW.
Clik here to view.
最後に Azure ポータルに戻り、エンドポイントを ngrok で表示されたものに変更します。
Image may be NSFW.
Clik here to view.
これでリクエストをローカルに送ることができるようになりました。試しに 「Webチャットでテスト」でメッセージを送ってみましょう。
Image may be NSFW.
Clik here to view.
ローカルでメッセージを受け取っていることが分かります。
もちろん Teams でメッセージをやり取りすることも可能です。
Image may be NSFW.
Clik here to view.
これで、例えばVisual Studioでブレークポイントを貼ればそこで止めることができます。