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 - 如何独立或一起部署客户端和服务器？