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

Question

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

Answer 1

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

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

重要说明：不能从create-react-app上通过Netlify托管的浏览器动态访问任何环境变量！必须在构建时对其进行访问才能在静态站点中使用。

---

从Netlify上托管的example create-react-app repo：

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及更高版本可以使用以下内容，它采用version文件的package.json值。

.env

REACT_APP_VERSION=$npm_package_version

注意： ：可以访问该版本（以及许多其他npm exposed environment variables）。
请勿将密钥放入存储库。

Answer 2

虽然有很多方法可以做到这一点，但我发现将Netlify Environment变量放入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

将所有这些env变量放在可见的组件中：

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

重要！。您将需要重新启动（或重新构建）应用程序，以便随时更改这些环境变量。