如何使用angular-cli 4构建一次并部署多个环境？

Question

我们计划将 angular 部署到亚马逊 S3 静态网站，目前我们正在为每个环境（开发/生产）做单独的构建。 是构建一次并部署到所有环境的任何解决方案。

提前致谢。

Answer 1

据我了解，您希望为多个堆栈（开发、测试、生产等）构建一个构建（例如持续集成构建）。 如果您在环境文件中为每个堆栈设置不同的设置，您将拥有不同的构建。 您只有一种选择来实现这一目标，只需一次构建。

在您的开发环境文件中保留您在本地开发所需的开发设置。 在您的生产环境文件中，将占位符用于设置，这与您的开发设置不同。

然后，您始终可以构建用于生产的应用程序，并且您的应用程序将在 main.*.bundle.js 中编译占位符。

对于部署，您必须操作 main.*.bundle.js 文件（有占位符）：

1. 预部署：运行一个脚本来操作 main.*.bundle.js 来设置例如生产设置。
2. 部署：将应用程序部署到您的应用服务
3. 部署后：运行一个脚本来操作 main.*.bundle.js 以再次设置占位符

是的，这不是一个很好的解决方案，但经过 3 天的研究，这是最好的选择。 然后，您可以通过运行脚本为多个堆栈部署应用程序。

我使用 Visuals Studio Team Services 上的 powershell 脚本执行此操作，以使用那里的发布功能将应用程序部署到 Microsoft Azure。

Answer 2

刚刚完成了此问题的解决方案，可在工作中的多个部门应用程序中使用。

基本思想（受“12 因素应用程序”文档的“配置”部分的启发）是将配置存储在服务器上，与应用程序本身分开。

当您将应用程序部署到服务器时，它会从服务器获取其配置，而不是将其捆绑到应用程序中。

这完全不需要为不同的环境/部署场景重建应用程序。

这样做需要改变 Angular 应用程序使用配置的方式。

通过将配置放在应用程序的 environment.ts 文件中的常用方法，配置在运行时始终可用，并且可以在任何需要的地方注入。

对于服务器端配置，Angular 应用程序需要进行 http 调用来获取配置，因此无法立即使用。

我的方法是创建一个 ConfigurationService，通过 http 调用加载配置。 该服务通过 rxjs AsyncSubject 发布配置。 我将此服务注入到所有需要配置的类中。

AsyncSubject 仅在调用 onComplete 方法后才发出值，因此配置的使用者可以对 AsyncSubject 进行 flatMap，然后使用生成的配置来获取他们需要进行的 API 调用的 URL。

剩下的问题是如何初始化ConfigurationService...假设所有API URL都在配置中，ConfigurationService如何知道使用哪个URL来获取配置？

我对此的解决方案是安排配置文件在与 Angular 应用程序的 index.html 相同的基本 URL 中可用（例如，如果 index.html 位于https://example.com/someapp/index.html ，则配置文件位于https://example.com/someapp/config/ui-config.json ）

这允许 ConfigurationService 相对地引用配置 url。 在前面的示例中，它将使用 url“config/ui-config.json”或“./config/ui-config.json”。

对于没有后端服务的测试，我将配置文件存储在 app/assets/config 中，然后设置 Angular 的代理来拦截对配置的请求，并从 assets/config 文件夹中返回它。

对于非开发部署（QA、生产等），您需要安排在与 Angular 应用程序的 index.html 相同的位置提供配置文件。

如果您从后端单独部署 Angular 应用程序，这意味着只需将配置文件与 index.html 文件放在同一文件夹中。

对于前端和后端捆绑在一起的部署，就像我的基于 Java 的 SpringBoot 应用程序一样，使用 Java 应用程序提供的 Angular 应用程序，您需要安排后端在预期的时间提供配置文件网址。

对于 SpringBoot 应用程序，我通过使用 WebMvcConfigurerAdapter 添加一个 ResourceHandler 来实现此目的，该 ResourceHandler 使 'config' 目录（无论您选择将其存储在何处）并且它的内容就好像它是一个“静态”文件一样可用，就像 Angular 应用程序的索引.html

Answer 3

持续交付系统中 Angular 处理环境的配置库。 请参阅我创建的处理此问题的 npm 包https://www.npmjs.com/package/@golavr/ng-config

Answer 4

使用必须在根级别创建的 env.js 文件可以轻松完成配置的外部化。 请按照链接-https://www.jvandemo.com/how-to-use-environment-variables-to-configure-your-angular-application-without-a-rebuild/