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

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

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

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

註解

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

必要條件

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

部署兩個參考架構之後，您已部署兩個完整堆疊應用程式。若要搭配 Python 後端使用 JavaScript 前端，您需要取得 JS 前端和 PY 後端的 URL，並在其他應用程式中進行設定。

您應該在個別的開發環境中，無論是在本地還是在 Codespaces 上，擁有每個存放庫。

在 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
```

在 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 應用程式會使用 HR 權益主題區域，而 JavaScript 應用程式則使用房地產主題區域。現在應用程式已連線，您可以使用前端來詢問 HR 權益。建議的問題包括：

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