Create react app ne peut pas lire la variable d'environnement après la construction

Question

J'ai une application react, créée avec create-react-app puis j'ai construit l'application avec la commande: npm run build

Il utilise serve pour exécuter l'application après la construction, si nous démarrons l'application avec du code de développement en exécutant ENV=production npm run start, il peut lire la variable process.env.ENV car j'ajoute ces plugins à la configuration de développement de webpack

   new webpack.DefinePlugin({
      'process.env':{
        'ENV': JSON.stringify(process.env.ENV),
      }
    }),

J'ajoute également le script ci-dessus à la configuration de production de webpack, mais si j'essaie cette commande après la construction ENV=prod serve -s build, elle ne peut pas lire la variable d'environnement

Comment résoudre ce problème?

Answer 1

La raison pour laquelle vous ne pouvez pas lire la variable ENV est la suivante :

(1) En mode développement, webpack surveille vos fichiers et compile votre application à la volée. Il va également lire (grâce au DefinePlugin) votre process.env.ENV et l'ajoutera en tant que variable globale. Ainsi, il transmet essentiellement des variables de process.env à votre application JS.

(2) Une fois que vous avez construit votre application (avec webpack), tout est déjà regroupé dans un ou plusieurs fichiers. Lorsque vous exécutez serve, vous démarrez simplement un serveur HTTP qui sert les fichiers de construction statiques. Il n'y a donc aucun moyen de transmettre la variable ENV à votre application.

Fondamentalement, ce que fait le DefinePlugin est d'ajouter une var au bundle. Par exemple :

new webpack.DefinePlugin({
  'token': '12356234ga5q3aesd'
})

ajoutera une ligne similaire à ceci :

var token = '12356234ga5q3aesd';

puisque les fichiers JS sont statiques, il n'y a aucun moyen de modifier cette variable après avoir construit/regroupé avec webpack. En fait, lorsque vous exécutez npm run build, vous créez le fichier binaire compilé/.dll/.jar/... et ne pouvez plus influencer son contenu via le plugin.

Answer 2

Vous pouvez ajouter un fichier .env à la racine de votre projet et définir vos variables d'environnement là-bas. Ce sera votre définition par défaut des variables d'environnement (production). Mais ensuite, vous pouvez avoir un fichier local appelé .env.local pour remplacer les valeurs par défaut.

Lors de la définition de vos variables d'environnement, assurez-vous qu'elles commencent par REACT_APP_ afin que vos définitions de variables d'environnement ressemblent à ceci :

REACT_APP_SERVER_URL=https://mon-superbe-app.herokuapp.com

De plus, ajoutez ceci à .gitignore pour ne pas commettre vos remplacements locaux :

.env*.local

Référence : Ajout de variables d'environnement de développement dans .env (create-react-app)

Answer 3

De documentation de create-react-app:

Votre projet peut consommer des variables déclarées dans votre environnement comme si elles étaient déclarées localement dans vos fichiers JS. Par défaut, NODE_ENV sera défini pour vous, ainsi que toute autre variable d'environnement commençant par REACT_APP_.

Vous pouvez les lire depuis process.env dans votre code:

render() {
  return (

      Vous exécutez cette application en mode {process.env.NODE_ENV}.

  );
}