Angular 应用程序的参数化

Question

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

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

我现在想创建其他部署方法，特别是我想在 S3 存储桶（或任何其他 Web 服务器）上托管 Angular 位，并让 JS 直接指向 API GW 之类的东西，一个单独的 EC2例如，云负载均衡器或任何代表 IP/FQDN 端点的东西，该端点不同于为 JS 文件提供服务的 Web 服务器的 IP/FQDN。 在这种情况下，我不能再使用之前使用过的appserver_env: 'http://' + window.location.hosthere。

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

谢谢。

Answer 1

使用环境变量并将它们保存在配置中（如您的情况下的“environment.prod.ts”），这将提供给运行您的构建的节点进程。您的 javascript Angular 代码可以使用这些变量，例如对于 api 端点，您可以在代码中包含 process.env.API_ENDPOINT，无论您需要 api 端点。现在，您可以使用API_ENDPOINT='/api' npm run build 之类的简单方法来提供这些变量，或者对于更高级的方法，您可以使用 Docker。