javascript - Angular 应用程序的参数化

Question

我有一个 application，它由 Angular 前端、应用程序层和数据库层组成。您可以在 this image 中查看架构。

我使用 nginx 实例向客户端提供 JS 前端位，并将请求从客户端代理到应用程序层。假设我将这个 nginx 部署在 IP 18.1.1.1(假)的云虚拟机上，我可以将浏览器指向该 IP，客户端将下载 JS 代码，并配置 JS 代码，请参阅 here 来设置应用程序服务器 ip/fqdn 到相同的 ip/fqdn 我指向我的浏览器下载 ui。此时nginx代理配置kicks in并将JS代码发出的所有/api请求转发到特定的fqdn。现在，这是一个特定的 FQDN，只是因为我将这些组件部署为容器，并且 nginx 容器始终知道如何访问 http://yelb-appserver:4567/api。

我现在想创建额外的部署方法，特别是我想将 Angular 位托管在 S3 存储桶(或任何其他 Web 服务器)上，并让 JS 直接指向 API GW、单独的 EC2 之类的东西实例、云负载均衡器或代表与提供 JS 文件的 Web 服务器的 IP/FQDN 不同的 IP/FQDN 端点的任何内容。在这种情况下，我无法再使用我使用过的 appserver_env: 'http://' + window.location.host here 。

由于我想创建一个动态且可重复的部署工作流程(使用 cloudformation 或类似的)，我想知道是否有一种方法可以使用单个 JS 编译工件来参数化 Angular 代码以指向创建的/api 端点在部署时或者如果我唯一的选择是，在每次部署时，1)在部署时创建/读取/api 端点，2)以编程方式使用端点自定义 Angular 代码，3)动态重新构建 Angular 应用程序(现在)包括特定的/api 端点)和 4)最后使用 JS 代码部署网站，该代码是使用针对部署的特定应用程序实例的自定义/api 端点创建的。

谢谢。

Answer 1

使用环境变量并将它们保存在配置中(例如您的情况下的“environment.prod.ts”)，该配置将提供给运行您的构建的节点进程。您的 javascript Angular 代码可以使用这些变量，就像 api 端点一样，您可以在代码中的任何需要 api 端点的地方使用 process.env.API_ENDPOINT 。现在，为了提供这些变量，您可以使用一些简单的东西，例如API_ENDPOINT='/api' npm run build，或者对于更高级的方法，您可以使用Docker。