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

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

You CAN在你的环境变量中使用create-react-app在 Netlify 上，但 Create React App 的所有构建限制仍然适用。

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

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

From an example create-react-app repo https://github.com/talves/netlify-cra-env-vars托管在 Netlify 上：

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;

Produces the following at https://netlify-cra-env-vars.netlify.com/ https://netlify-cra-env-vars.netlify.com/:

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

In app.netlify.com, CUSTOM_ENV_VAR and REACT_APP_CUSTOM_ENV_VAR were set as follows:

设置环境变量netlify.toml

The netlify.toml https://github.com/talves/netlify-cra-env-vars/blob/master/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_)"

[Extra]设置环境变量.env

您可以在中设置环境变量.env文件放在项目的根目录中并提交到您的存储库。以下内容可与[email protected] /cdn-cgi/l/email-protection和更高的，这需要你version你的价值package.json file.

.env

REACT_APP_VERSION=$npm_package_version

Note:版本（以及许多其他npm 暴露的环境变量 https://gist.github.com/moos/4635bda5b04dc8113d8ea7ee974cabc2）可以访问。
不要将密钥放入您的存储库中。