跳至主要内容

添加自定义环境变量

注意：此功能在 [email protected] 及更高版本中可用。

你的项目可以像在 JS 文件中本地声明一样使用在你的环境中声明的变量。默认情况下，你将拥有 NODE_ENV，以及任何以 REACT_APP_ 开头的其他环境变量。

警告：不要在你的 React 应用中存储任何秘密（例如私有 API 密钥）！

环境变量被嵌入到构建中，这意味着任何人都可以通过检查你的应用文件来查看它们。

环境变量在构建时被嵌入。由于 Create React App 生成静态 HTML/CSS/JS 包，因此它不可能在运行时读取它们。要在运行时读取它们，你需要在服务器上将 HTML 加载到内存中，并在运行时替换占位符，如 此处所述。或者，你可以在每次更改它们时在服务器上重新构建应用。

注意：您必须创建以REACT_APP_开头的自定义环境变量。除了NODE_ENV之外的任何其他变量都将被忽略，以避免意外地在机器上公开具有相同名称的私钥。更改任何环境变量都需要您重新启动正在运行的开发服务器。

这些环境变量将在process.env中为您定义。例如，如果有一个名为REACT_APP_NOT_SECRET_CODE的环境变量，它将在您的 JS 中以process.env.REACT_APP_NOT_SECRET_CODE的形式公开。

还有一个内置的环境变量叫做NODE_ENV。您可以从process.env.NODE_ENV中读取它。当您运行npm start时，它始终等于'development'，当您运行npm test时，它始终等于'test'，当您运行npm run build来创建生产包时，它始终等于'production'。您不能手动覆盖NODE_ENV。 这可以防止开发人员意外地将缓慢的开发版本部署到生产环境。

这些环境变量对于根据项目部署位置有条件地显示信息或使用存储在版本控制之外的敏感数据非常有用。

首先，您需要定义环境变量。例如，假设您想在一个<form>中使用环境变量

render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
      </form>
    </div>
  );
}

在构建过程中，process.env.REACT_APP_NOT_SECRET_CODE将被替换为REACT_APP_NOT_SECRET_CODE环境变量的当前值。请记住，NODE_ENV变量将自动为您设置。

当您在浏览器中加载应用程序并检查<input>时，您将看到它的值设置为abcdef，并且粗体文本将显示使用npm start时提供的环境。

<div>
  <small>You are running this application in <b>development</b> mode.</small>
  <form>
    <input type="hidden" value="abcdef" />
  </form>
</div>

上面的表单正在从环境中查找名为REACT_APP_NOT_SECRET_CODE的变量。为了使用这个值，我们需要在环境中定义它。这可以通过两种方式完成：在您的 shell 中或在.env文件中。这两种方法将在接下来的几节中介绍。

访问NODE_ENV对于有条件地执行操作也很有用

if (process.env.NODE_ENV !== 'production') {
  analytics.disable();
}

当您使用npm run build编译应用程序时，缩小步骤将删除此条件，并且生成的包将更小。

在 HTML 中引用环境变量​

注意：此功能适用于[email protected]及更高版本。

您也可以在 public/index.html 中访问以 REACT_APP_ 开头的环境变量。例如

<title>%REACT_APP_WEBSITE_NAME%</title>

请注意，上述部分的注意事项适用

  • 除了几个内置变量（NODE_ENV 和 PUBLIC_URL）之外，变量名必须以 REACT_APP_ 开头才能生效。
  • 环境变量在构建时注入。如果您需要在运行时注入它们，请改用此方法。

在您的 Shell 中添加临时环境变量​

定义环境变量的方式因操作系统而异。同样重要的是要知道，这种方式对于 shell 会话的有效期是临时的。

Windows (cmd.exe)​

set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start

（注意：变量赋值周围的引号是必需的，以避免尾随空格。）

Windows (Powershell)​

($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)

Linux、macOS (Bash)​

REACT_APP_NOT_SECRET_CODE=abcdef npm start

在 .env 中添加开发环境变量​

注意：此功能适用于 [email protected] 及更高版本。

要定义永久的环境变量，请在项目的根目录中创建一个名为 .env 的文件

REACT_APP_NOT_SECRET_CODE=abcdef

注意：您必须创建以 REACT_APP_ 开头的自定义环境变量。除了 NODE_ENV 之外的任何其他变量都将被忽略，以避免 意外地公开可能具有相同名称的机器上的私钥。更改任何环境变量都需要您重新启动正在运行的开发服务器。

注意：更改 .env 文件后，您需要重新启动开发服务器。

.env 文件应该被检入源代码控制（排除 .env*.local）。

还可以使用哪些其他 .env 文件？​

注意：此功能适用于 [email protected] 及更高版本。

  • .env：默认。
  • .env.local：本地覆盖。此文件加载所有环境，除了测试环境。
  • .env.development、.env.test、.env.production：特定于环境的设置。
  • .env.development.local、.env.test.local、.env.production.local：特定于环境的设置的本地覆盖。

左侧的文件优先级高于右侧的文件

  • npm start: .env.development.local, .env.local, .env.development, .env
  • npm run build: .env.production.local, .env.local, .env.production, .env
  • npm test: .env.test.local, .env.test, .env (注意 .env.local 缺失)

如果机器没有显式设置这些变量，它们将作为默认值。

请参考 dotenv 文档 获取更多详细信息。

注意：如果您正在为开发定义环境变量，您的 CI 和/或托管平台很可能也需要这些定义。请参考其文档了解如何操作。例如，请参考 Travis CI 或 Heroku 的文档。

在 .env 中扩展环境变量​

注意：此功能适用于 [email protected] 及更高版本。

扩展您机器上已有的变量，以便在您的 .env 文件中使用（使用 dotenv-expand）。

例如，要获取环境变量 npm_package_version

REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}

或者扩展当前 .env 文件中的本地变量

DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar