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

Question

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

提前致谢。

Answer 1

正如我所理解的那样，您希望为多个堆栈（开发，测试，生产等）提供一个构建（例如，持续集成构建）。如果每个堆栈的环境文件中有不同的设置，则将具有不同的构建。只有一个版本，你只有一个选项来实现它。

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

然后你总是可以构建你的应用程序进行生产，你将在你的应用程序中使用在。* .bundle.js中编译的占位符。

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

1. 预部署：运行一个脚本，该脚本操纵主。* .bund.js来设置例如。生产设置。
2. 部署：将应用程序部署到App Service
3. 部署后：运行一个脚本，操作main。* .bund.js再次设置占位符

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

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

Answer 2

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

基本思想（受"12 factor application" documentation的“配置”部分的启发，是将配置存储在服务器上，与应用程序本身分开。

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

这完全消除了为不同环境/部署方案重建应用程序的需要。

执行此操作需要更改Angular应用程序使用配置的方式。

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

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

我的方法是创建一个通过http调用加载配置的ConfigurationService。此服务通过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来实现这一点，该WebMvcConfigurerAdapter添加了一个ResourceHandler，它创建了'config'目录（无论你选择在哪里存储它），它的内容就像是一个'静态'文件一样可用，就像Angular应用程序的index.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/