Heroku 上使用 Webpack 构建的 Angular 应用程序 - 环境变量？答案

【问题标题】：Angular app on Heroku built using Webpack - Environment variables?Heroku 上使用 Webpack 构建的 Angular 应用程序 - 环境变量？
【发布时间】：2017-01-30 03:06:19
【问题描述】：

我正在尝试找出将环境变量加载到我的 AngularJS 应用程序中的最佳方法。我目前正在使用常量，它们的值来自 Webpack definePlugin 中定义的值。但是，这会导致 Heroku 出现问题，因为代码是在推送到 staging 时构建的，而当它被提升到生产环境时，它不会重新构建，因此 webpack definePlugin 常量是 staging 环境变量。

我研究过在运行时从我的 API 请求环境变量，然后将它们设置为要在前端使用的常量，但我不知道如何在初始 @987654323 之外以编程方式设置常量@机会。

如果有人知道在使用 Webpack（而不是 Grunt）时将环境变量加载到前端的任何其他更好的做法，请告诉我。

【问题讨论】：

标签： angularjs variables heroku webpack environment

【解决方案1】：

如果您在服务器中使用 node.js（和 npm），您可以考虑在“npm prestart”脚本中运行 webpack，而不是在“npm postinstall”中。

这样，每次你的 heroku dynos 启动或回收时 webpack 都会运行，因此会从适当的 Heroku 管道阶段获取你的 env var 定义。因此，当你的 staging dynos 启动时，webpack 会选择你的 staging env var 定义，而当你的生产 dynos 启动时，webpack 会选择你的生产 env var 定义。

然而，这种方法的缺点是增加了您的 dyno 在回收时停止服务的时间，因为它们现在需要在启动之前运行 webpack。

【讨论】：

如果应用程序由于某种原因被随机重启，是否也会发生这种情况？这是一个非常干净的选择，但我不确定它有多危险。
使用这个选项，每次运行 npm start 时 webpack 都会运行。因此，在 Heroku 上，这意味着每次应用程序回收或因任何其他原因重新启动时（例如当您更改环境变量、从一个管道应用程序升级到另一个等时）。
但是，如前所述，此解决方案会增加您的测功机在回收等时的停机时间。您需要确保这对您的应用程序来说不是问题。当然，有一些方法可以解决这个问题（例如，请参阅 devcenter.heroku.com/articles/preboot），但您需要了解其中的含义。