Dotenv-webpack 在生产中？答案

【问题标题】：Dotenv-webpack in production?Dotenv-webpack 在生产中？
【发布时间】：2019-06-13 04:31:32
【问题描述】：

我正在尝试使用dotenv-webpack 插件。这在当地很有效。但是当我部署到 Heroku 时失败。

我已按照git issue 的建议进行操作，但仍然遇到问题。

我的 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 中设置了一个 env var。密钥设置为类似SECRET_KEY。值设置为类似123456。谁能给我一些见解？

【问题讨论】：

您可以在 heroku 仪表板中设置环境变量以进行生产...
@SakoBu 嘿，感谢您的回复。我确实做到了。也许我不匹配他们？我的 .env 文件类似于：SECRET_KEY=123456 在我的 Heroku 仪表板中，我将键设置为 SECRET_KEY，值设置为 123456。这有意义吗？
github.com/motdotla/dotenv/issues/126 .env 建议不要使用 heroku。 Set config vars 是他们推荐的 ENV 设置。

标签： reactjs heroku webpack dotenv

【解决方案1】：

基于 dotenv 的 documentation，您不会使用从您的 .env 文件中读取和解析内容的 config 方法。

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

如果你对其他专门在 React 中设置环境变量的方法感兴趣，我推荐this link 详细的文章。

【讨论】：

谢谢我实际上正在使用 dotenv-webpack。在本地工作，但由于某种原因不在生产中！
您是否尝试过查看 Heroku 生成的日志？没有任何具体细节可以更多地说明您得到的错误吗？我不敢相信 dotenv-webpack 在生产中不起作用，应该有一些东西会干扰部署。

【解决方案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 文件中的这些示例。

【讨论】：

或者您可以使用new webpack.EnvironmentPlugin 并使用变量名称直接传递您的对象
@OLUWATOSIN.A AKINYELE：出于某种原因，我的webpack.config.js 无法从.env 文件（或此文件中的任何值）中看到process.env.API_KEY。你知道为什么吗？为了使它工作，我必须在该行中插入值：'API_KEY': JSON.stringify('my_value_here')

【解决方案3】：

我不使用 Heroku，也没有尝试过。但我知道如果你在 Heroku 仪表盘上定义了变量，那么这些变量是系统变量，所以你需要使用“dotenv-webpack”的选项systemvars: true。

作为声明（我再说一遍，我从未使用过 Heroku）：所有这一切都取决于 Heroku 的部署方式，如果您在 Heroku 内部构建应用程序（您在 Heroku 内部调用 Webpack），那么它可以工作，但是如果您将构建的应用程序发送到 Heroku（您不会在 Heroku 内部调用 Webpack）那么它就不起作用了。

【讨论】：

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

【解决方案4】：

其实这个问题来自于Heroku服务器的环境值。因为在生产模式dotenv 调用真正的环境变量，我的意思是：

echo $SECRET_KEY

但它返回undefined，为什么？因为在生产模式下不会看到.env 文件。因此，如果您对使用 dotenv-webpack 插件很认真，您应该像您的代码一样通过 path 进行开发：

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

而对于制作，有两种方式：

直接在 webpack 配置中传递：

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

填写服务器环境变量。对于简单的 Linux 服务器，我更喜欢使用 export SECRET_KEY=123456，但对于 Heroku，请阅读 this article

提示：在使用 Docker 或 Kubernetes 等其他情况下，需要使用镜像或集群配置文件来传递环境变量。

【讨论】：