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

Question

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

Answer 1

您CAN使用环境变量在你create-react-app的Netlify，但对所有构建约束创建应用程序做出反应仍然适用。

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

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

从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更高版本提供以下内容，您可以充分version利用package.json文件的价值。

.env

REACT_APP_VERSION=$npm_package_version

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

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

通过将其放置在可见组件中来显示所有这些 env 变量：

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

重要的！您将需要重新启动（或重新构建）应用程序，以便在这些环境变量发生变化时设置它们。