我可以在 Netlify 中通过 Create-React-App 使用构建环境变量吗? [英] Can I use Build Environment Variables in Netlify with Create-React-App?

问题描述

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

解决方案

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

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

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

<小时>

来自

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

在app.netlify.com中，CUSTOM_ENV_VAR和REACT_APP_CUSTOM_ENV_VAR设置如下:

在netlify.toml中设置环境变量

netlify.toml 环境变量设置为:

[构建]命令 = "纱线构建"发布 = "构建"[上下文.生产.环境]TOML_ENV_VAR = "来自 netlify.toml"REACT_APP_TOML_ENV_VAR = "来自 netlify.toml (REACT_APP_)"

[Extra] 在 .env

中设置环境变量

您可以在项目根目录的 .env 文件中设置环境变量并提交到您的存储库.以下内容适用于 react-scripts@1.1.0 及更高版本，它采用 package.json 文件的 version 值.

.env

REACT_APP_VERSION=$npm_package_version

注意:版本(以及许多其他npm 暴露的环境变量) 可以访问.
不要将密钥放入您的存储库.

How do I use Build Environment Variables in Netlify with Create-React-App?

解决方案

You CAN use environment variables in your create-react-app on Netlify, but all the build constraints of the Create React App will still apply.

• By default you will have NODE_ENV defined for you
• Any other environment variables starting with REACT_APP_ will be available
• Any other variables except NODE_ENV will be ignored
• Changing any environment variables will require you to trigger a new build/deploy

IMPORTANT NOTE: No environment variables can be accessed from a create-react-app dynamically from the browser hosted on Netlify! They must be accessed at build time to be used in the static site.

---

From an example create-react-app repo hosted on 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/:

Setting Environment Variables in site settings on Netlify.com

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

Setting Environment Variables in netlify.toml

The netlify.toml environment variables were set as:

[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] Setting environment variables in .env

You could set environment variables in a .env file at the root of your project and commit to your repository. The following is available with react-scripts@1.1.0 and higher which takes your version value of your package.json file.

.env

REACT_APP_VERSION=$npm_package_version

Note: the version (and many other npm exposed environment variables) can be accessed.
Do not put secret keys into your repository.

这篇关于我可以在 Netlify 中通过 Create-React-App 使用构建环境变量吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！