どういう記事？

Azure素人の自分がMicrosoft AzureのBot FrameworkとCognitive Serviceと触れ合いながら、難易度も人への接し方も“やさしい”チャットボットを作ってみた際の備忘録の第2部です。どんなチャットボットを作るのかを含め、これまでの手順は第1部にございます。
PowerPointで記録していたものをQiita化してみたものになるので、そんな感じの画像が頻出します。
Qiita初心者なので、書き方が下手でも広い心で許してほしいです。そして全体的にゆるいです。

アジェンダ

以下の5部構成になります。この記事は第2部にあたります。

なお、公式ドキュメントに沿って作りましたので、それらのリンクを張り付けつつ、辿った道筋通りに書いていきます。
その筋の方からすると遠回りだったり野暮ったかったりすると思いますが、ご容赦ください。

2. ボットをAzure（クラウド）にデプロイしてみよう！

第1部で作った赤枠で囲われた部分のソースコードを、Azure（クラウド）上へデプロイしてみます。これによりインターネット経由で、LINEなどからボットのアプリケーションへアクセスできるようになります。

2.1 参考ドキュメント

ボットをデプロイする

今回の作業は公式ドキュメントのボットをデプロイするを参考にしています。

2.2 前提条件

まずは上記リンク内の「前提条件」の部分に従って、以下を準備します。

Microsoft Azure のサブスクリプション
ローカルコンピューターで開発した C#、JavaScript、TypeScript、または Python ボット
最新バージョンの Azure CLI
~~Azure CLI および ARM テンプレートを使い慣れていること~~ ←私は全く使い慣れていませんでしたが、なんとか動くものは作れましたので、同志のみなさん、ご安心ください。きっとなんとかなります。

Microsoft Azure のサブスクリプションの準備

Azureのサブスクリプションを持っている人は飛ばしてください。
持っていない人は、公式ドキュメントのリンクを辿って、Azureの無料アカウント作成ページへ行きます。無料で始めるボタンからMicrosoftアカウントでサインインをします。

学生さんは学生向け無料アカウントを利用できます。こちらですと、上で紹介した大人向けアカウントとは異なり、クレジットカード登録は不要です。そのかわり、登録時に学校のメールアドレスを使うことで、学生であることの確認をしています。

Microsoftアカウントを持っていない人は、下の画面の作成からアカウントを作るところから始めます。画面の案内に従えば、特に問題なく作れるはずです。GitHubアカウントでも大丈夫なようです。

Microsoftアカウントが作り終わったら、作ったアカウントを使って再度無料で始めるボタンからログインし、Azureのサブスクリプションを手に入れるための登録をします。こちらのサイトに手順が詳しく書いてありましたので、こちらを参考にするとよいです。

ローカルコンピューターで開発した C#、JavaScript、TypeScript、または Python ボットの準備

これは第1部で作ってありますので、まだの方はそちらを参照しながら作ってみてください。

Azure CLI および ARM テンプレートを使い慣れていること

これはこれから頑張っていきましょう！

2.3 展開を準備する

ここからは第1部同様、基本的に公式ドキュメント通りに進めればよいので、そちらを見てサクサクできちゃう人はそっちのが早いかと思います。
ただ、超初心者な私は、それでも躓きポイントが多々あったので、心底細かく丁寧にもたもたと書いていきたいと思います。
また、公式ドキュメントの方が、技術的な部分など、詳細に説明をしている部分もあります。こちらはとにかく動くものを作ってみたい！人向けに、そういう部分は大分省略しております。

Azure にログインする

第1部で作った、今はPC上にあるボットアプリをAzure上にデプロイするため、Azure CLIを使って自分のAzure環境へログインします。コマンドプロンプトを起動して以下の通り入力します。

cmd

az login

唐突にブラウザへ勝手に飛ばされて、アカウントを選べと言われると思います。前提条件で無料のAzureサブスクリプションを作るときに使ったMicrosoftアカウントを選んでください。

こんな感じの画面が出てきたらOKです。コマンドプロンプトに戻ってください。

このように、自分のAzureサブスクリプションの情報がわらわらと出てきていればログイン成功です。コマンドプロンプトから自分のAzure環境をいじくることができます。

サブスクリプションを設定する

Azureサブスクリプションを1つしか持っていない人は飛ばしてください。複数持っている人は、今回どのAzureサブスクリプションの環境に対してボットをデプロイするのか指定するため、以下のコマンドを打ちます。

cmd

az account set --subscription "<azure-subscription>"

<azure-subscription>のところには、さっきわらわらと出てきたサブスクリプション情報の中の"name"か"id"部分の文字列を入れます。入力時には両サイドの""も忘れずに。<>は不要です。
使いたいサブスクリプションの情報がわからない場合は、以下のコマンドでログインしているMicrosoftアカウントが利用可能なサブスクリプション一覧が取得できます。

cmd

az account list

ちなみに、今どのサブスクリプションに設定されているかを確認するには、以下のコマンドを使います。

cmd

az account show

アプリケーションの登録を作成する

これ、Azure触ったことない状態だと何をしているんだかよくわからなかったです。公式ドキュメントだと「Azure Active Directory アプリケーションを作成します」とか書いてあるのですが、それが今回のチャットボットと何がつながるのかがわからない…。
難しいことは置いておいて、とりあえずここでは、Azure上にデプロイしたボットとおしゃべりをするために必要な登録くらいに思っておいてください。以下のコマンドを入力します。

cmd

az ad app create --display-name "displayName" --password "AtLeastSixteenCharacters_0" --available-to-other-tenants

それぞれのオプションについて、公式サイトにはまじめな説明が~~わかりにくく~~書いてありますので、ちゃんと知りたい方はそちらを参照ください。

display-name
ボットアプリの名前だと思ってください。なんでもよいです。
password
このボットアプリのパスワードです。後で使いますので忘れないでください。これは 16 文字以上でなければなりません。また、大文字または小文字を 1 文字以上、特殊文字を 1 文字以上含める必要があります。この条件を守ればなんでもよいです。
available-to-other-tenants
これを設定すると、ボットが Azure Bot Service チャンネルと連携できるようになります。つまり、LINEなどのチャットツール経由でボットとおしゃべりができるようになります。

たとえばこんな感じで（値はサンプルです）。

cmd

az ad app create --display-name "YasashiiBotdisplayName" --password "hogehogeP@ssw0rd" --available-to-other-tenants

ちょっと待つと、またわらわらと出力されると思います。ここで、入力したコマンドのすぐ下の塊の中にあるappIdを控えておいてください。後で使います。

ボットアプリケーションサービスを作成する

さてここで、公式サイトでは、以下のように、リソースグループという言葉が出てきます。リソースグループとは、アプリとかデータベースとか仮想マシンとか、そういったAzure上に構築したリソースたちをまとめる箱のようなものです。

つまり、既に作ってある箱にボットアプリを入れますか？それとも新しく箱から作ってそこにボットアプリを入れますか？と聞いています。今回は超初心者向けということで、きっと箱はまだ作ってないでしょうという想定で、新しく箱から作っていく方で進めます。

-------2020/07/06 追記------

2020/07/06現在、どうやら新しく箱（リソースグループ）から作っていく方のコマンドだと、「InvalidTemplate', 'message': "Deployment template validation failed: 'The resource 'Microsoft.Web/serverfarms/' is not defined in the template.」というエラーが出てしまうようです。
公式ドキュメントに記載のコマンドと変わらないはずなので原因は不明なのですが、回避策として以下が確認できましたので記載します。

1.一旦こちらのコマンドでリソースグループだけを作る（以下今回の場合のサンプル）

cmd

az group create -l japaneast -n YasashiiBotgroupName

2.公式ドキュメント中の既存のリソースグループでのARMテンプレートを使用したデプロイの、オプション２：新しいApp Serviceプランで残りのリソースをデプロイ（以下今回の場合のサンプル）。

cmd

az deployment group create --resource-group "YasashiiBotgroupName" --template-file "<hogehoge>\DeploymentTemplates\template-with-preexisting-rg.json" --parameters appId="<fugafuga>" appSecret="<piyopiyo>" botId="YasashiiBotbotId" newWebAppName="YasashiiBotWebAppName" newAppServicePlanName="YasashiiBotAppServicePlanName" appServicePlanLocation="japaneast" --name "YasashiiBotname"

template-fileの<hogehoge>の部分は\DeploymentTemplates\template-with-preexisting-rg.jsonまでの実際のパスになります。<fugafuga>の部分は前の手順で出力されたappIdになります。<piyopiyo>の部分は前の手順で設定したパスワードになります。

これでうまくいったら、価格レベルの確認に進んでOKです。

------2020/07/06 追記ここまで------

この、ボットアプリケーションサービス、とやらを作成するために、いくつかの情報が必要です。具体的に次に入力するコマンドは以下で、<ほげほげ>となっている部分の情報を集めていきます。そのうちいくつかは、今までに入力してきた情報（後で使いますと言っていたもの）になります。たくさんありますが、頑張りましょう。

cmd

az deployment sub create --template-file "<path-to-template-with-new-rg.json>" --location <region-location-name> --parameters appId="<app-id-from-previous-step>" appSecret="<password-from-previous-step>" botId="<id or bot-app-service-name>" botSku=F0 newAppServicePlanName="<new-service-plan-name>" newWebAppName="<bot-app-service-name>" groupName="<new-group-name>" groupLocation="<region-location-name>" newAppServicePlanLocation="<region-location-name>" --name "<bot-app-service-name>"

まずはオプション（--hogehoge、となっているもの）です。

template-file
第1部で作ったチャットボットのプロジェクトのフォルダ配下に、DeploymentTemplates というフォルダがあります。その中にある template-with-new-rg.json というファイルのパスを指定します。絶対パスでも相対パスでもOKですが、ここでは絶対パスで指定します。
location
世界各地にあるAzureのデプロイ先のうち、どこにデプロイしますか？ということです。az account list-locations というコマンドでデプロイ先一覧が出てきます。このうちのname部分を入れます。利用者と近いところを選ぶことが多いので、今回は東日本を示す japaneastとします。
name
ボットアプリケーションサービスの名前です。なんでもよいです。

次にパラメータ(hugahuga=、となっているもの）の説明です。

appId
後で使います、と言っていたものその1です。アプリケーションの登録を作成するの作業で、コマンドをいれたらわらわら出てきた情報の中の一つです。
appSecret

後で使います、と言っていたものその2です。アプリケーションの登録を作成するの作業で設定したパスワードです。
botId
なんでもよいのですが、世界で一つの一意なIDにしないといけません。
botSku
ボットチャンネル登録のSKU。SKUというのは、価格プランのようなもので、このプランだと〇〇の機能を××回まで使えるよ、と言ったような定義のことです。ここでは公式ドキュメント通りF0のままで進めます。
newAppServicePlanName
なんでもよいです。ボットアプリケーションを作成すると、アプリケーションプラン（アプリを実行するための一連のコンピューティングリソースの定義）というものも作成されるのですが、その名前です。
newWebAppName
なんでもよいです。ボットアプリケーションサービスの名前です。
groupName
なんでもよいです。作成するリソースグループ（箱）の名前です。
groupLocation
リソースグループ（箱）のデプロイ先です。az account list-locationsというコマンドのnameから選びます。今回は東日本japaneastにします。
newAppServicePlanLocation
アプリケーションプランのデプロイ先です。az account list-locationsというコマンドのnameから選びます。今回は東日本 japaneastにします。

このあたりで、何度も何度も名前っぽいものをつけさせられて混乱してくるかと思います（私はそうでした）。一体これらのコマンドで、何が生み出されて、それぞれどういうリソースなのか、整理してみました。各リソースの名前は、今回私が使っているサンプル例です。

ちなみにこの図の通りにコマンドを打つとこうなります。template-fileの<hogehoge>の部分は\DeploymentTemplates\template-with-new-rg.jsonまでの実際のパスになります。<fugafuga>の部分は前の手順で出力されたappIdになります。<piyopiyo>の部分は前の手順で設定したパスワードになります。

cmd

az deployment create --template-file "<hogehoge>\DeploymentTemplates\template-with-new-rg.json" --location japaneast --parameters appId="<fugafuga>" appSecret="<piyopiyo>" botId="YasashiiBotbotId" botSku=F0 newAppServicePlanName="YasashiiBotAppServicePlanName" newWebAppName="YasashiiBotWebAppName" groupName="YasashiiBotgroupName" groupLocation="japaneast" newAppServicePlanLocation="japaneast" --name "YasashiiBotname"

価格レベルの確認

App ServiceのプランがS1（無料じゃないやつ）になってしまって気になるようであれば、デプロイ後、以下の手順で無料のやつに変更してください。

1.リソースグループ内の「App Serviceプラン」を選択

2.左の操作メニューから「スケールアップ」を選択

3.上のタブで「開発/テスト」を選択し、「F1」を選択し、「適用」をクリック

ちなみにBot Serviceの価格プランの選択はこちらから変更、確認できます。

1.リソースグループ内の「ボットチャンネル登録」を選択

2.左の操作メニューから「Bot Serviceの料金」を選択し、「F0 Free」であることを確認、または変更したい場合は「F0 Free」を選択した上で「選択」をクリック

デプロイ用のコードを準備する

-------2020/07/06 追記------
さて、またもやこの部分、そのままやると「Zip deployment failed. 」というエラーが出てしまうようです…。
公式ドキュメントに沿って進めることを軸にしておりましたが、ちょっとうまくいかないことが多いようなので、うまくいかない場合、この部分は私の後半記事4. Twitterからつぶやきをとってきてみよう！の2.7 azureへ再デプロイするの手順でやってみてください。(こっちのやり方の方がずーっとらくちんですしね、実は…）

うまくいきましたら2.5 Webチャットでのテストへ進んでOKです。

-------2020/07/06 追記ここまで------

ここまでで、アプリをデプロイする場所がAzure上（クラウド）に用意できましたので、次はPC上（ローカル）にあるソースコードを、Azure上（クラウド）に持っていくために準備します。第1部からC#で作ってきているのでC#の例で進めます。

公式ドキュメント通りだと以下の通りです。

最初、私にはよく理解できませんでした。理解できる方はそのまま進めてください。

ここで言っているのは.csprojファイルへのパスを--code-dirと--proj-file-pathの引数で表せ、です。そして例で出ている--code-dirの "." と--proj-file-pathの"MyBot.csproj"は、実行すると"./MyBot.csproj"になるよ、と言っています。

なのでまず、自分の作ったプロジェクト内でcsprojファイルの場所まで、コマンドプロンプトを使ってcdコマンドで移動します。

ここで、先ほどのコマンドのMyBot.csprojの部分を自分のボットのプロジェクト名に変更して実行します。今回の場合はこのような感じになります。

cmd

az bot prepare-deploy --lang Csharp --code-dir "." --proj-file-path "YasashiiBot.csproj"

成功するとTrueと返ってきます。そしてさきほどdirコマンドを実行した際にはなかった、.deploymentというファイルができていることを確認します。

次に、コードディレクトリを手動でzip圧縮します。公式ドキュメントには以下の説明がありますが、ここも私は最初よくわかりませんでした。

ここで大切なのは以下の文章です。

これらが何を言っているかというと、csprojファイルのあるフォルダ内で全てのファイルを選択してzip圧縮せよということです。つまりは以下の状態でzip圧縮です。

2.4 コードを Azure にデプロイする

さて、ようやくデプロイです。公式ドキュメントのコマンドに必要な修正を加えて実行します。

cmd

az webapp deployment source config-zip --resource-group "<resource-group-name>" --name "<name-of-web-app>" --src <project-zip-path>

resource-group
ボットアプリケーションサービスを作成するの作業の際にgroupNameで登録した名前（既存のリソースグループを使った人はそのリソースグループの名前）を入れます。
name
ボットアプリケーションサービスを作成するの作業の際にnewWebAppNameで登録した名前を入れます。
src
デプロイ用のコードを準備するで作ったzipファイルのパスを入れます。もしzipファイルと同じ場所にいるなら、"./"にzipファイルの名前を足したものを入れればOKです。私はzipファイルの名前をcode.zipにしたので、以下のコマンドになります。

cmd

az webapp deployment source config-zip --resource-group "YasashiiBotgroupName" --name "YasashiiBotWebAppName" --src ./code.zip

このような結果が返ってくれば成功です。Azure上にボットアプリがデプロイされました！

※ソースコード変更するたびにこの手順やるの！？めんどくさっ！！と思ったかと思いますが、今回はAzure CLIの紹介も兼ねて、公式ドキュメント通りの手順でやりました。以降のソースコードのアップロードは、Visual Studioから直接やりますので、ずっと簡単です。ご安心ください。

2.5 Webチャットでのテスト

それでは、Azure上にデプロイされたボットとおしゃべりをしてみましょう。
Azure Portalへアクセスし、Azureサブスクリプションを作成したMicrosoftアカウントでログインして、リソースグループをクリックします。

今回ボットをデプロイしたリソースグループを選択し、ボットチャンネル登録をクリックします。

左側のボット管理からWebチャットでテストをクリックします。

少し待つと、ボットから「Hello and welcome!」という最初のメッセージが来ます。こちらからも何か話しかけてあげてください。第1部でBot Framework Emulatorで試したときと同様に、「Echo:hogehoge」の形で返答があるはずです。

おめでとうございます！チャットボットアプリをPC上（ローカル）からAzure上（クラウド）へデプロイすることができました！

以降の工程について

以降の工程はこのようになっています。
次回は、今回デプロイしたボットアプリに、AzureのAIサービスであるCognitive Serviceを使って、テキスト分析の機能を組み込んでみたいと思います。

やさしいチャットボットのつくりかた -2.ボットをAzure（クラウド）にデプロイしてみよう！