Dotenv-webpack en production ?

Question

J'essaie d'utiliser le dotenv-webpack plugin. Cela fonctionne très bien localement. Mais échoue lorsque je le déploie sur Heroku.

J'ai suivi les conseils suivants problème git mais j'ai toujours des problèmes.

Ma configuration webpack ressemble à ceci :

const path = require('path');
const Dotenv = require('dotenv-webpack');

module.exports = {
  context: path.join(__dirname, '/src'),

  entry: {
    javascript: './js/index'
  },

output: {
  filename: 'bundle.js',
  path: path.join(__dirname, '/dist'),
},

resolve: {
  alias: {
    react: path.join(__dirname, 'node_modules', 'react')
  },
  extensions: ['.js', '.jsx'],
},

module: {
  rules: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loaders: ['babel-loader'],
  },
  {
    test: /\.html$/,
    loader: 'file?name=[name].[ext]',
  },
 ],
},
plugins: [
  new Dotenv({
    path: path.resolve(__dirname,'.env')
  }),
 ]
};

Je m'attends à ce que là où le dotenv est écrit comme ci-dessus, il résoudra mes problèmes de sécurité. .env (qui est situé à la racine du projet, avec le webpack.config) au moment de la construction, donnant ainsi à mon projet l'accès aux variables d'environnement. Au lieu de cela, les variables d'environnement sont undefined dans Heroku. J'ai une var env définie dans Heroku. La clé est définie comme suit SECRET_KEY . La valeur est fixée à quelque chose comme 123456 . Quelqu'un peut-il me donner une idée ?

Answer 1

Je pense que vous pouvez mettre en place un plugin webpack personnalisé à la place.

const path = require('path');
const webpack = require('webpack')
module.exports = {
  entry: './src/index.js',
  mode: 'production',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  node: {
    fs: 'empty'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
         'API_KEY': JSON.stringify(process.env.API_KEY)
      }
    })
  ]
};

Comme ces échantillons dans votre webpack.prod.js fichier.

Answer 2

Je n'utilise pas Heroku et je ne l'ai pas essayé. Mais je comprends que si vous avez défini les variables dans le tableau de bord Heroku, alors ces variables sont des variables système, et vous devez donc utiliser l'option systemvars: true de "dotenv-webpack".

Comme déclaration (je répète, je n'ai jamais utilisé Heroku) : Tout cela dépend de la façon dont le Heroku déploie, si vous construisez l'application à l'intérieur de Heroku (vous appelez à Webpack à l'intérieur de Heroku) alors cela fonctionne mais si vous envoyez l'application construite à Heroku (vous n'appelez pas à Webpack à l'intérieur de Heroku) alors cela ne fonctionne pas.

Answer 3

En fait, ce problème provient des valeurs de l'environnement du serveur Heroku, car en mode production dotenv appeler la vraie variable d'environnement, je veux dire ceci :

echo $SECRET_KEY

Mais il retourne undefined Pourquoi ? parce que dans le mode de production, le .env ne sera pas vu. Donc, si vous voulez vraiment utiliser l'application dotenv-webpack vous devez passer l'option path pour le développement, tout comme votre code :

plugins: [
  new Dotenv({
    path: path.resolve(process.cwd(), '.env'),
  }),
 ],

Et pour la production, il y a deux façons :

1. passant directement dans la configuration de webpack :

   plugins: [ new webpack.DefinePlugin({ 'process.env': { 'SECRET_KEY': '123456' }, }), ],

2. remplir la variable d'environnement du serveur. pour un simple serveur Linux, je préfère utiliser export SECRET_KEY=123456 mais pour Heroku, lire cet article

Indice : Dans d'autres cas comme l'utilisation de Docker ou de Kubernetes, il est nécessaire d'utiliser l'image ou le fichier de configuration du cluster pour passer les variables d'environnement.

Answer 4

Sur la base de la documentation de dotenv vous n'utilisez pas le config qui lit et analyse le contenu de votre site Web. .env fichier.

D'ailleurs, puisque vous avez affaire à webpack, je vous suggère d'utiliser la fonction dotenv-webpack paquet. La documentation fournie montre un exemple de la configuration de base avec d'autres arguments possibles.

Si vous êtes intéressé par d'autres façons de configurer les variables d'environnement spécifiquement dans React, je recommande ce lien article bien détaillé.