Azure CI/CD 設置以從 Express 服務器構建 + 提供 React 構建目錄

Question

在 Azure 和 Github CI/CD 中使用 Web 應用程序，是否可以將 Express/React 應用程序部署為一個應用程序，其中部署過程負責構建客戶端/React 代碼？ 這是我的目錄設置：

• server.js（這是快速邏輯）
• 包.json
• client/（包含 React 源代碼的客戶端目錄）

我有 server.js 設置來為靜態 client/build/index.html 文件提供服務。 但是，我不確定如何在 CI/CD 中創建該構建目錄。 我目前只是在本地運行npm run build ，然后將 build 目錄推送到我的倉庫，但我更喜歡部署來處理運行npm run build 。

Medium 的第 1 條建議在服務器的根級別更改啟動腳本，但這不適用於 Azure。

來自 Medium 的文章 2建議在本地運行npm run build ，將該目錄推送到 CI/CD。

Answer 1

你的預期目標。

使用 Azure 中的 Web 應用程序和 Github CI/CD，是否可以將 Express/React 應用程序部署為一個應用程序。

建議你，前端react項目和后端express項目，最好完全分開。

原因：

即使兩個項目放在同一個目錄下，當它們本質上運行時，它們仍然是分別運行兩個端口。

參考教程：

如何創建 React 前端和 Node/Express 后端並連接它們

在同一個項目中構建一個帶有 Express 后端的 React 應用程序，可以從外部訪問 MySQL 數據庫

從目前的主流來看，最好將前后項目完全分開，不要放在一個項目結構中。

我的建議：

你不想創建兩個 webapp 服務，你可以在 windows 平台上使用Virtual Apllications 。 你可以通過 github 部署你的 express 項目。 但是您的 React 項目可能需要選擇另一種部署方式，例如zip等。

截至目前，我還沒有看到使用 github 來部署虛擬應用程序。

您可以參考我在以下帖子中的回答。

如何將 Flask+React 應用程序部署到 Azure Web 服務

Vue 前端和 Express 后端位於同一 Azure Web 應用服務上

React.js - 如何獨立或一起部署客戶端和服務器？