如何在没有多次构建的情况下将 React 应用程序部署到多个环境？

Question

我正在使用 Azure DevOps 设置一个 CI/CD 管道，以自动将 React 应用程序部署到多个环境。据我了解，环境变量 (REACT_APP_*) 在 npm 构建期间使用。如何在不为每个环境创建步骤的情况下设置构建阶段？

我正在使用带有 React 前端的全新 ASP.Net Boilerplate 项目。

.

这是我目前拥有的

我在 package.json 中复制了构建任务以允许多个环境

"scripts": {
  ...
  "build": "set REACT_APP_ENV=production && react-app-rewired build --scripts-version react-scripts-ts",
  "builduat": "set REACT_APP_ENV=uat && react-app-rewired build --scripts-version react-scripts-ts",
...
}

然后在我的 CI 管道中，我复制了构建任务

- script: yarn builduat
  displayName: '[UAT] Yarn build front-end'
  workingDirectory: $(WorkingDirectoryReact)

- script: yarn build
  displayName: '[PROD] Yarn build front-end'
  workingDirectory: $(WorkingDirectoryReact)

我不想为每个环境都复制东西，那么理想的解决方案是什么？我真的不想在 CD（部署阶段）构建解决方案

Answer 1

我不太了解 React，但您的方法被描述为 "build once, deploy many"，这是您发布过程中非常重要的一个方面。

您缺少的一点是将您的构建发布为工件，然后您可以在发布管道中获取这些工件。

查看发布工件任务：https://docs.microsoft.com/en-us/azure/devops/pipelines/tasks/utility/publish-build-artifacts?view=azure-devops

将您的每个环境发布到单独的工件，然后在您的发布管道中选择它们。

Answer 2

我终于做了一个 PowerShell 脚本，它将替换构建工件中的内容。

所有细节都可以在这里找到：https://github.com/Thibaultce/react-azuredevops-buildonce-deploymany

如何在没有多次构建的情况下将 React 应用程序部署到多个环境？

How to deploy a react app to mutiple environments without multiple builds?

continuous-integration

multistage

reactjs

azure-devops

aspnetboilerplate