【发布时间】：2022-03-22 06:25:48
【问题描述】：
我们计划将 Angular 部署到亚马逊 S3 静态网站中，目前我们正在为每个环境（开发/生产）进行单独构建。是否有任何解决方案可以构建一次并部署到所有环境。
提前致谢。
【问题讨论】：
-
这些环境有什么区别？为什么需要单独构建？
标签： angular angular-cli
【发布时间】：2022-03-22 06:25:48
【问题描述】：
据我了解，您希望为多个堆栈（开发、测试、生产等）构建一个构建（例如持续集成构建）。如果每个堆栈的环境文件中有不同的设置，您将有不同的构建。您只有一种选择，只需一个构建即可实现这一目标。
在您的开发环境文件中保留您在本地开发所需的开发设置。在您的生产环境文件中使用占位符进行设置，这与您的开发设置不同。
然后，您始终可以构建应用程序以用于生产，您的应用程序将在 main.*.bundle.js 中编译并包含占位符。
对于部署，您必须操作 main.*.bundle.js 文件（有占位符）：
- 预部署：运行一个脚本来操作 main.*.bundle.js 来设置例如生产设置。
- 部署：将应用程序部署到您的应用服务
- 部署后：运行一个脚本来操作 main.*.bundle.js 以再次设置占位符
是的，这不是一个好的解决方案，但经过 3 天的研究，这是最好的选择。然后，您可以通过运行脚本为多个堆栈部署您的应用程序。
我使用 Visuals Studio Team Services 上的 powershell 脚本执行此操作，以使用那里的发布功能将应用程序部署到 Microsoft Azure。
【讨论】：
-
嗨 daniomi，我可以知道你在 bundle.js 中的占位符是什么意思吗？谢谢
-
我认为占位符在这里是指 tokens（在 CD/CI 构建期间 token 替换 的常见做法）。在您的生产环境文件中，您提供的不是实际值，而是包含在代码中不太可能存在的分隔符中的标记，例如：
apiBaseUrl: '<<<apiBaseUrl>>>' -
这不符合构建一次部署多个环境的原则。
刚刚完成了此问题的解决方案，可用于工作中的多个部门应用程序。
基本思想（受"12 factor application" documentation 的“配置”部分的启发，是将配置存储在服务器上，与应用程序本身分开。
当您将应用程序部署到服务器时，它会从服务器获取配置，而不是将其捆绑到应用程序中。
这完全消除了针对不同环境/部署场景重新构建应用程序的需要。
这样做需要改变 Angular 应用程序使用配置的方式。
通过将配置放入应用程序的 environment.ts 文件的常用方法，配置在运行时始终可用，并且可以在任何需要的地方注入。
使用服务器端配置，Angular 应用程序需要进行 http 调用来获取配置，因此无法立即使用。
我的方法是创建一个通过 http 调用加载配置的 ConfigurationService。该服务通过 rxjs AsyncSubject 发布配置。 我将此服务注入到所有需要配置的类中。
AsyncSubject 仅在其 onComplete 方法被调用后才发出一个值，因此配置的使用者可以对 AsyncSubject 进行平面映射，然后使用生成的配置来获取他们需要进行的 API 调用的 URL .
剩下的问题是如何初始化ConfigurationService...假设所有API URL都在配置中，那么ConfigurationService如何知道使用什么URL来获取配置？
我对此的解决方案是安排配置文件在与 Angular 应用程序的 index.html 相同的基本 url 中可用（例如，如果 index.html 位于 https://example.com/someapp/index.html，那么配置文件位于 @987654323 @)
这使得 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 应用程序的 index.html
【讨论】：
-
这仍然是创建与环境无关的 webpack 包的最佳替代方法吗？我们的 Angular cli 让我们的开发运维团队措手不及，他们对 env 单独“构建”的概念非常不满
使用必须在根级别创建的 env.js 文件可以轻松完成配置的外部化。请点击链接-https://www.jvandemo.com/how-to-use-environment-variables-to-configure-your-angular-application-without-a-rebuild/
【讨论】：
用于持续交付系统中 Angular 处理环境的配置库。 请参阅我创建的处理此问题的 npm 包 https://www.npmjs.com/package/@golavr/ng-config
【讨论】：