我可以在Netlify中使用Create-React-App的构建环境变量吗？

Question

如何在使用Create-React-App时在Netlify中使用构建环境变量？

- Laura J

---

一个简单的谷歌搜索得到了这个链接：https://www.netlify.com/docs/continuous-deployment/#build-environment-variables - Sal

Answer 1

您可以在 Netlify 上的 create-react-app 中使用环境变量，但是 Create React App 的所有构建限制仍将适用。

• 默认情况下，NODE_ENV 已经为您定义好了
• 以 REACT_APP_ 开头的任何其他环境变量都将可用
• 除 NODE_ENV 之外的任何其他变量都将被忽略
• 更改任何环境变量都需要触发新的构建/部署

重要提示：无法从 Netlify 托管的浏览器动态访问 create-react-app 中的任何环境变量！它们必须在构建时访问才能在静态站点中使用。

---

来自 Netlify 托管的一个create-react-app 示例库：

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Environment Variables in a Create React App on Netlify</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and commit to your repo.
        </p>
        <p>NODE_ENV value is "{process.env.NODE_ENV}"</p>
        <p>CUSTOM_ENV_VAR value is "{process.env.CUSTOM_ENV_VAR}"</p>
        <p>REACT_APP_CUSTOM_ENV_VAR value is "{process.env.REACT_APP_CUSTOM_ENV_VAR}"</p>
        <p>TOML_ENV_VAR value is "{process.env.TOML_ENV_VAR}"</p>
        <p>REACT_APP_TOML_ENV_VAR value is "{process.env.REACT_APP_TOML_ENV_VAR}"</p>
      </div>
    );
  }
}

export default App;

在https://netlify-cra-env-vars.netlify.com/上产生以下结果：

在 Netlify.com 的站点设置中设置环境变量

在 app.netlify.com 中，CUSTOM_ENV_VAR 和 REACT_APP_CUSTOM_ENV_VAR 被设置为以下内容：

在 netlify.toml 中设置环境变量

netlify.toml 环境变量被设置为：

[build]
  command = "yarn build"
  publish = "build"

[context.production.environment]
  TOML_ENV_VAR = "From netlify.toml"
  REACT_APP_TOML_ENV_VAR = "From netlify.toml (REACT_APP_)"

[额外] 在 .env 文件中设置环境变量

您可以在项目的根目录下创建一个 .env 文件并将其提交到您的代码库中以设置环境变量。此功能需要使用 react-scripts@1.1.0 及更高版本，并使用您的 package.json 文件中的 version 值。

.env

REACT_APP_VERSION=$npm_package_version

注意：版本（以及许多其他npm暴露的环境变量）可以被访问。
不要将秘密密钥放入存储库中。

- talves

---

你能够访问Netlify提供的变量，比如COMMIT_REF吗？ - Casey

解决了我上面的问题。CRA覆盖process.env以提供REACT_APP变量。要访问Netlify变量，您必须在构建脚本中将它们重命名，如下所示：REACT_APP_COMMIT_REF="$COMMIT_REF"。 - Casey

正确。在构建期间，只有以 REACT_APP_ 开头的客户端应用程序代码才能访问它们。 - talves

Answer 2

虽然有很多方法可以实现这一点，但我发现将 Netlify 环境变量传递给我的 React 应用程序的最简单方法是在项目根目录下创建一个名为 .env 的文件，并将以下内容放入其中：

# React Environment Variables
# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env

# Netlify Environment Variables
# https://www.netlify.com/docs/continuous-deployment/#environment-variables
REACT_APP_VERSION=$npm_package_version
REACT_APP_REPOSITORY_URL=$REPOSITORY_URL
REACT_APP_BRANCH=$BRANCH
REACT_APP_PULL_REQUEST=$PULL_REQUEST
REACT_APP_HEAD=$HEAD
REACT_APP_COMMIT_REF=$COMMIT_REF
REACT_APP_CONTEXT=$CONTEXT
REACT_APP_REVIEW_ID=$REVIEW_ID
REACT_APP_INCOMING_HOOK_TITLE=$INCOMING_HOOK_TITLE
REACT_APP_INCOMING_HOOK_URL=$INCOMING_HOOK_URL
REACT_APP_INCOMING_HOOK_BODY=$INCOMING_HOOK_BODY
REACT_APP_URL=$URL
REACT_APP_DEPLOY_URL=$DEPLOY_URL
REACT_APP_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL

在一个可见的组件中展示所有这些环境变量，可以使用以下方式：

<pre>{JSON.stringify(process.env, undefined, 2)}</pre>

重要！ 每当这些环境变量发生更改时，您需要重新启动（或重新构建）应用程序才能设置。

- Beau Smith

Answer 3

在create-react-app中，测试/完成此操作的最快方法是： package.json

{
  ...
  "scripts": {
    "build": "export REACT_APP_COMMIT_REF=\"$COMMIT_REF\" && react-scripts build",
    
  }
  ...
}

config.ts

if (!process.env.REACT_APP_COMMIT_REF) {
    throw new Error("`REACT_APP_COMMIT_REF` not set")
}

console.log("REACT_APP_COMMIT_REF is", process.env.REACT_APP_COMMIT_REF)

export const config = {
    GIT_SHA: process.env.REACT_APP_COMMIT_REF,
}

由于Netlify的自动部署预览功能，您可以在应用程序控制台中验证提交的SHA。

- Taku

Answer 4

这是我如何将React的环境变量添加到Netlify中：

1. 在Netlify网站上进入您的应用程序页面。
2. 点击 站点设置。
3. 进入 构建和部署。

4. 向下滚动到 环境变量 并添加你在 React 中的 .env 文件中拥有的所有变量。

重新部署你的应用程序。

- gignu