次の方法で共有


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

チャット アプリは、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 を設定する

  1. JavaScript 開発環境で、次のコマンドを実行して JavaScript フロントエンドの URL を取得します。

    azd env get-values | grep WEBAPP_URI
    

    このコマンドは、WEBAPP_URI 変数に対するすべてのクラウド環境変数と変数のフィルターを取得します。 URL の末尾がスラッシュ / で終わらないことを確認します。

  2. URL をコピーします。

  3. Python 開発環境で、次のコマンドを実行して JavaScript フロントエンドの URL を設定します。

    azd env set ALLOWED_ORIGIN <FRONTEND-URL>
    
  4. Python 開発環境で、次のコマンドを実行して Python バックエンドを再デプロイします。

    azd up
    

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

  1. Python 開発環境で、次のコマンドを実行して Python バックエンドの URL を取得します。

    azd env get-values | grep BACKEND_URI
    

    このコマンドは、BACKEND_URI 変数に対するすべてのクラウド環境変数と変数のフィルターを取得します。 URL の末尾がスラッシュ / で終わらないことを確認します。

  2. URL をコピーします。

  3. JavaScript 開発環境で、次のコマンドを実行して Python バックエンドの URL を設定します。

    azd env set BACKEND_URI <BACKEND_URI>
    
  4. Python 開発環境では、Python 開発環境で次のコマンドを実行して Python バックエンドを再デプロイします。

    azd up
    

Python バックエンドで JavaScript フロントエンドを使用する

Python アプリでは HR 特典の対象領域を使用し、JavaScript アプリでは不動産の対象領域を使用します。 アプリを接続したら、フロントエンドを使用して人事の利点について質問できます。 推奨される質問には次のようなものがあります。

  • 標準ではない Northwind Health Plus プランには何が含まれていますか。
  • パフォーマンス レビューではどうなりますか。
  • プロダクト マネージャーは何をしますか。

リソースをクリーンアップする

アプリを完了したら、リソースを削除してさらなる変更が生じないようにすることができます。

トラブルシューティング

  • エラーが発生した場合は、環境で入力した URL を確認します。 末尾がスラッシュ / で終わっていないことを確認します。

次のステップ