如何在DevOps Azure管道中设置process.env.var

Question

我有一个任务，需要将 aspnet core React 应用程序部署到两个不同的环境中：开发环境和生产环境。每个环境都应单独配置。

我使用 Azure DevOps 进行 CI/CD。

AspNet 项目包含以下用于构建应用程序的命令：

    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

我使用adal进行授权，所以必须传递一些不同于Dev和Prod的秘密变量。

const adalConfig = {
    tenant: process.env.REACT_APP_TENANT,
    clientId: process.env.REACT_APP_CLIENT_ID,
    redirectUri: process.env.REACT_APP_REDIRECT_URI,

在Azure DevOps中，我使用以下命令设置参数：

echo ##vso[task.setvariable variable=REACT_APP_TENANT;isOutput=true]c00000-00ce-000-0f00-0000000004000

在Azure DevOps中，我有用于ASP.NET Core构建应用程序的标准命令：

• .NET Core安装程序
• 还原
• 运行命令（用于设置环境变量）
• 构建
• 发布

问题：

1. 环境变量未设置。
2. 我甚至不知道如何为生产环境构建另一个部署文件，而非开发环境。

您是否曾经有过将核心React应用程序部署到两个不同环境的任务？或者请给出建议是否需要更改部署策略。

我找到的唯一解决方案是使用.env文件，但我必须将此文件提交到Git中以便从主分支部署。 我仍然不知道如何为开发和生产使用不同的文件。

- NILF

---

你必须实际上以某种方式将环境变量设置为管道的一部分。这取决于您的部署方式，而您并没有提供任何信息。例如，在应用服务中，您可以将其添加到设置中。 - Chris Pratt

同意Chris的观点，你是如何部署的？这两种部署方式有什么区别？只是不同的配置还是其他的区别？最好更新一下这些细节。只有提供详细的部署信息，Stack Overflow的用户才能帮助你找到最佳策略。 - Mengdi Liang

你需要在vue.js中运行开发模式或生产模式，因为构建方式非常不同。对我来说，问题在于没有办法在构建时设置环境变量。你可以使用.env.production文件，但不应该使用主文件。主要问题是在config.vue.js中，如果引用webpack配置，则还需要指定模式，那么如何确保在所有环境中都能正常工作呢？我认为唯一可能的方法是通过令牌替换插件。Azure有几个开源插件可供使用。 - NewBie1234

Answer 1

TLDR;

1. 您在 task.setvariable 命令中设置了 isOutput=true。这只会在 Pipelines 引擎中设置一个变量，以便其他步骤可以使用，但实际上并不映射到 env 变量。移除 isOutput，您将看到 REACT_APP_TENANT 环境变量。
2. 但是只有在后续步骤中才能访问该环境变量 - 在同一流水线步骤中无法立即访问。
3. 如果您预先知道变量的值，可以在流水线级别 定义变量，这应该可以简化事情。 task.setvariable 对于动态变量更加有用。
4. 如果您需要为不同的环境使用不同的进程（或不同的变量集），我建议使用 多阶段 YAML 流水线 或 经典发布。它们都允许设置不同的阶段，每个阶段都有其自己的变量集。

长话短说

我们需要区分两个不同的过程：

1. 在CI代理上执行的部署流水线
2. 可以以多种不同方式托管的Web应用程序 - Azure Web Apps、自托管、docker/k8s等。

执行echo ##vso[task.setvariable ...]会在流水线(1.)中设置变量。

读取变量的位置（如tenant: process.env.REACT_APP_TENANT）并不明显。如果是nodejs服务器端代码，则将在2中执行。如果它是某个构建脚本的一部分，则将在1中读取。

React很棘手，因为：

• 在开发模式和发布模式下，React表现不同。在发布模式下，在构建阶段，整个客户端代码都编译成静态JS文件。因此，您在流水线中设置的环境变量应该有效。
• 它不能简单地访问任何环境变量（以防止意外将服务器环境变量暴露在客户端浏览器上）。如果使用create-react-app（这是ASP.NET React App默认使用的），则必须在环境变量前加上REACT_APP_才能使用它们。如果直接使用Webpack，则需要某些插件来实现此功能。

- qbik