Teamsのチャットボットを作る際にどうせならChatGPTと連携させようと思ったのでその内容を記載します。Azureボットとバックグラウンドで動作するAppServiceを連携の都合上、開発言語はJavaScript（Node.js）にしました。
純正Microsoftなチャットボットですね。別にMicrosoftの回し者では無いですのであしからず。
目次
本記事の目標
- Azureのリソース準備
- Azure BotとAzure App Serviceの連携設定
事前準備
以下に事前に必要となるアカウント等を記載します。
- Azureアカウント
- Azure OpenAIの利用申請（2023/05時点で利用には事前申請が必要です）
- Azure OpenAIにGPT-3.5-turbo（Chat-GPT）をデプロイ済
開発環境
ローカルPCで必要となる環境を記載します。
- Windows11
- VSCode
- Node.js 18.16
- Bot Framework Emurator（ローカルでBotの動作を確認する際に必要になります）
ただ、本記事は主にAzure側の設定のみになるので上記はまだ準備しなくても大丈夫です。
Azureの設定
Azureボット及びApp Serviceの準備をします。
公式は以下になります。
Azureボットの作成
大まかには以下の流れで作成していきます。
- Azure Botをマーケットプレイスから選択します。
- 必要項目を入力してAzure Botをデプロイします。
- デプロイが完了した後に対象リソースグループを参照して以下が出来ていることを確認します。
- Azure Bot
- マネージドID
- Azure Botのプロファイルを必要に応じて変更します。
詳細手順
必要事項を入力します。
| 項目名 | 設定内容 |
|---|---|
| ボットハンドル | ボットの名称を入力します |
| サブスクリプション | サブスクリプションを選択します |
| リソースグループ | リソースグループを選択します |
| データの所在地 | グローバル |
| 価格レベル | Free |
| アプリの種類 | ユーザー割り当て済みマネージドID |
問題無ければデプロイを実行します。
デプロイ後にリソースグループに移動して、Azure Bot等が作成されていることを確認します。
ボットの名称やアイコンを変更したい場合はボットプロファイルから変更します。
今回は特段変更せずに進めます。
App Serviceの作成
大まかには以下の流れで作成していきます。
- Azure Serviceを選択します。
- 必要項目を入力してAzure Serviceをデプロイします。
- デプロイが完了した後に対象リソースグループを参照して以下が出来ていることを確認します。
- App Service Plan（ASP）
- App Service
詳細手順
必要事項を入力します。
| 項目名 | 設定内容 |
|---|---|
| サブスクリプション | サブスクリプションを選択します |
| リソースグループ | リソースグループを選択します Azure Botを作成したリソースグループと同じが分かりやすいです |
| 名前 | App Serviceの名前を入力します |
| 公開 | コード |
| ランタイムスタック | Node 18 LTS |
| オペレーティングシステム | Linux |
| 地域 | Japan East |
| Linuxプラン（Japan East） | 自動で入力されます |
| 価格プラン | Free F1（共有インフラストラクチャ） |
それ以降の内容については基本的にデフォルトで問題無いです。
問題無ければデプロイを実行します。
デプロイ後にリソースグループに移動して、ASP等が作成されていることを確認します。
Azure BotとApp Serviceの連携設定
こちらはAzure Botの作成時にユーザー割り当て済みマネージドIDを選択した場合の設定方法になります。
大まかな流れとしては以下になります。
- Azure Botの構成ページから以下情報を取得します。
- Microsoft App ID
- アプリテナントID
- アプリMSIリソースID
- App Serviceに1.の情報を設定する。
- App ServiceにマネージドIDを設定する。
- App ServiceのURLをコピーする。
- Azure Botに4.のURLを設定する。
詳細手順
Azure Botにある赤枠内の情報をコピーします。
App Serviceに移動して必要情報を設定していきます。
設定内容は以下になります。
| 項目名 | 設定内容 |
|---|---|
| MicrosoftAppId | Azure BotのMicrosoft App IDからコピーしてきます |
| MicrosoftAppPassword | 入力無し |
| MicrosoftAppTenantId | Azure BotのアプリテナントIDからコピーしてきます |
| MicrosoftAppType | Azure Botのボットタイプからコピーしてきます 今回はUserAssignedMSI固定 |
ユーザ割り当てマネージドIDを設定します。
Azure Botをデプロイした時に同時に生成されていたマネージドIDを選択します。
App Serviceのホスト名をコピーします。
Azure Botがどのエンドポイントに接続するかを設定します。
App Serviceのホスト名から作成します。
https://<Your App Service Hostname>/api/messages
<Your App Service Hostname>は自身の環境で変えてください。
/api/messagesは一旦固定としています。（BotFrameworkのテンプレートがそうなっているので）
まとめ
以上でAzure側の設定が完了しました。
次記事では実際に動作するApp Service側のコードを記載していきます。
次記事は以下になります。