具有 Angular 2 环境的 Heroku 管道

Question

我已经使用 Angular 2 CLI 构建了我的 Angular 2 项目，并且能够使用本教程将应用程序部署到 Heroku。

现在，我想为应用程序的不同环境（开发、登台、生产等）创建一个管道。

在我的 package.json 中，我有"postinstall": "ng build -prod" ，它创建了我的代码的生产版本，我的应用程序运行了该版本。 有没有一种方法可以让我根据 Heroku 设置中的-prod更改CONFIG_VARS ？ 例如，它会说"postinstall": "ng build -dev"表示开发环境或"postinstall": "ng build -staging"表示暂存环境。 或者我是否需要以不同的方式设置我的项目？

Answer 1

简短的回答是：不，您需要做一些不同的事情。

说明： npm postinstall 脚本在构建 Heroku slug 时运行，当您对管道中的第一个 Heroku 应用程序执行 git push 时。 随后，当您通过 Heroku 管道“提升”版本时（例如，从“开发”到“暂存”到“生产”），预构建的 Heroku slug 将“按原样”提升，而不是重建。

因此，假设您在“开发”应用程序中设置了一个配置变量，它将您传递给“ng build”的参数设置为“dev”。 这意味着当你 git push 到你的“开发”应用程序时，slug 将使用“开发”选项构建。 这对于“开发”应用程序来说很好。 但是，当您随后升级到“暂存”和“生产”时，您将推广使用“开发”选项构建的预构建 slug，这不是您想要的。

因此，要获得您想要的功能，您需要考虑不同的方法。

一种方法是在“npm prestart”阶段运行“ng build”脚本。 这应该可行，并使您能够使用 Heroku 配置变量根据部署它们的 Heroku 管道阶段来修改您的 Angular2 应用程序。 但是，我通常不会推荐这种方法。 这将导致您的“ng build”在每次运行“npm start”时运行，这在 Heroku 上很常见（即至少每 24 小时左右一次，加上每次您的 Heroku dynos 出于任何原因重新启动）。 这会导致您的应用每次重新启动时都会遇到比必要时间更长的停机时间。 通常不是一个好主意。

相反，更好的选择可能是让您的 Angular2 应用程序在初始化时查询您的服务器，并让服务器根据常规 Heroku 配置变量返回您的 Angular2 应用程序需要的任何管道阶段特定值。

Answer 2

如果您在 Heroku 节点环境中运行您的应用程序，您可以尝试查看此解决方案，以避免在存储库中硬编码环境变量和安全密钥： https : //medium.com/@natchiketa/angular-cli- and-os-environment-variables-4cfa3b849659

我还强烈建议看一下它的第一个响应，它引入了一个动态解决方案来在构建时创建环境文件： https : //medium.com/@h_martos/amazing-job-sara-you-save-me-a -很多时间谢谢你8703b628e3eb

也许它们不是最好的解决方案，而是避免每次以不同方式设置项目的技巧。

Answer 3

我在研究同一问题时发现了您的问题..如何在 angular 内部使用来自 heroku 的环境变量.. 在没有找到任何令人满意的答案后，我使用了这个（cookie）方法来为我的管道使用不同的 API 端点。

使用您的 var 内容在您的服务器响应 (server.js) 中设置一个 cookie：

app.use(function(req, res, next) {
  res.cookie('API_URL', process.env.API_URL || 'http://127.0.0.1:8500/api/');
  next();
});

读取模块内部的值：

this.apiUrl = cookieService.get('API_URL');

这是一种解决方法，当然只有在用户接受 cookie 时才有效......