Azure Bot Service × Bot Framework V4 のはじめかた (2018年12月版) ～ Azure、ローカル動作確認、Azure へのデプロイまで

チャットボットのエンジンをWebアプリ(WebAPI)として開発するためのフレームワーク、Bot Framework とそれをホストする Web サーバー機能を同時に作成できる Azure Bot Service を利用するための "はじめかた" (第一歩) を紹介します。

1. Azure Portal から Azure Bot Service を新規作成
2. 作成した Azure Bot Service の設定確認＆テスト
3. Azure Bot Service のソースコード確認＆ダウンロード
4. Azure Bot Service のソースコードをローカルで動作確認
5. ローカルで編集したソースコードを Azure Bot Service にデプロイ

という一通りの手順になります。

Azure Bot Service とは

祝GA！Azure Bot Service 概略&作成～公開手順 (2017年12月版) をご覧ください。

準備

• Microsoft アカウント & Azure サブスクリプション
• 準備方法 をご覧ください
• C# or Node.js の開発ツール、開発＆稼働環境
• IDE として Visual Studio 2017 (Win/Mac ※無償版のCommunity でOK) または Visual Studio Code (Win/Mac/Linux) など
• Node.js で IDEで稼働環境をインストールしていない場合は、ローカルに Node.js および npm をインストールして準備しましょう
• Bot Framework Emulator
• チャットボットの動作を確認するためのツール (Win/Mac/Linux)。v4.x版を利用しましょう

手順

1. Azure Portal から Azure Bot Service を新規作成
2. 作成した Azure Bot Service の設定確認＆テスト
3. Azure Bot Service のソースコード確認＆ダウンロード
4. Azure Bot Service のソースコードをローカルで動作確認
5. ローカルで編集したソースコードを Azure Bot Service にデプロイ

1. Azure Portal から新規 Azure Bot Service の作成

Azure Portal をブラウザーで開きます。
左端ナビゲーションバーの [＋]をクリックします。(リソースの新規作成)

検索欄に [bot] と入力します。

Web App Bot、Function Bot, Bot Channels Registration という同じ Bot マークのサービスが表示されます。

• Botの新規作成を行うには、Web App Bot (Azure Web App ベース)または Function Bot (Azure Function ベース)を選択します。
• 作成済みの Bot アプリ (Bot Framework のテンプレートなどを用いて作成したもの) を登録するには、Bot Channels Registration を選択します。

今回は Web App Bot を選択、Web App Bot ペインで [作成] をクリックします。

Web App Bot では Bot Framework V3 および V4 を選択可能です。(2018年12月現在、Function Bot は V3 のみになっています)

Bot Service ペインで設定内容を入力します。

• ボット名
  • Bot Channel への登録名 (BotID) になります。Bot Channel の中でユニークになる名前を設定します。
• リソースグループ
  • ここでは新規で作成していますが、作成済みのリソースグループを選択してもOKです。
• 場所
  • Botアプリをホストする Web App のロケーションを選択します。
• 価格レベル
  • ここではF0(無料のプラン)を選択します。
• アプリ名
  • ボット名と同じ名前が自動入力されます。BotアプリをホストするWebサーバーとしての名前になります。azurewebsites.net の中でユニークになる名前を設定します。
• ボットテンプレート
  • クリックしてテンプレートを選択します
  • V4 の C# と Node.js のどちらかを選択、一番シンプルなテンプレートである EchoBot を選択します。
• App Service Plan
  • 新規 (または作成済み) の Web App のプランを選択します。無料の Free Plan を利用可能です。
• Azure Storage
  • 一時的な作業データなどを保存するストレージを新規作成 (または作成済みのものを選択) します。

入力したら、[作成] をクリックして Bot アプリの作成を行います。

「展開が成功しました」というメッセージが表示されたら作成完了です。[リソースに移動] をクリックして、Bot アプリの設定確認とテストを行います。

2. 作成した Azure Bot Service の設定確認＆テスト

作成した Web App Bot を開き、設定ペインを表示します。
設定ペインのメニューから Test in Web Chat をクリックすると、作成した Bot アプリ の動作確認を行うことができます。
V4 EchoBot テンプレートでは、入力した文字をそのまま返す (おうむ返し) が実装されています。また、会話数カウントも合わせて実装されており、reset と入力すると、カウントをリセットします。

3. Azure Bot Service のソースコード確認＆ダウンロード

作成された Bot アプリのソースコードを確認します。
Web App Bot の設定ペインのメニューから ビルド をクリックします。
zipファイルをダウンロード をクリックすると、ソースコードをダウンロードできます。

Azure DevOps や Git などを紐づけて、ソースコード更新→ Azure のデプロイ を自動化することもできます。

すべての App Service 設定 を開き、App Service のメニューから オンラインコードエディターを開く をクリックすると、ブラウザーの別タブでオンラインエディターが表示されます。こちらでコードの確認や修整なども可能です。

ローカルで動作させるための設定 (BotFilePath と BotFileSecret)

作成した Azure Bot Service をローカルで動作させるには、Web サーバー側に自動で設定されている BotFilePath と BotFileSecret 設定値が必要です。

Web App Bot の設定ペインのメニューから App Service 設定 - アプリケーション設定 をクリックします。
ページの中から アプリケーション設定 と書かれた場所を探し、BotFilePath および BotFileSecret の欄をクリックして表示し、値をローカルにコピーしておきます。

BotFilePath は Bot Framework での アプリケーション設定ファイル (*.bot) のパス、BotFileSecret は アクセスするためのシークレットキーになります。

4. Azure Bot Service のソースコードをローカルで動作確認

ダウンロードした zip のソースコードを展開して、ソースコードを確認します。

• C# の場合
  • ソースコードが Visual Studio ソリューションファイルになっているので、EchoBotWithCounter.sln をクリックして Visual Studio 2017 などで開くことができます。必要に応じて nugetパッケージの復元などを行ってください
• node.js の場合
  • ソースコードのフォルダを Visual Studio Code などで開きます。npm install コマンドでライブラリーの取得を行ってください

ローカルで動作させるための設定

README.md に記載されている通り、ローカルで Bot Service アプリを動作させるための設定を行います。

• C# の場合
  • appsettings.json を開き、botFilePath と BotFileSecret を入力して保存します
• node.js の場合
  • .env という名前でファイルを作成し、botFilePath と BotFileSecret を入力して保存します

設定が終わったら、Bot Service アプリを起動します。デフォルトでは http://localhost:3878 が指定されており、ブラウザが起動してページが表示されたら起動完了です。

Bot Framework Emulator からアクセス

Bot Framework Emulator を起動します。Open Bot をクリックし、ソースコードに含まれている <アプリ名>.bot (または BotConfigration.bot) を開きます。BotFileSecret の入力欄で 先ほど Azure Portal で確認した BotFileSecret を入力します。

チャット画面が開き、conversationUpdate event detected という初期(動作確認用)メッセージが表示されたら、無事アクセスできています。メッセージを入力して、おうむ返しに返答されたら動作確認完了です。

5. ローカルで編集したソースコードを Azure Bot Service にデプロイ

アプリを修正して、再度 Azure Bot Service 側にデプロイ(配置します)

• Visual Studio 2017 の場合
  • プロジェクトを右クリックして [発行] をクリックします
  • [発行] の画面で、ソースコードに含まれているプロファイルが読み込まれますので、[発行]をクリックすると、Azure にアプリが配置されます

デプロイパスワード入力欄が表示されるなど、デプロイできない場合は、[発行]の画面で 新しいプロファイルの作成 をクリックします。[発行先の選択] 画面で Azure App Service、既存のものを選択 を選択して [プロファイルの作成] をクリックします。Azure サブスクリプションが紐づけられている アカウントでサインインし、今回作成した Azure Bot Service の App Service を選択します。このプロファイルを利用して再度発行を行えば OK です。