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

Posted 2023-03-04

【中文标题】如何让 AWS S3 存储桶中的 Angular 应用程序对 AWS Elastic Beanstalk 中的服务进行 API 调用

【英文标题】：How to have Angular app in AWS S3 bucket make API calls to service in AWS Elastic Beanstalk

【发布时间】：2020-05-01 16:19:45

【问题描述】：

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

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

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

我似乎想不通的是一种允许 Angular 对 Elastic Beanstalk 中的负载均衡器进行 API 调用的方法。

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

我是否使用 AWS API Gateway。我在这里尝试了一些不同的东西，但似乎无法让它工作。唯一似乎可行的事情是需要我定义每个 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 存储桶提供服务的相同调用时，我得到“对来自源 'https://dev.mydomain.com' 的 XMLHttpRequest 的访问已被 CORS 策略阻止：没有'访问控制-Allow-Origin' 标头出现在请求的资源上。”果然，响应标头中没有任何 cors 标头。

我发现了几篇似乎可以解决此问题的文章，但它们没有奏效（或者我执行不正确）。我试图创造一个起源，我试图创造一种行为。到目前为止没有任何效果。

如果有人处理过这个问题，或者知道有一篇文章对我有帮助，我将不胜感激。

【参考方案1】：

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

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

希望这会有所帮助。

参考：

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

【参考方案2】：

已解决

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