如何使用 API 网关作为 CloudFront 源配置

How to use API Gateway as a CloudFront origin configuration

对于上下文,我正在构建一个使用 Django 和 Vue.js 的小型应用程序。我想执行以下操作:

  1. 将 Django 请求(/api//admin/)发送到 API 在 AWS Lambda 函数中提供服务的网关
  2. 使用 CloudFront 中的 S3 来源向 /media//assets/ 提供请求
  3. 通过存储我的 Vue.js 应用程序静态资产的 S3 网站处理所有其他请求

我想知道是否可以对三个 CloudFront 源配置中的每一个使用相同的 domain/subdomain 来做到这一点。

我知道如何为 API 网关设置自定义域名,例如 api.mysite.com。如果我使用 mysite.com 的 Route53 A 记录指向它的 CloudFront 分配,我想我可以设置一个自定义源配置,指向 /api/ 路径模式上的 api.mysite.com/admin/。当我尝试访问 mysite.com/api/health-check/ 时,尝试此操作导致 CloudFront 出现 502 错误,但当我访问 api.mysite.com/api/health-check/(API 网关自定义域名)时,我得到了健康检查。

我想我有一个 XY Problem,因为我不确定这是否被建议或什至可能。我是否应该为 API 网关使用不同的子域并设置 CORS,以便我的 Vue 应用程序可以向 Django API 发出请求?或者是否可以为 S3 网站、S3 Origin 和 API 网关使用一个 CloudFront 发行版?

我正在使用 CDK 来定义我的所有基础架构。我以前在与 S3 网站相同的域名上使用过 ALB,并且可以在不需要 CORS 的情况下向同一域名上的 API 发出请求,但我是 API 网关的新手,不知道如何他们的自定义域名还可以使用。此外,stage 附加到 API 网关域的 URL 的事实让我感到困惑,我不确定这是否或如何影响我解决此问题的方法.

您可以在同一个 CloudFront 分配中使用多个来源来解决这个问题。

您将具有以下设置:

  • 默认来源 - 路由到您的 S3 网站
  • “/api/*”的来源 - 路由到 API 网关
  • “/admin/*”的来源 - 路由到 API 网关
  • “/media/*”的来源 - 到 S3 来源的路由
  • “/assets/*”的来源 - 到 S3 来源的路由

默认支持基于路径的路由后的其他来源(虽然一个来源只能支持单个路径)。

如果这是全部设置,那么您可以将您的主机名分配给单个 CloudFront 分配。

这里是关于 setting up multiple origins 的更多信息。