Help us understand the problem. What is going on with this article?

【第3/5】Teams bot をローカル (Visual Studio 2019) で開発し、Azure で無料で動かす【その3:Azure 側の設定編(ボットチャンネル登録)】

この記事では、Teams で動く chat bot を、ローカル (Visual Studio) でデバッグしながら開発する方法を、初心者でも分かりやすいようにスクショ満載でまとめました!

(スクショ満載にした結果、1ページが長くなり過ぎたので、5つに記事を分割します。この記事はそのうちの3つ目です。)

  1. 【第 1/5 回】VS でローカル web サーバ立てる編
  2. 【第 2/5 回】エミュレータ準備編
  3. 【第 3/5 回】Azure 側の設定編(ボットチャンネル登録)【← 今ここ】
  4. 【第 4/5 回】Teams に繋げてデバッグ編
  5. 【第 5/5 回】Azure にデプロイ編

前回では、ローカルで実行されているサーバに、
同じくローカルで動いているエミュレータから接続しましたね。

今度はクライアントをエミュレータから Teams に変えてみましょう。
そのためには Azure 上で色々下準備が必要です。
見ていきましょう

image.png

3. Teams bot をまずローカルで開発(Azure 設定編)

3-1: まずは Azure にログイン

Microsoft Azure のポータルサイト ( https://portal.azure.com/ ) に行きましょう。

サブスクリプション持っていないという方はこちらから無料試用版をアクティベートできます:

3-2: リソースグループを作る

今回の bot 運用用にリソースグループを新たに作りましょう。
「リソースグループ」とは、複数のリソース(インスタンス)をまとめられる、整理整頓用のフォルダのようなものです。

イラスト2.jpg

遷移先のページの左上から「+追加」を選びます

image.png

適当なリソースグループ名を入力します。

image.png

私は 200513_TeamsBot-rg にしました。
(リソースグループのオレオレ命名規則として、最後に -rg を付けるくせがある)

それで、「確認および作成」を押すと、指定した名前でリソースグループが作られます。

image.png

通知の「リソースグループに移動」で、リソースグループに飛びます。
(もしくはトップページの「リソースグループ」を押すとリソースグループ一覧ページに行くので、そこから該当のリソースグループを選んでください)

3-3: ボットチャンネル登録を作る

作ったリソースグループの下に『ボットチャンネル登録』(Bot Channels Registration) を作ります。

ボットチャンネル登録』(Bot Channels Registration) とは、
bot のエンドポイントや
bot のチャンネル (Teams に繋ぐとか Skype に繋ぐとか Facebook messenger に繋ぐとかの設定をしてくれる人) の設定や
その他 bot の各種設定を登録しておく場所です。

↓ 最初に作ったリソースグループ「200513_TeamsBot-rg」の「追加」を押します。
これで、このリソースグループの中に新たにリソースを作成することになります。

image.png

Bot Channel Registration」で「作成」を押します。

image.png

必要な項目を以下のように入力し、
作成ボタンを押します。

image.png

エラー対処

このサブスクリプションに対して、リソースプロパイダー Microsoft.BotService が登録されていません

というエラーが出ることがあります。
(Twitter で質問を頂きました)

そのさいは こちら をお試しください。

ご案内したページ の下の方のポータル画面からやるやり方が一番とっつきやすいと思います。

ボットチャンネル登録のデプロイが終わると

しばらくするとデプロイが終わるので、通知から「リソースに移動」します。(または普通にトップ画面からリソースグループに入ってそこから行っても大丈夫です)

image.png

開いたら、ボットチャンネル登録の画面は以下のようになっています。

イラスト4.jpg

3-4: Azure にエンドポイントを教える

ここで、左のメニューの「設定」をクリックします。

動いている ngrok の https のほうの URL をコピペし、
エンドポイントとして /api/messages で終わる形の URL を入力します。
そして「保存」を押します。

image.png

3-5: Azure との接続情報をメモする

次に、リソースグループへと戻り、
左のメニューから「デプロイ」を選択しましょう。

image.png

こんな画面になります。

image.png

左の「入力」を選びます。
さまざまな環境変数の一覧が載っています。

image.png

この環境変数一覧の中の「appId」と「appSecret」をメモします。

ちなみに、ここの「appId」とは、
Microsoft App ID のことで、
Azure Active Directory (認証・認可のサービス) で管理されているアプリの一意のIDです。

要するに、登録されたアプリに振られた ID です。

3-6: ローカルの web サーバに、Azure との接続情報を教える

Visual Studio の プロジェクト右クリックから「ユーザーシークレットを管理」を選択します。

image.png

secret.json という、空の json ファイルが生えましたね。

image.png

ここでは、ローカルでの開発用の秘密の情報(API key や 接続文字列など)を記録しておく場所になります。
ここに書いておくと、例えば、最初から.gitignore に入っているので、間違って API key を GitHub に大公開ということが無くなったりします。

ということで、こちらに、Azure ポータルから取ってきた「appId」と「appSecret」を記載します。

image.png

↓こんな感じ

secrets.json
{
  "MicrosoftAppId": "00000000-0000-0000-0000-000000000000",
  "MicrosoftAppPassword": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
}

3-7: ローカルの web サーバと Azure が繋がってるかテスト

では、Azure 側から ローカルの web サーバが叩けるかテストしてみましょう。
Visual Studio 2019 で「実行」(IIS Express) します。

立ち上がったら、Azure ポータルの「web チャットでテスト」してみましょう。
(ボットチャンネル登録のページの左メニューの「web チャットでテスト」から行けます。)

image.png

ローカルで動いている bot の web サーバー (ASP.NET Core 製) に、
Azure からメッセージを送って、
ローカルの bot がメッセージを返して、
それが Azure の web chat に表示されました。

3-8: bot を更新してみる(セリフを変えてみる)

ローカルの bot のコードを編集してみて、Azure 経由でもそれがちゃんと反映されるかをテストしてみましょう。

ためしに、ユーザとの対話のコード (./Bots/EchoBot.cs) に ちょまぎょ ( *゚▽゚* っ)З を入れてみます。

image.png

3-9: エミュレータで実行

さっきは web チャットでテストしましたので、今回はエミュレータを使ってテストしてみましょう。

エミュレータに必要な情報を渡してあげます。

image.png

そして実行してみましょう。
すると、意図通りちゃんと ちょまぎょ ( *゚▽゚* っ)З がいることが確認できます。

image.png

やった~

3-10: まとめ

この記事では、Azure を経由して、ローカルのエミュレータなどで動作確認するところまで行きました。

image.png

Next Step

次はいよいよ Teams での動作確認をできるようになりましょう!

  1. 【第 1/5 回】VS でローカル web サーバ立てる編
  2. 【第 2/5 回】エミュレータ準備編
  3. 【第 3/5 回】Azure 側の設定編(ボットチャンネル登録)
  4. 【第 4/5 回】Teams に繋げてデバッグ編【← 次】
  5. 【第 5/5 回】Azure にデプロイ編

次の記事 → https://qiita.com/chomado/items/23c66a975e21265d99ae

chomado
ITエンジニア兼マンガ家の千代田まどか (ちょまど) です。Microsoft 社の Cloud Developer Advocate として、デベロッパーコミュニティの支援を行っています。松屋とゲームとアニメが好きです
https://chomado.com/
microsoft
マイクロソフトのメンバーが最新の技術情報をお届けします。Twitterアカウント(@msdevjp)やYouTubeチャンネル「クラウドデベロッパーちゃんねる」も運用中です。
https://aka.ms/MSFT-Docs-JPN
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした