6章アプリケーションコードのビルドとデプロイ

このページの動画解説をご視聴される場合は、こちらをご活用ください。

アプリケーションコードのビルドとデプロイ

本アプリケーションは、フロントエンドが JavaScript で書かれており、バックエンドが Python で書かれています。まずは、フロントエンドの JavaScript のコードをビルドし、その後に Python のコードと一緒に Azure Web App にデプロイします。

環境変数設定

$ENV:AZURE_WEBAPP_RESOURCE_GROUP = "rg-${ENV:AZURE_ENV_NAME}"

# Azure リソースの作成時に作成されている [Container Apps 環境] リソースの名前を設定
$ENV:WEBAPPENV_NAME = "xxx" 
# Azure リソースの作成時に作成されている [コンテナー アプリ] リソースの名前を設定
$ENV:WEBAPP_NAME = "xxx"

フロントエンドのビルド

package.jsonやvite.config.tsに従ってビルドをし、結果を../backend/staticに出力します。

# フロントエンドアプリのソースフォルダに移動
cd ~/$ENV:WD/aoai-handson-src/src/frontend

# フロントエンドアプリのソースビルド
npm install
npm run build

Python コードのデプロイ

ビルドされたフロントエンドのコードと一緒に、Python のアプリケーションコードを Azure Container Apps にデプロイします。

# バックエンドアプリのソースフォルダに移動
cd ~/$ENV:WD/aoai-handson-src/src/backend

# フロントエンドアプリとバックエンドアプリを合わせて Container Apps にデプロイ
az containerapp up --name $ENV:WEBAPP_NAME --resource-group $ENV:AZURE_WEBAPP_RESOURCE_GROUP --location $ENV:LOC --environment $ENV:WEBAPPENV_NAME --source .

コマンドの実行が終了すると、アプリケーションにアクセスするための URL が表示されます。この URL をブラウザで開き、サンプルアプリケーションの利用を開始してください。正常に起動できると [企業内向け Chat と社内文書検索] といった画面が起動します。

注意: アプリケーションのデプロイ完了には数分かかることがあります。”Welcome to Azure Container Apps!” のウェルカムスクリーンが表示される場合は、数分待ってアクセスし直してください。

注意: ここまでの手順で、「企業向け Chat」の機能が使えるようになりますが、社内文書データの投入ができていないので、「社内文書検索」機能を使おうとするとError: () The index 'gptkbindex' for service 'xxx' was not foundというエラーになります。

以下作業の動画解説をご視聴される場合は、こちらをご活用ください。

Easy Auth の設定（オプション）

必要に応じて、Azure AD に対応した Easy Auth を設定します。Easy Auth を設定した場合、UI の右上にログインユーザのアカウント名が表示され、チャットの履歴ログにもアカウント名が記録されます。 Easy Auth の設定は、こちらを参考にしてください。