Angularjs 角2环境下的Heroku管道

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

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

---

在my package.json中，我有

“postinstall”：“ng build-prod”

，它为我的代码创建了一个生产版本，我的应用程序使用它运行。有没有一种方法可以基于Heroku设置中的

CONFIG\u VARS

更改

-prod

？例如，对于开发环境，它会说

“postinstall”：“ng build-dev”

，对于暂存环境，它会说

“postinstall”：“ng build-staging”

。或者我需要以不同的方式设置我的项目

简单的回答是：不，你需要做一些不同的事情

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

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

<>所以，为了获得你想要的功能，你需要考虑一个不同的方法。 一种方法是在“npm预启动”阶段运行“ng构建”脚本。这应该是可行的，并使您能够使用Heroku配置变量根据部署的Heroku管道阶段修改Angular2应用程序。然而，我通常不推荐这种方法。这将导致您的“ng build”在每次运行“npm start”时运行，这在Heroku上非常常见（即至少每24小时左右运行一次，再加上每次Heroku dynos出于任何原因重新启动时）。这将导致每次dynos重启时，应用程序的停机时间比需要的时间更长。这通常不是个好主意

---

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

如果您在Heroku节点环境中运行应用程序，您可以尝试查看此解决方案，以避免在存储库中硬编码环境变量和安全密钥：

我还强烈建议您看看它的第一个响应，该响应引入了一个动态解决方案，用于在构建时创建环境文件：

---

也许它们不是最好的解决方案，但这是一种避免每次设置不同项目的技巧。

我在研究同一问题时发现了你的问题。。如何在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');

---

当然，这是一个只有在用户接受cookies时才起作用的解决方案…

谢谢您的回答。因此，为了确保我正确理解，我将无法利用Angular CLI按预期为我设置的环境？不是您在问题中建议的方式，不是。Hi@Yonirabinovich我面临同样的问题，并询问了一个关于在Angular 4中实现环境服务器查询的问题，这些都是好主意，但您仍然存在一个问题，即Heroku上的postInstall命令需要将为其构建的环境作为命令的一部分进行硬编码（以便配置脚本知道要动态生成哪个环境文件-因此基本上是Catch-22）.我已经在Heroku中设置了不同于每个环境的

NODE_ENV

变量（如果需要，您可以有多个变量）。因此，当构建运行时，它会获取正确的环境变量，并相应地创建

environment.ts

文件。在我的本地环境中，我有一个

.env

文件，该文件具有相同的变量，并且该文件不应保存在存储库中。好的，我发现我误解了。基本上，您可以在构建时从Heroku环境变量动态创建环境文件。因此，您总是在创建environment.ts（但根据该应用程序上的环境变量使用不同的内容）-也就是说，您不会创建environment.staging.ts和environment.prod.ts等。感谢您的回复！没错，你明白了！我必须做同样的事情，我用不同的方法，检查我的答案，