LoginSignup
10
5

More than 3 years have passed since last update.

【第5/5】Teams bot をローカル (Visual Studio 2019) で開発し、Azure で無料で動かす【その5:Azure にデプロイ編】

Last updated at Posted at 2020-06-01

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

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

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

image.png

5. Azure にデプロイしてみよう

5-1. Azure で Web App 作成

この bot 運用用に作成したリソースグループ 200513_TeamsBot-rg の中に生やしましょう。
+追加」を選びます

image.png

web app で検索します

image.png

検索結果画面から「Web アプリ」を選択します

image.png

作成」を押します

image.png

↓ このような感じで設定項目を埋めていきます

image.png

また、App Service プラン (アプリの載る物理サーバ的なやつ) の項目の「サイズを変更します」を押します。

App Service Plan (アプリの載る物理サーバ的なやつ) は、
料金の高めのものを選ぶとスペック高めのマシン上で bot を動かすことができます。
例えば CPU のコア数が増えたり、RAM も増えたり、「俺専用 VM」を立てられたりします。

今回、全て無料でやりたいのであれば F1 Free plan (無料プラン) を選択しておきましょう。(あまりスペック高くない上に雑居サーバになるのでレスポンスはあまり早くないのですが、お試しで動かすのであればこれで大丈夫だと思います。本番運用には向いていません)

image.png

適用」で、「確認」を押して、作成をします。
すると指定した名前のリソースができるので、デプロイが完了したら見に行ってみましょう。
このような画面になっています↓

image.png

これで、Azure 上に、bot の載る予定の器(Web アプリの受け口)が作成されました。

次は、ここに、ローカルで Visual Studio 2019 で作っていたアプリをデプロイしてみましょう。

5-2. ローカルの Visual Studio から Azure にデプロイ

プロジェクト右クリックから「発行」(publish) を選択します。

image.png

どこにデプロイするか尋ねられるので、先ほど Azure portal 上で作った Web App の上に載せたいですね。

image.png

イラスト6.jpg

そして「発行」ボタンを押します。(右のほうにあります)

image.png

無事に publish が終わると、web ブラウザが立ち上がります。
URL 見ると、ちゃんと Azure にデプロイされていることが分かりますね

image.png

5-3. また Azure 上での設定 (アプリ設定に App ID など環境変数を教えてあげる)

認証を通します。
先ほど Azure portal 上で作成した web app のページで「構成」をクリックします。

アプリケーション設定という画面が出てきます。
ここはアプリケーションの接続文字列など、アプリ設定の値を持ってくれる場所です。

+新しいアプリケーション設定」(英語 UI だと + New application setting)をクリックします。
image.png

Visual Studio で環境変数として secrets.json に保存した MicrosoftAppId の項目を生やします。
(secrets.json はローカル実行時のみ有効な設定ファイルとなっているので、サーバにデプロイしたら、またそのサーバ用に環境変数教えるのやらないといけない)

コピペで「名前」と「値」を埋めたら「OK」を押します。

image.png

MicrosoftAppPassword も同じように、項目を生やします

image.png

忘れずに保存しましょう。
「保存」ボタンを押します。(どうでもいいけどこのフロッピーディスク💾アイコンは、いつまで保存ボタンに使われるのかな、やはりいつか消えるのだろうか…?結構気に入ってるから長生きして欲しい気持ちもある)

image.png

image.png

5-4. 接続先エンドポイント URL 変更

bot チャネル登録の 接続先のエンドポイントの URL を変更します。
今まで ngrok の URL で、ローカル Web サーバを向いていたはずだから、
これを、さっきデプロイした Azure Web App のものに設定します。

image.png

これでローカル Web サーバ落とした後(PCの電源切っても)大丈夫だね

Teams で確認しましょう。
今回、無料プランを使っているので、初回のメッセージはちょっと反応遅いです。
image.png

やった~!

お礼

最後まで読んでいただきましてありがとうございました!

ちなみに、この記事は、オンライン開催された
日本マイクロソフト公式技術カンファレンス『de:code 2020』の、
私の行ったセッション『Azure Bot Services を使って Teams bot を開発する』で発表した内容の記事版でした。

イラスト3.png

Twitter で #decode20 #A02 で感想をツイートして頂けたら大変喜びます! (A02 はセッション ID)
ありがとうございました!

10
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
5