共用方式為


更新聊天應用程式以搭配 Python 後端使用 JavaScript 前端

聊天應用程式是示範如何使用 Azure OpenAI 服務的參考應用程式。 每個程式設計語言參考架構都提供稍微不同的功能。 本文說明如何搭配 Python 後端使用 JavaScript 前端。

藉由混合和比對前端和後端,您可以建立多語言應用程式,以使用兩個世界的最佳功能。

  • 示範 - 使用 Python 後端影片設定 JavaScript 前端影片

本文是文章集合的一部分,說明如何使用 Azure OpenAI 服務和 Azure AI 搜尋來建置聊天應用程式。 集合中的其他文章包括:

注意

本文使用一或多個 AI 應用程式範本 作為本文範例和指引的基礎。 AI 應用程式範本提供您妥善維護且易於部署的參考實作,以協助確保 AI 應用程式的高品質起點。

必要條件

使用下列文章部署 2 個參考架構。 請務必針對這兩個部署使用相同的訂用帳戶和區域。 部署最多需要 20 分鐘的時間。 讓部署保持狀態;在您完成本文之前,請勿完成清除 資源 一節。

取得前端和後端的 URL

部署兩個參考架構之後,您已部署兩個完整堆疊應用程式。 若要搭配 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 應用程式則使用房地產主題區域。 現在應用程式已連線,您可以使用前端來詢問 HR 權益。 建議的問題包括:

  • 我的 Northwind Health Plus 方案中包含哪些專案不是標準?
  • 效能檢閱中會發生什麼事?
  • 產品管理員有何用途?

清除資源

使用應用程式完成時,您可以刪除資源以避免產生更多費用。

疑難排解

  • 如果您收到錯誤,請檢閱您在環境中輸入的URL。 請確定它們不會以斜線結尾。 /

下一步