生产环境中使用Dotenv-webpack？

Question

我正在尝试使用dotenv-webpack插件。在本地使用非常好。但是在部署到Heroku时失败了。

我已经按照这个git问题的建议进行了操作，但仍然存在问题。

我的webpack配置如下：

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位于项目的根目录），从而使我的项目可以访问环境变量。然而，在Heroku中，这些环境变量是undefined。我在Heroku中设置了一个环境变量。密钥设置为类似于SECRET_KEY的内容。值设置为类似于123456的内容。有人能给我一些见解吗？

- sWarren

---

你可以在Heroku仪表板中设置生产环境变量。 - SakoBu

@SakoBu 感谢您的回复。 我实际上已经尝试了。也许我没有正确匹配它们？我的.env文件看起来像这样：SECRET_KEY=123456在我的Heroku仪表板中，我将密钥设置为SECRET_KEY，并将值设置为123456。 这有意义吗？ - sWarren

不建议在Heroku上将.env文件设置为生产环境。他们推荐使用配置变量来进行环境设置。 - Robert Rowntree

Answer 1

我不使用Heroku，也没有尝试过它。但我了解如果你在Heroku控制面板中定义了变量，那么这些变量就是系统变量，因此你需要使用 "dotenv-webpack" 的选项systemvars: true。

声明（我再次强调，我从未使用过Heroku）： 所有这一切都取决于Heroku的部署方式，如果你在Heroku内部构建应用程序（在Heroku内部调用Webpack），那么它可以工作，但如果你将已构建好的应用程序发送到Heroku（不在Heroku内部调用Webpack），则它无法工作。

- alexojegu

---

systemvars: true 对我很有帮助。 dotenv-webpack 解析了系统环境变量并将其嵌入到应用程序中。 - Oleksandr Danylchenko

Answer 2

我认为您可以自定义webpack插件来实现此功能。

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 文件中。

- OLUWATOSIN.A AKINYELE

---

或者您可以使用 new webpack.EnvironmentPlugin 并直接传递包含变量名称的对象。 - Radu Chiriac

@OLUWATOSIN.A AKINYELE：由于某种原因，我的 webpack.config.js 无法从 .env 文件中看到 process.env.API_KEY（或此文件中的任何值）。你知道为什么吗？为了使其工作，我不得不在该行中插入该值：'API_KEY': JSON.stringify('my_value_here') - Fabricio

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，需要使用镜像或集群配置文件传递环境变量。

- AmerllicA

---

这是唯一对我起作用的方法。一旦我使用了带有process.cwd()的dotenv，它就可以运行了。谢谢！ - Igor M

Answer 4

根据 dotenv 的文档，你不需要使用 config 方法来读取和解析你的 .env 文件。

顺便说一下，由于你正在处理 webpack，我建议使用 dotenv-webpack 包。给定的文档展示了基本配置的示例以及其他可行的参数。

如果你对在 React 中设置环境变量的其他方法感兴趣，我推荐阅读 这篇文章，其中详细介绍了相关内容。

- zsgomori

---

谢谢，我实际上正在使用dotenv-webpack。在本地工作正常，但出于某种原因在生产环境中不起作用！ - sWarren

你有尝试查看Heroku生成的日志吗？难道没有任何特定的细节可以更多地说明你遇到的错误吗？我无法相信dotenv-webpack在生产环境中不起作用，一定有什么干扰了部署。 - zsgomori