Dotenv-webpack в производстве?

Question

Я пытаюсь использовать плагин dotenv-webpack. Это прекрасно работает на местном уровне. Но не удается, когда я развернусь в Heroku.

Я следовал советам в соответствии с этой проблемой Git, но все еще возникают проблемы: https://github.com/mrsteele/dotenv-webpack/issues/121

Мой конфиг веб-пакета выглядит так:

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')
  }),
 ]
};

Я ожидаю, что там, где плагин dotenv написан так, как указано выше, он разрешит мой файл.env (который находится в корне проекта, вместе с webpack.config) после сборки, предоставив моему проекту доступ к env vars, Вместо этого env vars не определены в Heroku. У меня есть набор env в Heroku. Ключ установлен на что-то вроде SECRET_KEY. Значение установлено на что-то вроде 123456. Может кто-нибудь дать мне некоторое представление? Спасибо.

Answer 1

Я не использую Heroku и не пробовал. Но я понимаю, что если вы определили переменные на панели управления Heroku, то эти переменные являются системными переменными, поэтому вам нужно использовать параметрsystemvars: true "dotenv-webpack".

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

Answer 2

Я думаю, вы можете вместо этого настроить собственный плагин для веб-пакетов.

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)
      }
    })
  ]
};

Как эти образцы в вашем webpack.prod.js файл.

Answer 3

Фактически, эта проблема возникает из-за значений среды сервера Heroku. потому что в производственном режимеdotenv назовите реальную переменную окружения, я имею в виду следующее:

echo $SECRET_KEY

Но он возвращается undefined, Зачем? потому что в производственном режиме.envфайл не будет виден. поэтому, если вы серьезно относитесь к использованию dotenv-webpack плагин вы должны передать path для разработки, как и ваш код:

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

А для производства есть два способа:

1. переходя непосредственно в конфигурацию webpack:

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

2. заполните переменную окружения сервера. для простого сервера Linux я предпочитаю использоватьexport SECRET_KEY=123456, но для Heroku прочтите эту статью

Подсказка: в других случаях, например, при использовании Docker или Kubernetes, для передачи переменных среды необходимо использовать образ или файл конфигурации кластера.

Answer 4

Основываясь на документации по dotenv, вы не используете метод config, который читает и анализирует содержимое вашего .env файл.

Кстати, поскольку вы имеете дело с webpack, я бы предложил использовать пакет dotenv-webpack. Данная документация показывает пример базовой конфигурации вместе с некоторыми другими возможными аргументами.

Если вас интересуют другие способы настройки переменных среды, в частности, в React, я рекомендую эту подробную статью.