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

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

0 голосов
/ 27 сентября 2018

Как использовать переменные среды сборки в Netlify с Create-React-App?

Ответы [ 2 ]

0 голосов
/ 03 июля 2019

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

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

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

0 голосов
/ 28 сентября 2018

Вы МОЖЕТЕ использовать переменные среды в вашем 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 / : enter image description here

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

In app.netlify.com, CUSTOM_ENV_VAR и REACT_APP_CUSTOM_ENV_VAR были установлены следующим образом: enter image description here

Установка переменных средыв 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_)"

[Extra] Установка переменных среды в .env

Вы можете установить переменные окружения в файле .env в корне вашего проекта и зафиксировать в своем хранилище.Доступно следующее с react-scripts@1.1.0 и выше, которое принимает значение version вашего файла package.json.

.env

REACT_APP_VERSION=$npm_package_version

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

...