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

小编典典

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

reactjs

我对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中指定的环境变量？

谢谢！

阅读 296

2020-07-22

共1个答案

小编典典

作为更新，它与我的原始方法有所不同，但是我经历了使用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;
    });
}

2020-07-22