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

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

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

Demo - バックエンドビデオを使用して JavaScript フロントエンドPython構成する

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

Note

この記事では、記事内の例とガイダンスの土台として、1 つ以上の AI アプリテンプレートを使用しています。 AI アプリテンプレートを使用すると、AI アプリの高品質な開始点を確保するのに役立つ、保守性が高く、簡単にデプロイできる参照実装が提供されます。

前提条件

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

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

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

2 つの参照アーキテクチャをデプロイすると、2 つのフルスタックアプリが作成されます。 JavaScript フロントエンドを Python バックエンドに接続するには、両方のアプリの 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
```