具有 Angular 2 环境的 Heroku 管道 [英] Heroku Pipeline with Angular 2 Environments

问题描述

我已经使用 Angular 2 CLI 构建了我的 Angular 2 项目，并且能够使用这个 教程.

I've built my Angular 2 project using the Angular 2 CLI and was able to deploy the application to Heroku using this tutorial.

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

Now, I'd like to create a pipeline for the different environments of the applications (dev, staging, production, etc...).

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

In my package.json I have "postinstall": "ng build -prod" which creates a production build of my code, which my application runs off of. Is there a way that I could have -prod change based on CONFIG_VARS that I would have in my Heroku setup? For example it would say "postinstall": "ng build -dev" for a dev environment or "postinstall": "ng build -staging" for a staging environment. Or would I need to set up my project differently?

推荐答案

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

The short answer is: No, you will need to do something different.

说明:npm postinstall 脚本在构建 Heroku slug 时运行，当您对管道中的第一个 Heroku 应用程序执行 git push 时.随后，当您通过 Heroku 管道推广"发布时(例如，从开发"到暂存"再到生产")，预构建的 Heroku slug 将按原样"推广，而不是重建.

Explanation: The npm postinstall script runs when the Heroku slug is built, when you do a git push to the first Heroku app in your pipeline. Subsequently, when you "promote" releases through your Heroku pipeline (e.g. from "development" to "staging" to "production"), the pre-built Heroku slug is promoted "as is", and is NOT rebuilt.

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

Hence, let's say you have a config var set up in your "development" app that would set the argument that you pass to "ng build" to "dev". That means that when you git push to your "development" app, the slug will get built with the "dev" options. That is fine for the "development" app. HOWEVER, when you subsequently promote to "staging" and "production", you will be promoting the pre-built slug that was built with the "dev" options, which is NOT what you want.

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

So, to get the functionality you want you will need to consider a different approach.

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

One way to do it would be to run your "ng build" script in the "npm prestart" phase. That should work, and enable you to use Heroku config vars to modify your Angular2 app depending on the Heroku pipeline phase they are deployed on. However, I typically would NOT recommend this approach. This will cause your "ng build" to run every time "npm start" is run, which is quite often on Heroku (i.e. at least once every 24 hours or so, plus every time your Heroku dynos restart for whatever reason). This would cause your app to experience longer downtime than necessary EVERY time your dynos restart. Not a good idea, typically.

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

Instead, a better option may be to have your Angular2 app query your server when it initializes, and have the server return whatever pipeline-phase specific values your Angular2 app needs, based on regular Heroku config vars.

这篇关于具有 Angular 2 环境的 Heroku 管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！