如何在 Azure 中托管的 React 应用程序中使用环境变量 [英] How to use environment variables in React app hosted in Azure

问题描述

我对 React 还很陌生，我也大致上探索了 Azure.我有 ERP 背景，但该背景确实包括使用 VSTS 和 CI/CD 等工具.我非常依赖使用 VSTS 中的库"来指定每个环境的变量，然后在部署时指定这些变量.

I'm pretty new to React, and exploring Azure in general as well. I've gotten an ERP background, but that background did include using tools like VSTS and CI/CD. I've heavily relied upon using the 'libraries' in VSTS to specify variables per environment, and then specifying these upon deployment.

但是！我一直在互联网上阅读并使用设置，但据我所知，我只能在 NPM 生成的实际代码中嵌入"参数.这基本上意味着我需要为每个环境创建一个单独的构建，这是我不习惯的.我一直坚信(并告诉其他人)您运送到生产中的东西应该与预生产或分期或......的东西完全相同.真的没有其他方法可以使用环境变量吗?我想在 Azure 应用服务中使用应用程序设置，但我什至无法让它们在控制台中弹出.VSTS 中的库也没有找到如何在我的部署中使用这些库，因为只有一个步骤.

But! I've been reading around on the internet, and playing with settings, but to my understanding, I can only 'embed' parameters in the actual code that is generated by NPM. This would basically mean that I'd need to create a seperate build per environment, which I'm not used to. I've always been tought (and tell others) that what you ship to production, should be exactly the same as what has been on pre-prod, or staging, or ... . Is there really no other way to use environment variables? I was thinking of using the Application Settings in Azure App Service, but I can't get them to even pop up in the console. The libraries in VSTS, haven't found how to use these in my deployment either, as there's just one step.

并阅读 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(应该是生产)...

And reading the docs at https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables doesn't make me feel comfortable putting .env files in source control either. I even tried the approach of putting {process.env.NODE_ENV} in my code, but in Azure it just shows up as 'Development', while I even do npm run build (which should be production)...

所以，我有点迷失在这里！如何在我的 React 应用中使用 Azure 应用服务中指定的环境变量?

So, I'm a bit lost here! How can I use environment variables specified in Azure App Service, in my React app?

谢谢！

推荐答案

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

As an update, it's a bit different then my original approach, but I've gone through the route of using DotEnv and thus using .env files, which I will generate on the fly in VSTS, using the library variables, and thus NOT storing them in source control.

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

To use DotEnv, I updated the webpack.config; const Dotenv = require('dotenv-webpack');

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

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

Then basically, I created a .env file containing my parameters

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

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

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

And to be able to consume them in my TSX files I just use 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;
    });
}

这篇关于如何在 Azure 中托管的 React 应用程序中使用环境变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！