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

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

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


1. [【第 1/5 回】VS でローカル web サーバ立てる編](https://qiita.com/chomado/items/4de8e1f4e5a76fb20bcd)
1. [【第 2/5 回】エミュレータ準備編](https://qiita.com/chomado/items/b2f1020d598ebd855aa1)
1. [【第 3/5 回】Azure 側の設定編（ボットチャンネル登録）](https://qiita.com/chomado/items/5b1c3da4badd6510905b)
1. [【第 4/5 回】Teams に繋げてデバッグ編](https://qiita.com/chomado/items/23c66a975e21265d99ae) 
1. [**【第 5/5 回】Azure にデプロイ編**](https://qiita.com/chomado/items/abd0c39d21ec6778295a)【← 今これ】

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/85c8002d-4f59-e32e-3012-df2339f34ed7.png)

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

## 5-1. Azure で Web App 作成

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/ea8b91bb-5187-e3b3-2437-35533b5f5d23.png)

`web app` で検索します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/e240b3af-5395-a7fd-df60-8f878f1f2a24.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/fa4e860b-4897-b648-6347-16ff24fd6f47.png)

「`作成`」を押します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/c6e422ad-a8f5-3e65-5b0b-0a55e2e98eb8.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/3fee3a18-0dd4-e4da-8785-78051406946c.png)

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/44586631-9363-947e-2584-606cf6e62fa9.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/44c07cbf-e816-8992-8260-7cb6b59f9ad4.png)

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/7cc07b5a-3ceb-14fa-0e4d-e342367fa36a.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/cd8e3132-1731-e10b-e49a-3fb711fbf72c.png)

![イラスト6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/02a6ac77-4e08-eada-3a11-c377df83f5ed.jpeg)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/2a478c0f-f2e2-ec96-ac14-0b0994c6fa52.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/e04845d7-9fce-403d-d41a-961536b0d54a.png)

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


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

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

「`＋新しいアプリケーション設定`」(英語 UI だと `+ New application setting`)をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/17782366-2095-6e19-0f73-5b342c533e2c.png)



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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/a371ffca-008a-4272-de63-76d35fd58981.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/fb4b1c39-fe6c-d11d-9bac-693ba1c94b31.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/c9fdf4e2-6376-2536-f879-a30a575d0dcd.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b8bbc161-0c6d-da8b-da74-9a6c90ab8a65.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b34254b5-420f-9a83-cf89-44c884f97e31.png)


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

Teams で確認しましょう。
今回、無料プランを使っているので、初回のメッセージはちょっと反応遅いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/858f4270-ef8b-511e-0f06-3dbd743b2db4.png)

やった～！

# お礼

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


ちなみに、この記事は、オンライン開催された
日本マイクロソフト公式技術カンファレンス『[de:code 2020](https://www.microsoft.com/ja-jp/events/decode/2020/default.aspx?WT.mc_id=docs-qiita-machiy)』の、
私の行ったセッション『[Azure Bot Services を使って Teams bot を開発する](https://www.microsoft.com/ja-jp/events/decode/2020session/detail.aspx?sid=A02&WT.mc_id=docs-qiita-machiy)』で発表した内容の記事版でした。

![イラスト3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/15bf29cd-8f8a-c065-e1f7-6aaa9b38bdee.png)

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