Python バックエンドで JavaScript フロントエンドを使用するためにチャットアプリを更新する

[アーティクル]
08/07/2024

チャットアプリは、Azure OpenAI サービスの使用方法を示す参照アプリケーションです。各プログラミング言語レファレンスアーキテクチャには、少し異なる機能が用意されています。この記事では、Python バックエンドで JavaScript フロントエンドを使用する方法について説明します。

フロントエンドとバックエンドを合わせて照合することで、両方の長所を使用する多言語アプリケーションを作成できます。

デモ - JavaScript フロントエンドと Python バックエンドの構成動画

この記事は、Azure OpenAI Service と Azure AI 検索を使用してチャットアプリを構築する方法を示す記事のコレクションの一部です。コレクション内のその他の記事は次のとおりです:

Note

この記事では、記事内の例とガイダンスの土台として、1 つ以上の AI アプリテンプレートを使用しています。 AI アプリテンプレートは、適切にメンテナンスされ、デプロイが容易なリファレンス実装を提供します。これは、高品質な AI アプリの作成を開始するために役立ちます。

前提条件

次の記事を使用して、2 つのレファレンスアーキテクチャをデプロイします。両方のデプロイでは同じサブスクリプションとリージョンを使用してください。デプロイは最大 20 分ほどかかる場合があります。デプロイは稼働したままにしておきます。この記事を終えるまではリソースのクリーンアップ セクションを完了しないでください。

この記事を使用して JavaScript チャットアプリをデプロイする
この記事を使用して Python チャットアプリをデプロイする

フロントエンドとバックエンドの URL を取得する

2 つのレファレンスアーキテクチャをデプロイすると、2 つのフルスタックアプリがデプロイされます。 Python バックエンドで JavaScript フロントエンドを使用するには、JS フロントエンドと PY バックエンドの URL を取得し、他のアプリでこれを構成する必要があります。

Codespaces 内またはローカルのどちらでも、各リポジトリを個別の開発環境に配置する必要があります。

Python バックエンドに JavaScript フロントエンド URL を設定する

JavaScript 開発環境で、次のコマンドを実行して JavaScript フロントエンドの URL を取得します。
```
azd env get-values | grep WEBAPP_URI
```
このコマンドは、WEBAPP_URI 変数に対するすべてのクラウド環境変数と変数のフィルターを取得します。 URL の末尾がスラッシュ / で終わらないことを確認します。
URL をコピーします。
Python 開発環境で、次のコマンドを実行して JavaScript フロントエンドの URL を設定します。
```
azd env set ALLOWED_ORIGIN <FRONTEND-URL>
```
Python 開発環境で、次のコマンドを実行して Python バックエンドを再デプロイします。
```
azd up
```

JavaScript フロントエンドに Python バックエンド URL を設定する

Python 開発環境で、次のコマンドを実行して Python バックエンドの URL を取得します。
```
azd env get-values | grep BACKEND_URI
```
このコマンドは、BACKEND_URI 変数に対するすべてのクラウド環境変数と変数のフィルターを取得します。 URL の末尾がスラッシュ / で終わらないことを確認します。
URL をコピーします。
JavaScript 開発環境で、次のコマンドを実行して Python バックエンドの URL を設定します。
```
azd env set BACKEND_URI <BACKEND_URI>
```
Python 開発環境では、Python 開発環境で次のコマンドを実行して Python バックエンドを再デプロイします。
```
azd up
```