更新聊天應用程式以搭配 Python 後端使用 JavaScript 前端
聊天應用程式是示範如何使用 Azure OpenAI 服務的參考應用程式。 每個程式設計語言參考架構都提供稍微不同的功能。 本文說明如何搭配 Python 後端使用 JavaScript 前端。
藉由混合和比對前端和後端,您可以建立多語言應用程式,以使用兩個世界的最佳功能。
- 示範 - 使用 Python 後端影片設定 JavaScript 前端影片
本文是文章集合的一部分,說明如何使用 Azure OpenAI 服務和 Azure AI 搜尋來建置聊天應用程式。 集合中的其他文章包括:
注意
本文使用一或多個 AI 應用程式範本 作為本文範例和指引的基礎。 AI 應用程式範本提供您妥善維護且易於部署的參考實作,以協助確保 AI 應用程式的高品質起點。
必要條件
使用下列文章部署 2 個參考架構。 請務必針對這兩個部署使用相同的訂用帳戶和區域。 部署最多需要 20 分鐘的時間。 讓部署保持狀態;在您完成本文之前,請勿完成清除 資源 一節。
- 使用本文 部署 JavaScript 聊天應用程式
- 使用本文 部署 Python 聊天應用程式
取得前端和後端的 URL
部署兩個參考架構之後,您已部署兩個完整堆疊應用程式。 若要搭配 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
搭配 Python 後端使用 JavaScript 前端
Python 應用程式會使用 HR 權益主題區域,而 JavaScript 應用程式則使用房地產主題區域。 現在應用程式已連線,您可以使用前端來詢問 HR 權益。 建議的問題包括:
- 我的 Northwind Health Plus 方案中包含哪些專案不是標準?
- 效能檢閱中會發生什麼事?
- 產品管理員有何用途?
清除資源
使用應用程式完成時,您可以刪除資源以避免產生更多費用。
- 使用這些 指示刪除 JavaScript 應用程式
- 使用這些 指示刪除 Python 應用程式
疑難排解
- 如果您收到錯誤,請檢閱您在環境中輸入的URL。 請確定它們不會以斜線結尾。
/