如何在Azure托管的React应用中使用环境变量

Question

我对React还是相当陌生的，并且一般也探索Azure。我有一个ERP背景，但这个背景确实包括使用诸如VSTS和CI / CD之类的工具。我非常依赖使用VSTS中的“库”来指定每个环境的变量，然后在部署时指定它们。

但！我一直在互联网上阅读和使用设置，但据我了解，我只能将参数“嵌入”由NPM生成的实际代码中。这基本上意味着我需要为每个环境创建一个单独的构建，这是我不习惯的。我一直很坚强（并告诉其他人），您要交付生产的产品应与预生产或登台或...上的产品完全相同。真的没有其他方法可以使用环境变量吗？我当时在考虑使用Azure App Service中的“应用程序设置”，但是我什至无法使它们在控制台中弹出。VSTS中的库也没有找到如何在我的部署中使用它们，因为只有一步之遥。

在https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables上阅读文档不会让我感到也可以将.env文件放入源代码管理中。我什至尝试了将 {process.env.NODE_ENV} 放入我的代码中的方法，但是在Azure中，它只是显示为“开发”，而我甚至执行npm run build（应该是生产中的）...

所以，我在这里迷路了！如何在React应用程序中使用Azure App Service中指定的环境变量？

谢谢！

Answer 1

直接添加尊者构建管道变量。这将添加到 Azure 环境变量，应用程序可以使用它

Answer 2

好的选择

我也遇到了这个问题，您可以通过为您的 env 使用不同的构建脚本来自定义使用哪些 env 变量。找到这个 CRA 文档 https://create-react-app.dev/docs/deployment/#customizing-environment-variables-for-arbitrary-build-environments

您还可以在 YAML 中设置变量。https://docs.microsoft.com/en-us/azure/devops/pipelines/process/variables?view=azure-devops&tabs=yaml%2Cbatch#set-variables-in-pipeline

但是如果我需要单个构建怎么办？

如果您为不同的环境（开发、暂存、生产）使用单个构建和发布阶段，我还没有解决这个问题。由于一切都已构建，React 具有您在构建时提供的任何环境变量。我考虑过的替代方案：

1. 将 react 构建与 .NET 构建分开，以便您可以像每次部署一样执行此操作
2. 定义所有环境变量并附加例如 REACT_APP_SOME_KEY_ 然后基于子域选择特定的环境，例如https://dev.yoursite.com https://yoursite.com，但此选项似乎不规范。
3. 可能是 React 需要为每个环境构建的限制。接受您需要单独的构建。

Answer 3

作为更新，它与我原来的方法有点不同，但我已经完成了使用 DotEnv 的路线，从而使用 .env 文件，我将在 VSTS 中使用库变量动态生成该文件，因此不存储他们在源代码管理中。

为了使用DotEnv，我更新了webpack.config；const Dotenv = require('dotenv-webpack');

module.exports = {
    ...
    plugins: [
        new Dotenv()
    ],

然后基本上，我创建了一个包含我的参数的 .env 文件

MD_API_URL= http://localhost:7623/api/

为了能够在我的 TSX 文件中使用它们，我只需使用 process.env；

static getCustomer(id) {
    return fetch(process.env.MD_API_URL + 'customers/' + id, { mode: 'cors' })
        .then(response => {
        return response.json();
    }).catch(error => {
        return error;
    });
}