如何在 AWS S3 存储桶中使用 Angular 应用程序对 AWS Elastic Beanstalk 中的服务进行 API 调用

Question

我将一个网站转移到 AWS，该网站在一台服务器上有 Angular，在另一台服务器上有 Nodejs/Express，并在 RDB 中使用了 PostgreSQL 数据库。 这很好用，目前正在运行，但在可扩展性和可用性方面不是很好。

因此，我已将 Angular 从通过 CloudFront 访问的 S3 存储桶中提供服务，并使用 WebHook 更新到我的 GitHub 存储库中。 这一切似乎都很好。

我有使用 Elastic Beanstalk 的 Nodejs/Express，并再次使用 WebHook 从 GitHub 存储库更新。 在部署时仍有一些项目需要解决，但我认为它们会很小（这意味着它们稍后会咬我）。

我似乎无法弄清楚是一种允许 Angular 对 Elastic Beanstalk 中的负载均衡器进行 API 调用的方法。

• 我仍然使用 proxy.config.json 吗？ 如果是这样，我指的是什么？ 我尝试在 Route 53 中为 api.myapp.com 创建一个 CNAME 记录，指向负载均衡器 DNS 的值。 那似乎不起作用。

• 我是否使用 AWS API 网关。 我在这里尝试了一些不同的东西，但似乎无法让它发挥作用。 唯一似乎有可能的事情需要我定义每个 API，如果可能的话，这将是我最后的手段。

• 这是不能做的事吗？

我已经阅读了很多有些类似问题的文章，但似乎没有一篇文章足够贴切地给我一个答案。 也许我只是看错了。 任何帮助将非常感激。

---

已编辑

在过去几天追逐许多松鼠之后，我想我已经将范围缩小到 CloudFront 的配置问题。

• 我在 Route 53 中有一条路由指向我的 CloudFront 为“dev.mydomain.com”，并且效果很好。
• 我在 Route 53 中有一条路由指向我的 Elastic Beanstalk 负载均衡器，名称为“api.mydomain.com”。
• 我可以通过将 url 输入到浏览器（例如“ https://api.mydomain.com/api/getInfo ”）来进行调用，它会随 cors 标头一起返回信息。 当我让应用程序进行与 CloudFront 从 S3 存储桶提供服务的相同调用时，我得到“访问 XMLHttpRequest at ' https://api.mydomain.com/api/getInfo ' from origin ' https://dev。 mydomain.com ' 已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。” 果然，响应头中没有 cors 头。

我发现了几篇文章似乎解决了这个问题，但它们没有奏效（或者我错误地实现了它们）。 我试图创造一个起源，我试图创造一种行为。 到目前为止，一切都没有奏效。

我任何人都处理过这个问题，或者知道一篇可以帮助我的文章，我将不胜感激。

Answer 1

您可以从 Route53 为负载均衡器 url 创建自定义域名。 您需要创建一个A记录，将Alias属性设置为yes指向负载均衡器的 dns URL。

Amazon Route 53 还提供别名记录，它们是 Amazon Route 53 特定的 DNS 扩展。 您可以创建别名记录以将流量路由到选定的 AWS 资源，包括 Amazon Elastic Load Balancing 负载均衡器、Amazon CloudFront 分配、AWS Elastic Beanstalk 环境、API 网关、VPC 接口终端节点和配置为网站的 Amazon S3 存储桶

希望这可以帮助。

参考：

问题“Amazon Route 53 支持哪些 DNS 记录类型？” 在https://aws.amazon.com/route53/faqs/

Answer 2

解决了

这个问题的答案让我接近了我想去的地方，但它仍然没有回应我的所有电话。 最后发现是数据库调用没有响应。 我没有使用弹性 beanstalk 设置数据库，因为我正在为生产设置进行概念验证，因此数据库需要分开。 终于想通了，我没有在数据库的安全组中添加规则来允许弹性beanstalk调用。 添加该规则并在 CloudFront 中添加行为和源规则后，它似乎很有魅力。