如何在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 App Service中的应用程序设置"，但是我什至无法使它们在控制台中弹出. 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.

并阅读

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 App Service中指定的环境变量?

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/

为了能够在我的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屋！