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

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

# アジェンダ
以下の5部構成になります。この記事は第2部にあたります。

1. [Bot Frameworkでチャットボットを作ってみよう！](https://qiita.com/miokawa/private/6f1a3e480580e1e29abc)
2. [ボットをAzure（クラウド）にデプロイしてみよう！](https://qiita.com/miokawa/private/c71f9f4b62ce2b1c2864)**←イマココ**
3. [Cognitive Serviceでテキスト分析をしてみよう！](https://qiita.com/miokawa/private/cdb243401fe3c8d9d583)
4. [Twitterからつぶやきをとってきてみよう！](https://qiita.com/miokawa/private/eb9f16220a36f65d7098)
5. [LINE経由でボットと話してみよう！](https://qiita.com/miokawa/private/c6f0b550f8fa41a23228)

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

# 2. ボットをAzure（クラウド）にデプロイしてみよう！
[第1部](https://qiita.com/miokawa/private/6f1a3e480580e1e29abc)で作った赤枠で囲われた部分のソースコードを、Azure（クラウド）上へデプロイしてみます。これによりインターネット経由で、LINEなどからボットのアプリケーションへアクセスできるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/fd5397ac-92f4-db9a-5e2d-fc23ace6c6a2.png)

## 2.1 参考ドキュメント
##### ボットをデプロイする
今回の作業は公式ドキュメントの[ボットをデプロイする](https://docs.microsoft.com/ja-jp/azure/bot-service/bot-builder-deploy-az-cli?view=azure-bot-service-4.0&tabs=csharp)を参考にしています。

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

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

#### Microsoft Azure のサブスクリプションの準備
Azureのサブスクリプションを持っている人は飛ばしてください。
持っていない人は、公式ドキュメントのリンクを辿って、[Azureの無料アカウント作成ページ](https://azure.microsoft.com/ja-jp/free/)へ行きます。**無料で始める**ボタンからMicrosoftアカウントでサインインをします。

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

Microsoftアカウントを持っていない人は、下の画面の**作成**からアカウントを作るところから始めます。画面の案内に従えば、特に問題なく作れるはずです。GitHubアカウントでも大丈夫なようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/0c43a06f-acc3-1959-b090-f684a71ad7ae.png)



Microsoftアカウントが作り終わったら、作ったアカウントを使って再度**無料で始める**ボタンからログインし、Azureのサブスクリプションを手に入れるための登録をします。[こちら](https://cloud.nissho-ele.co.jp/blog/azure_registration2020/)のサイトに手順が詳しく書いてありましたので、こちらを参考にするとよいです。

#### ローカル コンピューターで開発した C#、JavaScript、TypeScript、または Python ボットの準備
これは[第1部](https://qiita.com/miokawa/private/6f1a3e480580e1e29abc)で作ってありますので、まだの方はそちらを参照しながら作ってみてください。

#### 最新バージョンの Azure CLI
このあとPC上（ローカル）にある第1部で作ったアプリをAzure（クラウド）上へデプロイするために、いくつかコマンドを打つのですが、それらを使えるようにするため、Azure CLIをインストールします。
[公式サイトのリンク](https://docs.microsoft.com/ja-jp/cli/azure/?view=azure-cli-latest)から、自分の環境にあったリンクへ飛んでインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/633467bb-3b3e-8ae7-ce85-4ca3da628f16.png)


Windowsの場合は、**MSIインストーラーのダウンロード**ボタンからmsiインストーラーをダウンロードして、出てくる内容に従って淡々とインストールをすればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/b13e34a1-4fcc-d83f-d534-1a1a8c8f99bf.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/c590c037-a94b-e3ab-1ae0-cbe0f0c5f64a.png)

Macの場合は**Homebrewを使ったインストール**が紹介されています。Homebrewが使える状態であれば、installコマンドを一つ打つだけで、Azure CLIが使えるようになります。
<img width="783" alt="スクリーンショット 2020-04-04 17.47.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/132ca997-9da7-c036-09b8-df8cad2b7d31.png">



#### Azure CLI および ARM テンプレート を使い慣れていること
これはこれから頑張っていきましょう！


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

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

```:cmd
az login
```
唐突にブラウザへ勝手に飛ばされて、アカウントを選べと言われると思います。前提条件で無料のAzureサブスクリプションを作るときに使ったMicrosoftアカウントを選んでください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/7d4c344b-9fab-911e-2f92-da44d6fcf76e.png)
こんな感じの画面が出てきたらOKです。コマンドプロンプトに戻ってください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/dcc06925-c689-7c11-99c4-250735c6d4f2.png)

このように、自分の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
```

それぞれのオプションについて、[公式サイト](https://docs.microsoft.com/ja-jp/azure/bot-service/bot-builder-deploy-az-cli?view=azure-bot-service-4.0&tabs=csharp#3-create-the-application-registration)にはまじめな説明が~~わかりにくく~~書いてありますので、ちゃんと知りたい方はそちらを参照ください。

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/86dcd938-4f4f-ce16-09a6-c69621219116.png)

#### ボット アプリケーションサービスを作成する
さてここで、[公式サイト](https://docs.microsoft.com/ja-jp/azure/bot-service/bot-builder-deploy-az-cli?view=azure-bot-service-4.0&tabs=csharp#4-create-the-bot-application-service)では、以下のように、**リソースグループ**という言葉が出てきます。リソースグループとは、アプリとかデータベースとか仮想マシンとか、そういったAzure上に構築したリソースたちをまとめる箱のようなものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/89fa4b62-a6c4-d3b0-4b6b-c36b30124c9a.png)

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

<font color="Red">**-------2020/07/06 追記------**</font>

**2020/07/06現在、どうやら[新しく箱（リソースグループ）から作っていく](https://docs.microsoft.com/ja-jp/azure/bot-service/bot-builder-deploy-az-cli?view=azure-bot-service-4.0&tabs=csharp#deploy-via-arm-template-with-new-resource-group)方のコマンドだと、「InvalidTemplate', 'message': "Deployment template validation failed: 'The resource 'Microsoft.Web/serverfarms/<newAppServicePlanNameで指定したAppServicePlan名>' is not defined in the template.」というエラーが出てしまうようです。
公式ドキュメントに記載のコマンドと変わらないはずなので原因は不明なのですが、回避策として以下が確認できましたので記載します。**

**1.一旦[こちら](https://docs.microsoft.com/en-us/cli/azure/group?view=azure-cli-latest#az-group-create)のコマンドでリソースグループだけを作る（以下今回の場合のサンプル）**

```:cmd
az group create -l japaneast -n YasashiiBotgroupName
```

**2.公式ドキュメント中の[既存のリソースグループでのARMテンプレートを使用したデプロイ](https://docs.microsoft.com/ja-jp/azure/bot-service/bot-builder-deploy-az-cli?view=azure-bot-service-4.0&tabs=csharp#deploy-via-arm-template-with-existing-resource-group)の、[オプション２：新しいApp Serviceプラン](https://docs.microsoft.com/ja-jp/azure/bot-service/bot-builder-deploy-az-cli?view=azure-bot-service-4.0&tabs=csharp#option-2-new-app-service-plan)で残りのリソースをデプロイ（以下今回の場合のサンプル）。**

```: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です。

<font color="Red">**------2020/07/06 追記ここまで------**</font>

 

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

```: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部](https://qiita.com/miokawa/private/6f1a3e480580e1e29abc)で作ったチャットボットのプロジェクトのフォルダ配下に、`DeploymentTemplates` というフォルダがあります。その中にある `template-with-new-rg.json` というファイルのパスを指定します。絶対パスでも相対パスでもOKですが、ここでは絶対パスで指定します。

+ **location**
世界各地にあるAzureのデプロイ先のうち、どこにデプロイしますか？ということです。`az account list-locations` というコマンドでデプロイ先一覧が出てきます。このうちの`name`部分を入れます。利用者と近いところを選ぶことが多いので、今回は東日本を示す `japaneast`とします。

+ **name**
ボットアプリケーションサービスの名前です。なんでもよいです。

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

+ **appId**
<font color="red">後で使います、と言っていたものその1です。</font>[アプリケーションの登録を作成する](#アプリケーションの登録を作成する)の作業で、コマンドをいれたらわらわら出てきた情報の中の一つです。

+ **appSecret**<br>
<font color="red">後で使います、と言っていたものその2です。</font>[アプリケーションの登録を作成する](#アプリケーションの登録を作成する)の作業で設定したパスワードです。

+ **botId**
なんでもよいのですが、世界で一つの一意なIDにしないといけません。

+ **botSku**
ボットチャンネル登録のSKU。SKUというのは、価格プランのようなもので、このプランだと〇〇の機能を××回まで使えるよ、と言ったような定義のことです。ここでは公式ドキュメント通り`F0`のままで進めます。

+ **newAppServicePlanName**
なんでもよいです。ボットアプリケーションを作成すると、アプリケーションプラン（アプリを実行するための一連のコンピューティング リソースの定義）というものも作成されるのですが、その名前です。

+ **newWebAppName**
なんでもよいです。ボット アプリケーション サービスの名前です。

+ **groupName**
なんでもよいです。作成するリソースグループ（箱）の名前です。

+ **groupLocation**
リソースグループ（箱）のデプロイ先です。`az account list-locations`というコマンドの`name`から選びます。今回は東日本`japaneast`にします。

+ **newAppServicePlanLocation**
アプリケーションプランのデプロイ先です。`az account list-locations`というコマンドの`name`から選びます。今回は東日本 `japaneast`にします。

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/a495cf53-3d8e-d91d-d917-1401049d2236.png)



ちなみにこの図の通りにコマンドを打つとこうなります。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プラン」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/ad6ffa13-2509-6b3d-9dea-b5c02b81ec9b.png)


2.左の操作メニューから「スケールアップ」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/7e2a6017-7284-ab22-d789-11f1ee511f14.png)

3.上のタブで「開発/テスト」を選択し、「F1」を選択し、「適用」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/84ce59d5-dced-6d78-c950-fad5390f677e.png)

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

1.リソースグループ内の「ボット チャンネル登録」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/739daf33-89d9-8b0e-aa29-f1ce4092bee9.png)


2.左の操作メニューから「Bot Serviceの料金」を選択し、「F0 Free」であることを確認、または変更したい場合は「F0 Free」を選択した上で「選択」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/42664468-4b6b-e1ee-3697-197ccb8b0313.png)



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

<font color="Red">**-------2020/07/06 追記------**</font>
**さて、またもやこの部分、そのままやると「Zip deployment failed. 」というエラーが出てしまうようです…。**
**公式ドキュメントに沿って進めることを軸にしておりましたが、ちょっとうまくいかないことが多いようなので、うまくいかない場合、この部分は私の後半記事[4. Twitterからつぶやきをとってきてみよう！](https://qiita.com/miokawa/private/eb9f16220a36f65d7098)の[2.7 azureへ再デプロイする](https://qiita.com/miokawa/items/eb9f16220a36f65d7098#27-azure%E3%81%B8%E5%86%8D%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%99%E3%82%8B)の手順でやってみてください。(こっちのやり方の方がずーっとらくちんですしね、実は…）**

**うまくいきましたら[2.5 Webチャットでのテスト](#25-webチャットでのテスト)へ進んでOKです。**

<font color="Red">**-------2020/07/06 追記ここまで------**</font>

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/97c73e73-0333-efba-b9a8-00559a05d6df.png)

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/a00b6e4a-8906-baaa-021a-b5172ec06c54.png)

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/81f2929f-f09e-dfcb-cda9-1def02048d21.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/aced51cc-c67c-a795-c1b0-1d8cf37557ba.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/a4513d4f-e7aa-0688-04c0-55ee4a7815e6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/4b9da671-75c2-4496-9a45-36a2c93d6868.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/0b61c1fc-a9b7-c5a2-f8d8-af1e9faf55f1.png)

## 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上にボットアプリがデプロイされました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/e9cff502-e5d6-7320-e2f8-1bedd7f85f3d.png)

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

## 2.5 Webチャットでのテスト
それでは、Azure上にデプロイされたボットとおしゃべりをしてみましょう。
[Azure Portal](https://ms.portal.azure.com/)へアクセスし、Azureサブスクリプションを作成したMicrosoftアカウントでログインして、**リソースグループ**をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/493beaf9-6e10-5230-9e06-4ac0cc8d9f3a.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/9f53d44f-4f31-bd25-a2f4-502d559a6b96.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/b4431822-5e35-04a9-1598-f751ae6af026.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/934f4d46-9e25-6dbd-708e-0aa79dc18039.png)

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

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

1. [Bot Frameworkでチャットボットを作ってみよう！](https://qiita.com/miokawa/private/6f1a3e480580e1e29abc)
2. [ボットをAzure（クラウド）にデプロイしてみよう！](https://qiita.com/miokawa/private/c71f9f4b62ce2b1c2864)**←イマココ**
3. [Cognitive Serviceでテキスト分析をしてみよう！](https://qiita.com/miokawa/private/cdb243401fe3c8d9d583)
4. [Twitterからつぶやきをとってきてみよう！](https://qiita.com/miokawa/private/eb9f16220a36f65d7098)
5. [LINE経由でボットと話してみよう！](https://qiita.com/miokawa/private/c6f0b550f8fa41a23228)