Azure OpenAIを使ったチャットボットWebアプリをAzure App Serviceでホストしてみた
みなさん、こんにちは！
福岡オフィスの青柳です。
ChatGPTでおなじみの「OpenAI」の技術を基にしてマイクロソフトが提供する「Azure OpenAI Service」は、Microsoft Azureのセキュアなインフラストラクチャ上でOpenAI APIを利用できるサービスとして最近注目されています。
今回は、Azure OpenAI Serviceを使った「チャットボットWebアプリ」をMicrosoft Azure環境上に構築してみたいと思います。
Azure OpenAI Serviceを利用するための前提
現在、Azure OpenAI Serviceの利用はマイクロソフトへの申請が必要となっています。
申請から利用開始までの流れについては、弊社yhanaが下記ブログ記事で紹介しています。
今回の記事では、AzureおよびAzure OpenAI Serviceが既に利用可能な状態になっていることを前提に進めていきます。
構築する環境の構成
今回構築する環境の概要は、下図のようになります。
チャットボットWebアプリを実現するために、オープンソースで開発されている「Chatbot UI」を利用します。
Chatbot UIの概要と使い方については、弊社ueharaが下記ブログ記事で紹介しています。
Chatbot UIはデフォルトではOpenAI APIを利用するようになっていますが、設定によってAzure OpenAI Serviceを利用することもできます。
Chatbot UIはDockerコンテナイメージとしてビルドを行い、ローカルDocker環境またはクラウド上のコンテナサービスを使って動作させることができます。 そこで、Azureでコンテナを使ってWebアプリをホストできるサービスである「Azure App Service (Web App for Containers)」を使って構築することにします。
環境構築
以下の流れで環境構築を進めて行きます。
- (1) 「Azure OpenAI Service」のリソースを作成する
- (2) 「Azure OpenAI Service」の「モデル」をデプロイする
- (3) 「Container Registory」のレジストリを作成する
- (4) 「Chatbot UI」のコンテナイメージを準備する
- (5) 「App Service Plan」を作成する
- (6) 「App Service (Web App for Containers)」を作成する
- (7) Webアプリの設定を行う
- (8) 動作確認
(1) 「Azure OpenAI Service」のリソースを作成する
Azureポータル画面で「すべてのサービス」を開き、カテゴリ「AI + Machine Learning」にある「Azure OpenAI」をクリックします。
Azure OpenAIの画面が開きますので、上部メニューにある「作成」をクリックします。
ウィザード画面に沿って必要な情報を入力して行きます。
| 項目名 | 設定値 | |
|---|---|---|
| プロジェクトの詳細 | サブスクリプション | リソース作成先のサブスクリプションを選択 |
| リソースグループ | リソース作成先のリソースグループを選択 | |
| インスタンスの詳細 | リージョン | East US |
| 名前 | 任意の名前を指定 (例：kumamon-openai) |
|
| 価格レベル | Standard S0 | |
Azure OpenAI Serviceが利用可能なリージョンは、現時点 (2023/07/01) で「米国東部」「米国中南部」「西ヨーロッパ」「フランス中部」の4つのリージョンに限られています。 そのため今回は「East US (米国東部)」リージョンを選択していますが、日本リージョンでも利用可能になった際は日本を選択すると良いでしょう。
なお、今のところAzure updates等での公式アナウンスは確認できませんし、料金表ページにも東日本リージョンの価格は掲載されていません。 公式情報を待ちたいところです。
Azure OpenAI Serviceの価格体系は「Standard S0」の1種類のみとなっています。
Azure公式サイトの価格表を確認しておきましょう。
https://azure.microsoft.com/ja-jp/pricing/details/cognitive-services/openai-service/
続いて、ネットワークに関する設定項目を選択します。
| 項目名 | 設定値 |
|---|---|
| 種類 | インターネットを含むすべてのネットワークがこのリソースにアクセスできます。 |
ここでは、デフォルトの選択のまま次へ進みます。
続いて、リソースの「タグ」を設定する画面になります。
必要に応じてタグの設定を行います。
ウィザードの最後は、設定内容の確認画面になります。
設定内容に問題が無ければ「検証に成功しました」と表示されますので、「作成」をクリックします。
もし設定内容に問題があった場合には検証に失敗します。 その場合は、当該箇所を見直してください。
リソースの作成中 (デプロイ中) の画面でしばらく待つと、「デプロイに成功しました」と表示されます。
画面下部の「リソースへ移動」をクリックすると、作成されたAzure OpenAIリソースの画面に遷移します。
(2) 「Azure OpenAI Service」の「モデル」をデプロイする
作成したAzure OpenAIリソースを使ってチャットボットを作成できるようにするため、「モデル」のデプロイを行います。
画面上部の「Azure OpenAI Studioに移動する」をクリックします。
Azure OpenAI Studioの画面に遷移しますので、左側のメニューから「デプロイ」を選択します。
画面上部の「新しいデプロイの作成」をクリックします。
モデルのデプロイに関する設定を入力します。
| 項目名 | 設定値 |
|---|---|
| モデル | gpt-35-turbo |
| デプロイ名 | 任意の名前を指定 (例：kumamon-gpt-35-turbo) |
| Content Filter | (設定しない) |
| Tokens per Minute Rate Limit | 任意の値を指定 |
現時点 (2023/07/01) では、チャットボットに使える「GPT」モデルの最新バージョンは「3.5」となっていますので、そちらを選択します。
Rate Limitは環境によって設定可能な範囲が異なる場合があります。 今回はお試しですので、それほど大きな値を指定する必要は無いかと思います。
「作成」をクリックすると、モデルのデプロイが作成されました。
Azure OpenAI Studioの画面はこの先は使用しませんので、画面を閉じて、Azureポータルの画面に戻ります。
(3) 「Container Registory」のレジストリを作成する
ここからは、チャットボットのWebアプリをホストするための各種設定を行います。
まず、Webアプリのコンテナイメージを登録するためのレジストリを作成します。
Azureポータル画面で「すべてのサービス」を開き、カテゴリ「コンテナー」にある「コンテナーレジストリ」をクリックします。
コンテナレジストリーの画面が開きますので、上部メニューにある「作成」をクリックします。
必要な情報を入力します。
| 項目名 | 設定値 | |
|---|---|---|
| プロジェクトの詳細 | サブスクリプション | リソース作成先のサブスクリプションを選択 |
| リソースグループ | リソース作成先のリソースグループを選択 | |
| インスタンスの詳細 | レジストリ名 | 任意の名前を指定 (例：kumamon) |
| リージョン | Japan East | |
| 可用性ゾーン | 無効 (変更不可) | |
| SKU | Basic | |
レジストリ名の後に.azurecr.ioを付けたものが、Container Registryへアクセスする際のドメイン名となります。
SKU (価格レベル) は、今回はコストを抑えるために「Basic」を選択します。
Container Resigtryサービスの料金については、Azure公式サイトの価格表を確認しておきましょう。
https://azure.microsoft.com/ja-jp/pricing/details/container-registry/
設定内容を入力しましたら、「確認および作成」をクリックしてレジストリを作成します。 (「ネットワーク」および「暗号化」の設定はSKUが「Premium」の場合のみ設定可能ですので、Basicの場合は「基本」タブの設定内容のみ入力すれば問題ありません)
続いて、作成したレジストリへアクセスするために必要な設定を行います。
左側のメニューから「アクセスキー」を選択します。
「管理者ユーザー」の設定を「無効」から「有効」に変更します。
すると、レジストリへアクセスする際のユーザー名とパスワードが表示されるようになります。
これらの情報は、次の手順でDockerコマンドを使ってコンテナイメージをレジストリに登録する際に必要となります。 (ユーザー名／パスワードの取り扱いには十分にご注意ください)
※ Azure Container RegistryではAzure CLIを使ったユーザー名／パスワード不要のより安全なアクセスを行う方法もありますが、今回は手順の簡略化のために管理者ユーザーを用いています。
(4) 「Chatbot UI」のコンテナイメージを準備する
Container Registryに登録するWebアプリのコンテナイメージを準備します。
ここからの手順は、DockerがインストールされたPC／Mac等の環境で行ってください。
まず、GitHubリポジトリをクローンします。
$ git clone https://github.com/mckaywrigley/chatbot-ui.git
Dockerfileがあるディレクトリに移動して、コンテナイメージのビルドを行います。
$ cd chatbot-ui $ docker build -t chatbot-ui .
この時「Warn」や「Notice」が出力される場合もありますが、とりあえず無視します。
ビルドしたコンテナイメージをContainer Registryにプッシュします。
まず、Container Registryにログインします。
$ docker login ＜レジストリのログインサーバー＞ (例：kumamon.azurecr.io)
ここで、前の手順で確認した「ユーザー名」「パスワード」の入力を求められますので、確認して入力します。
ログインできましたら、コンテナイメージをレジストリにプッシュします。
$ docker tag chatbot-ui:latest ＜レジストリのログインサーバー＞/chatbot-ui:latest $ docker push ＜レジストリのログインサーバー＞/chatbot-ui:latest
無事にプッシュが完了しましたら、AzureポータルのContainer Registryの画面に戻りましょう。
左側のメニューから「リポジトリ」を選択します。
プッシュしたコンテナイメージが表示されていることを確認します。
これで、Webアプリのコンテナイメージの準備は終わりです。
(5) 「App Service Plan」を作成する
コンテナイメージの準備もできましたので、いよいよ、Webアプリのホスト先となるApp Serviceの構築を行います。
App Serviceリソースを作成する前に「App Service Plan」の作成が必要です。
App Service Planとは、App Serviceのアプリケーションをホストするインスタンス (サーバー) を管理するグループのようなものです。 インスタンス (サーバー) とは言っても完全マネージドとなっているため、OSの管理や運用などを行う必要はありません。 管理するのは、インスタンスのスペックや台数、および、リージョンや冗長性などAzureインフラに関する設定項目です。
また、利用料金はApp ServiceではなくApp Service Planに対して設定されていることを覚えておくと良いでしょう。
それでは、App Service Planを作成しましょう。
Azureポータル画面で「すべてのサービス」を開き、カテゴリ「Web & Mobile」にある「App Serviceプラン」をクリックします。
App Serviceプランの画面が開きますので、上部メニューにある「作成」をクリックします。
必要な情報を入力します。
| 項目名 | 設定値 | |
|---|---|---|
| プロジェクトの詳細 | サブスクリプション | リソース作成先のサブスクリプションを選択 |
| リソースグループ | リソース作成先のリソースグループを選択 | |
| App Serviceプランの詳細 | 名前 | 任意の名前を指定 (例：kumamon-app-service-plan) |
| オペレーティングシステム | Linux | |
| 地域 | Japan East | |
| 価格レベル | 価格プラン | Basic B1 |
| ゾーン冗長 | ゾーン冗長 | 無効 (変更不可) |
価格プランは、本番ワークロード用途であれば「Standard」以上を推奨しますが、今回はお試しですので「Basic」を選択します。
無料で使える「Free」を選択しても良いですが、今回構築した環境に今後いろいろと手を加えることを見据えて、Freeよりも制約の少ない「Basic」にしておきます。
App Service Planの料金については、Azure公式サイトの価格表を確認しておきましょう。
https://azure.microsoft.com/ja-jp/pricing/details/app-service/linux/
設定内容を入力しましたら、「確認および作成」をクリックしてApp Service Planを作成します。
(6) 「App Service (Web App for Containers)」を作成する
続いてApp Serviceリソースを作成します。
Azureポータル画面で「すべてのサービス」を開き、カテゴリ「Web & Mobile」にある「App Service」をクリックします。
App Serviceの画面が開きますので、上部メニューにある「作成」をクリックします。 プルダウンメニューから「Webアプリ」を選択します。
まず「基本」の設定項目を入力します。
| 項目名 | 設定値 | |
|---|---|---|
| プロジェクトの詳細 | サブスクリプション | リソース作成先のサブスクリプションを選択 |
| リソースグループ | リソース作成先のリソースグループを選択 | |
| インスタンスの詳細 | 名前 | 任意の名前を指定 (例：kumamon-chatbot-ui) |
| 公開 | Dockerコンテナー | |
| オペレーティングシステム | Linux | |
| 地域 | Japan East | |
| 価格プラン | Linuxプラン (Japan East) | 前の手順で作成したApp Service Planを選択 |
| 価格プラン | Basic B1 (選択したApp Service Planの価格プランが表示される；変更不可) | |
| ゾーン冗長 | ゾーン冗長 | 無効 (変更不可) |
インスタンス名の後に.azurewebsites.netを付けたものが、Webアプリへアクセスする際のドメイン名となります。
次に「Docker」の設定項目を入力します。
| 項目名 | 設定値 | |
|---|---|---|
| オプション | 単一コンテナー | |
| イメージソース | Azure Container Registry | |
| Azureコンテナーレジストリのオプション | レジストリ | 作成したContainer Registryのレジストリを選択 |
| イメージ | 作成したコンテナイメージの名前を選択 | |
| タグ | 作成したコンテナイメージのタグを選択 | |
| スタートアップコマンド | (設定しない) | |
次に「ネットワーク」の設定項目を入力します。
| 項目名 | 設定値 |
|---|---|
| パブリックアクセスを有効にする | オン |
| ネットワークインジェクションを有効にする | オフ |
ここでは、デフォルトの選択のまま次へ進みます。
次に「監視」の設定項目を入力します。
| 項目名 | 設定値 | |
|---|---|---|
| Application Insights | Application Insightsを有効にする | いいえ |
監視の設定についてもデフォルトの選択のままにします。
設定内容を入力しましたら、「確認および作成」をクリックしてApp Serviceを作成します。
(7) Webアプリの設定を行う
これで「Chatbot UI」のWebアプリがApp Serviceを使ってホストされました。 ただし、チャットボットとして正しく動作するためには追加の設定を行う必要があります。
具体的には、Chatbot UIのWebアプリがAzure OpenAI ServiceのAPIを呼び出すために必要な情報を「環境変数」として設定します。
App Serviceリソース画面の左側のメニューから「構成」を選択すると、以下のような画面になります。
「アプリケーション設定」に表示されている「名前」と「値」の組が、環境変数の設定です。
試しに1つ環境変数を設定してみましょう。
「新しいアプリケーションの設定」をクリックすると以下の画面になります。
「名前」欄にOPENAI_API_TYPE、「値」欄にazureと入力して、「OK」で保存します。
この操作を繰り返して、必要な環境変数を登録します。
設定が必要な環境変数は以下の4つです。
| 名前 | 値 |
|---|---|
OPENAI_API_TYPE |
azure |
OPENAI_API_HOST |
Azure OpneAIサービスのAPIエンドポイント (確認方法は下記参照) |
OPENAI_API_KEY |
Azure OpneAIサービスのAPIキー (確認方法は下記参照) |
AZURE_DEPLOYMENT_ID |
Azure OpneAIサービスで作成したモデルのデプロイ名 (例：kumamon-gpt-35-turbo) |
Azure OpneAIサービスの「APIエンドポイント」と「APIキー」は、以下のようにして確認します。
Azure OpneAIサービスで作成したリソースの画面を開き、左側のメニューから「キーとエンドポイント」を選択します。
すると、以下の画面が表示されます。
この画面の「キー」(2つありますがどちらでも構いません) と「エンドポイント」の値をコピーして、Webアプリの環境変数に設定します。
必要な環境変数を全て設定しましたら、画面上部の「保存」をクリックします。
すると、Webアプリを再起動する確認を求められますので、「続行」をクリックします。
Webアプリの再起動が行われます。 (画面上では再起動が完了しているように見えても、反映されるまで少し時間が掛かる場合があります)
(8) 動作確認
これで環境構築の手順が全て終わりました。
完成したChatbot UIのWebアプリにアクセスして、動作を確認しましょう。
Webアプリのホスト名は「概要」の「既定のドメイン」に表示されています。
このドメイン名の先頭にhttps://を付けたものがWebアプリのURLです。
WebブラウザでURLへアクセスしてみると・・・Chatbot UIの画面が表示されました！
質問文を入力してみて、回答が返ってくることも確認できました。
もし「URLへ正常にアクセスできない」「Chatbot UIの画面でエラーが表示されている」等の場合は、ここまでの手順を再確認してみてください。
追加の設定：Azure ADによる認証を設定する
さて、今回構築したChatbot UIのWebアプリですが、実はURLを知っていれば誰でもアクセスすることができます。
それはちょっと怖いですね・・・ということで、Webアプリに認証機能を設定することにします。
AzureのApp Serviceでは、簡単な設定でWebアプリに認証機能を付与することができます。
App Serviceリソースの画面で、左側のメニューから「認証」を選択します。
「IDプロバイダーを追加」をクリックすると、以下のような画面になります。
IDプロバイダーとして利用可能なものは以下の通りです。
- Microsoft (Azure ADあるいはMicrosoftアカウント)
- Apple
- GitHub
- OpenID Connect (同プロトコルに準拠したIDプロバイダーを利用して認証)
今回は、「Microsoft」を選択してAzure ADを使った認証を設定してみます。
※ 会社・組織のAzure ADを使った認証を設定する際は、Azure ADの管理者・管理部署に事前に確認を取ることを推奨します。
Azure ADと連係を行う設定は、会社・組織によって異なる場合があります。 以下の設定内容はあくまで一例です。
IDプロバイダーの設定が終わりましたら、WebアプリのURLへアクセスしてみましょう。
このように、Azure ADのサインイン画面が表示されると思います。 ユーザーアカウントやパスワードを入力して認証に成功すると、Chatbot UIの画面にアクセスすることができます。
あとかたづけ
構築した環境を削除するには、作成した時と逆の順番でリソースを削除します。
具体的には、以下の順番で削除するのが良いでしょう。
- App Service
- App Service Plan
- Container Registry
- Azure OpenAI Service
- ただし、先に「デプロイモデル」を削除しておく必要があります
更に次のステップへ進む場合
今回構築した環境をベースにして、更に「Azureに閉じたネットワーク環境」を実現するブログ記事を投稿しました。
もし、こちらのブログ記事の構成を構築する場合は、今回構築した環境をそのまま利用して追加の構成を構築する手順になっていますので、ここでリソースを削除しなくて構いません。
おわりに
「Microsoft Azureは初めて触る」という方にとっては、App Service PlanやApp ServiceといったAzure独自のサービスの概念に少々戸惑うことがあるかもしれません。
それでも、今回ご紹介した手順に沿って構築してみると、意外と簡単に構築できることがお分かりになるのではないでしょうか。
皆さんも、是非、試してみてください。
