如何从 react.env 文件上的主机获取环境变量

Question

我正在构建一个具有许多配置文件的 ReactJs 应用程序。

该应用程序将在开发环境、质量保证环境和生产环境中运行。

鉴于此，我想在主机上设置一些环境变量，并能够在 .env 文件中获取它。

我需要做类似的事情：

.env 文件

REACT_APP_BASE_SERVICEX_URL=${ENV_ON_HOST_BASE_SERVICEX_URL}

REACT_APP_BASE_SERVICEY_URL=${ENV_ON_HOST_BASE_SERVICEY_URL}

这可能吗？

PS：应用程序将在 Kubernetes 中运行。

Answer 1

1- 从 npm 安装 env-cmd package

2- 在项目根目录中创建一个名为 .env.envName 的文件，sush as.env.staging, .env.production, ... 以区分每个环境中的变量。

3- 在 env 文件中，以键/值表示形式添加变量，前缀为 REACT_APP

4- 在您的package.json内部。 更改脚本构建。

"scripts": {
    "start": "env-cmd -f .env.staging react-scripts start",
    "build:staging": "env-cmd -f .env.staging react-scripts build",
    "build:production": "env-cmd -f .env.production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

5- -f标志用于自定义 env 文件路径，因为默认值在项目根目录中，否则您应该指定实际路径

"start": "env-cmd -f ../../.env.staging react-scripts start",

Answer 2

您只是在问如何处理环境变量吗？

您可以将所需的任何变量放在 .env、.env.local、.env.development 或 .env.production 文件中，然后在部署时将它们复制到 .env 文件中。

习惯上将 .env 文件中的变量完全大写。 要在代码中使用它们，您将 process.env 放在它之前。

在.env 文件中：

DB_URL = http://fwohfjiowjfwefjpw

在反应：

const DBURL = process.env.DB_URL

Answer 3

使用dotenv-expand解决。

我刚刚运行了命令npm install dotenv-expand --save

安装后，我在项目根目录上创建了一个名为next.conf.js的文件

在这个文件中，我添加了以下内容：

在我的.env文件中：

现在我可以获取主机的环境变量了。

Answer 4

.env文件

REACT_APP_BASE_SERVICEX_URL=HOST_BASE_SERVICEX_URL

在您想使用 env 变量的地方，请按以下方式使用它 -

const URL = process.env.REACT_APP_BASE_SERVICEX_URL