在 webpack 构建后设置环境变量答案

【问题标题】：Setting environment variables after webpack build在 webpack 构建后设置环境变量
【发布时间】：2017-08-30 14:01:47
【问题描述】：

我目前正在尝试在 Heroku 上部署我的 Webpack 2/React/Redux 应用程序，并且我正在尝试在本地构建然后部署到 Heroku。问题在于 Heroku 提供的 PORT 环境变量是在构建后设置的 - 所以当我在本地构建时 process.env.PORT 值是未定义的。

我可以在 Heroku 服务器上构建，但它非常慢并且有 60 秒的启动超时。

我想知道是否有办法在构建之后设置环境变量？

【问题讨论】：

标签： heroku webpack

【解决方案1】：

要在 Heroku 上构建您的应用程序，通常在您的 package.json 中使用 postinstall 脚本（有关详细信息，请参阅 official docs）。或者，您可以添加一个名为 heroku-postbuild 的 npm 脚本。

~~在这两种情况下，$PORT 环境变量应该已经设置，并且在构建期间您没有 60 秒的超时限制。~~

只是为了确保我正确理解您的问题：在构建后无法在运行时读取环境变量（afaik），您必须告诉 Webpack 不要替换 process.env 变量。但是您可以在构建期间通过定义的值设置它们（例如，通过 DefinePlugin, the EnvironmentPlugin or an alias 进行配置）。

更新：

$PORT 环境变量在postinstall/heroku-postbuild 执行期间没有设置，因此不建议像前面提到的那样硬编译成代码。但是，仍然建议使用postinstall/heroku-postbuild 脚本之一在 Heroku 上构建您的应用程序。

如果你想在本地运行你的应用，你需要自己设置你的$PORT环境变量，像这样：

$> PORT=8000 node app.js

【讨论】：