Question

我使用Angular 2 CLI构建了我的Angular 2项目，并且能够使用此tutorial将应用程序部署到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推送时。随后，当你＆＃34;推广＆＃34;通过你的Heroku管道发布（例如从＆＃34;开发＆＃34;到＃34; staging＆＃34;到＆＃34;生产＆＃34;），预先建立的Heroku slug被推广＆＃34;原样＆＃34; ＃34;，并且没有重建。

因此，我们假设您在＆＃34;开发＆＃34;中设置了配置变量。应用程序，它将设置您传递给＆＃34; ng build＆＃34;到＆＃34; dev＆＃34;。这意味着，当你git推动你的＆＃34;开发＆＃34;应用程序，slug将使用＆＃34; dev＆＃34;选项。这对于＆＃34;开发来说是好的。应用程序。但是，当你随后宣传到＆＃34; staging＆＃34;和＆＃34;生产＆＃34;，你将推广使用＆＃34; dev＆＃34;建造的预制slug。选项，这不是你想要的。

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

一种方法是运行你的构建＆＃34; ＆＃34; npm预启动中的脚本＆＃34;相。这应该工作，并使您能够使用Heroku配置变量修改您的Angular2应用程序，具体取决于它们部署的Heroku管道阶段。但是，我通常不会推荐这种方法。这将导致你的构建＆＃34;每次运行＆＃34; npm start＆＃34;运行，这通常是在Heroku上运行（即每24小时左右至少运行一次，加上每次Heroku dynos因任何原因重新启动）。这会导致您的应用程序在您的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-lot-of-time-thank-you-8703b628e3eb

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

Answer 3

当我研究相同的问题时，我发现了您的问题..如何从angular中的heroku使用环境变量。在找不到满意的答案后，我想到了使用这种（cookie）方法在管道中使用不同的API端点的方法。

在服务器响应（server.js）中使用var的内容设置一个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时才能起作用...

具有Angular 2环境的Heroku管道

3 个答案: