Bot Framework Composer でボット開発 : その 9 ボットの公開

[前回](https://qiita.com/kenakamu/items/750d6a0de2da05e8851d)は HTTP リクエストを使って他のサービスと連携する方法を見ていきました。だいぶボットも形になってきたので、この辺でボットを公開してみましょう。

# Azure への展開

Bot Framework Composer で開発したボットは Azure へ数ステップで公開できます。 Azure へボットを展開するためには、まず Azure リソースの作成を行います。

## 前提条件

- Azure サブスクリプション
- [Azure CLI](https://docs.microsoft.com/ja-jp/cli/azure/install-azure-cli?view=azure-cli-latest)
- [PowerShell 7](https://docs.microsoft.com/ja-jp/powershell/scripting/install/installing-powershell?view=powershell-6)
- LuBuild: 以下コマンドでインストール

```shell
npm install -g https://botbuilder.myget.org/F/botbuilder-declarative/npm/lubuild/-/1.0.3-preview.tgz
```
また最新の botframework-cli のインストールも実行してください。

```shell
npm i -g @microsoft/botframework-cli
```

## Azure リソースの作成

Bot Framework Composer は以下のリソースを作成します。

- ボットチャンネル登録: ボットと LINE や Messenger などのクライアントをつなぐサービス
- App Service プラン: ボットをホストする App Service 用のプランを設定
- App Service: ボットをホストするサービス
- Application Insights: ボットの利用状況やリソースをモニタリング
- Azure Cosmos DB: ボットのメモリオブジェクト保存用
- ストレージアカウント: ボットとユーザーのやり取り保存用
- Cognitive Services: LUIS 用

1\. 設定メニューより「Publish」選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/59de1ea7-a276-dba9-d8db-cdc21b5fe92d.png)

2\.「Create Azure Resources」をクリックし、設定を入力。「Next」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/6ad9c17d-6797-d634-042e-f16388e11742.png)

3\. 「Copy to Clipboard」をクリックしてコマンドをコピー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/dd7acbc5-a861-022e-afcb-05d3cc700324.png)

4\. コマンドプロンプトか PowerShell でコマンドを実行。5 分から 10 分程度かかる。結果は後程使うため保存しておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/77a59f9b-5e54-1e2a-a551-2f358f0c7fd5.png)

5\. スクリプトの実行が完了したら [Azure ポータル](https://portal.azure.com) で作成したリソースを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/a915858c-f5e2-db92-5e15-ae2b0fa29123.png)

6\. 検証中はコストがかからないよう、App Service プランを F1 に変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/74f1d371-1840-7dc6-daaa-45b47c8a4d20.png)

## ボットの展開

1\. リソースの準備が完了したら、ウィザードを進めて展開用のスクリプトを取得。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/6534d0d3-95a3-577f-8034-a4f6023228ec.png)

2\. コマンドプロンプトか PowerShell でコマンドを実行。LUIS モデルのビルドやボットアプリのバイナリが Azure のアップロードされる。

## テスト

展開が無事されたか確認します。

1\. [Azure ポータル](https://portal.azure.com)よりボットチャンネル登録を開き、「Web チャットでテスト」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/1cd8b45e-05ea-4eea-bbb6-075722ffcba2.png)

2\. 登録や記事取得など確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/345d7ed5-dc9c-b0b8-e2c5-22df905dcab7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/a75baf15-0ab1-8d6f-a0ef-178e2a57f344.png)

# クライアントからの接続

今回はエミュレーターと LINE から接続してみます。

## エミュレーター

1\. ボットチャンネル登録の「設定」より、「メッセージングエンドポイント」のアドレスをコピー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/167a72d2-1dc3-6609-8f5c-e8badf48fe06.png)

2\. Bot Framework エミュレーターを起動して「Open Bot」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/b36c729e-da4a-e39a-f5c7-ef055d7f0f01.png)

3\. 取得したアドレスを入力。「Microsoft App ID」と「Microsoft App Password」は展開時に取得した値を指定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/777ee7ab-b643-706c-677e-9f8b15cb92c0.png)

4\.「Connect」をクリックして動作を確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/7ab30e0a-47c9-8bb8-9847-18cc4bb2114a.png)

## LINE 

次に LINE ボットと接続してみます。

1\. [LINE 開発者ポータル](https://developers.line.biz/ja/) よりプロバイダーを選択。プロバイダーが無い場合は画面に沿って作成。

2\.「新しいチャネル作成」より「Messaing API」を追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/50b5c5ee-63f3-7872-4c9f-945c03602390.png)

3\. ウィザードに従ってチャネルを登録。登録後、「チャネル基本設定」タブから「チャネルシークレット」をコピー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/c1baffe0-9ac1-762b-6853-f5d349a8fcdc.png)

4\.「Messaging API 設定」より「チャネルアクセストークン」を発行してコピー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/314ae31c-c3d9-b361-0675-9b71281d20b8.png)

5\. Azure ポータルに戻り、ボットチャンネル登録より「チャンネル」を選択。LINE をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/a2885845-630c-4e35-afed-f85d93d862d9.png)

6\. 取得したキーを設定し、コールバックアドレスをコピーして、「保存」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/5c3da8ce-5a83-9830-1699-62cd402ebb40.png)

7\. LINE 開発者ポータルに戻り、取得したコールバックアドレスを設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/ee699e36-63ab-e3c8-62f8-79639f600489.png)

8\. その後表示される「Webhook の利用」を有効にする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/e8af179c-6af3-718d-6356-08d333e908f2.png)

9\. 応答メッセージ右にある「編集」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/b22fcdaf-97ea-d2b1-d8ba-09b828a68401.png)

10\. Greeting message と Auto-response を無効に設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/08ad49ca-9b89-2e12-db5e-6cbab419be1e.png)

11\. LINE クライアントよりボットを QR で読み込んで追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/0337975d-ed2c-9684-c05e-1ab5925c7654.png)

12\. 動作の確認。※以下画像はデスクトップアプリで検証したもの
<img width=300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/3b8d6b30-0221-3637-7309-519df8501846.png"/>

# まとめ

Azure サブスクリプションや各種ツールなど事前の要件を満たしていれば、数ステップで公開でき、また複数のチャネルにもつながることが確認できました。作成したボットが実際のクライアントで動作するとちょっと嬉しいです。

[次の記事へ](https://qiita.com/kenakamu/items/51cac6c6eb08ba492c91)
[目次へ戻る](https://qiita.com/kenakamu/items/6dc043cfc1f199032883#bot-framework-composer)