Могу ли я использовать переменные среды сборки в Netlify с помощью Create-React-App?

Вы ЖЕСТЯНАЯ БАНКА используете переменные среды в вашем create-react-app на Netlify, но все ограничения сборки приложения Create React по-прежнему будут применяться.

• По умолчанию для вас будет определен NODE_ENV
• Будут доступны любые другие переменные среды, начиная с REACT_APP_.
• Любые другие переменные, кроме NODE_ENV, будут проигнорированы.
• Изменение любых переменных среды потребует от вас запуска новой сборки / развертывания.

ВАЖНАЯ ЗАМЕТКА: Никакие переменные среды не могут быть доступны из create-react-app динамически из браузера, размещенного на Netlify! Чтобы использовать их на статическом сайте, к ним необходимо получить доступ во время сборки.

Из пример репо create-react-app, размещенного на 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;

На https://netlify-cra-env-vars.netlify.com/ производит следующее:

Установка переменных среды в настройках сайта на Netlify.com

В app.netlify.comCUSTOM_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 в корне вашего проекта и зафиксировать его в своем репозитории. Следующее доступно для [email protected] и выше, которые принимают значение version вашего файла package.json.

.env

REACT_APP_VERSION=$npm_package_version

Доступна версия Примечание: (и многие другие открытые переменные среды npm). Не кладите секретные ключи в свое хранилище.

Хотя есть много способов сделать это, самый простой способ, который я нашел для добавления переменных среды 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>

Важный! Вам нужно будет перезапустить (или пересобрать) приложение, чтобы устанавливать эти переменные среды в любое время, когда они меняются.