web-dev-qa-db-fra.com

Puis-je utiliser des variables d'environnement de génération dans Netlify avec Create-React-App?

Comment utiliser les variables d'environnement de génération dans Netlify avec Create-React-App?

environment-variablescreate-react-appnetlify
7
Laura J

Vous [~ # ~] pouvez [~ # ~] utiliser des variables d'environnement dans votre create-react-app sur Netlify, mais toutes les contraintes de construction de l'application Create React s'appliqueront toujours.

  • Par défaut, vous aurez NODE_ENV défini pour vous
  • Toutes les autres variables d'environnement commençant par REACT_APP_ sera disponible
  • Toutes les autres variables sauf NODE_ENV seront ignorées
  • La modification des variables d'environnement vous obligera à déclencher une nouvelle génération/déploiement

REMARQUE IMPORTANTE: Aucune variable d'environnement n'est accessible à partir d'un create-react-app dynamiquement depuis le navigateur hébergé sur Netlify! Ils doivent être accessibles au moment de la construction pour être utilisés dans le site statique.

À partir d'un exemple create-react-app repo hébergé sur 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;

Produit ce qui suit à https://netlify-cra-env-vars.netlify.com/ : enter image description here

Définition des variables d'environnement dans les paramètres du site sur Netlify.com

Dans app.netlify.com, CUSTOM_ENV_VAR et REACT_APP_CUSTOM_ENV_VAR ont été définis comme suit: enter image description here

Définition des variables d'environnement dans netlify.toml

Le netlify.toml les variables d'environnement ont été définies comme suit:

[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] Définition des variables d'environnement dans .env

Vous pouvez définir des variables d'environnement dans un .env fichier à la racine de votre projet et validez dans votre référentiel. Ce qui suit est disponible avec [email protected] et plus, ce qui prend votre version valeur de votre package.json fichier.

.env

REACT_APP_VERSION=$npm_package_version

Remarque: la version (et de nombreuses autres variables d'environnement exposées npm ) est accessible .
Ne mettez pas de clés secrètes dans votre référentiel.

16
talves

Bien qu'il existe de nombreuses façons d'accomplir cela, la manière la plus simple que j'ai trouvée pour obtenir des variables d'environnement Netlify dans mon React était de créer un .env fichier à la racine du projet avec le contenu suivant:

# 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

Affichez toutes ces variables env en les plaçant dans un composant visible:

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

Important! Vous devrez redémarrer (ou reconstruire) l'application afin de définir ces variables d'environnement chaque fois qu'elles changent.

2
Beau Smith