使用 Cloudfront 从自定义域中删除 {stage} url

Question

我有一个通过 zappa 部署到 AWS Lambda 的烧瓶应用程序。 Zappa 创建了一个 AWS rest 端点，例如 random_api_ID.execute-api.us-east-2.amazonaws.com/dev，直接在浏览器中输入时可以完美运行。但是，当我使用 Cloudfront 将此端点关联到我的自定义域 dev.mywebsite.com 时，我在对存储在子文件夹中的任何资产的响应中收到 404 错误。原因是因为 Cloudfront 正在提供诸如

之类的网址

dev.mywebsite.com/dev/static/css/style.css

而不是

dev.mywebsite.com/static/css/style.css

此外，这有效：random_api_ID.execute-api.us-east-2.amazonaws.com/dev/static/css/style.css

但这不是：random_api_ID.execute-api.us-east-2.amazonaws.com/static/css/style.css

所以，不知何故，我需要 Cloudfront 将 random_api_ID.execute-api.us-east-2.amazonaws.com/dev 与 dev.mywebsite.com 而不是 dev.mywebsite.com/dev 相关联。

我的 Cloudfront 分布具有以下参数：

 Alternate Domain Name: dev.mywebsite.com 
 Origin Domain: random_api_ID.execute-api.us-east-2.amazonaws.com
 Origin Path: dev <-- this is the stage name

我尝试通过 AWS API 网关将自定义域映射到 zappa 生成的 AWS 休息端点；但是，该解决方案会产生一个我无法控制的私有 Cloudfront 域；我更喜欢涉及配置 Cloudfront 的解决方案。

提前致谢！

Answer 1

有一个选项，您可以添加 stageName 以使您的 URL 在没有它的情况下也可以访问。

参考：https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-web-values-specify.html#DownloadDistValuesOriginPath

转到您的CloudFront 的分发，编辑指向API 网关URL.

的Origin

找到 Origin path 选项
将你的 stageName 放入其中（我的例子是 dev 阶段）所以它应该是 /dev （需要在前缀处有 /）

然后单击保存更改并等待部署大约 5 分钟。并尝试按您喜欢的方式访问它

https://<domainName>/<resourceName>

Answer 2

我发现了这个 article 并最终使用 Cloudfront Functions 解决了这个问题：

确保您有一个 Cloudfront 分配 a) 与您的 AWS API 网关端点和 b) 包含您的自定义域名。
在您的发行版 origin 选项卡中，我输入了完整的 AWS API 网关端点。我的应用程序使用 Zappa 自动生成的端点，random_api_ID.execute-api.us-east-2.amazonaws.com/dev。在 origin domain 字段中输入完整端点应该自动用 \dev.
填充 origin path 字段
在 Cloudfront 导航窗格中，选择 Functions，然后单击 Create function 按钮。
输入函数名称，然后点击Create Function。

使用 Build tab selected，转到 Function Code 部分并输入以下内容 Javascript:

function handler(event) {
    var request = event.request;
    request.uri = request.uri.replace(/^\/[^/]*\//, "/"); 
    return request;
}

保存函数
通过单击 Test 选项卡并输入 url 并附加阶段名称来测试您的功能：

单击 test function 按钮。您应该在函数代码下方看到一条成功执行的消息：

单击 Publish 选项卡并单击 Publish function 按钮发布您的函数。
在发布部分下，您需要将发布的函数关联到您的 Cloudfront 分配。单击 Add distribution 按钮。
在新的window中，select一个分布并点击Add Association按钮。

等待 Cloudfront 完成分发部署。完成后，在浏览器中检查您的自定义域并确保资产已成功加载。

使用 Cloudfront 从自定义域中删除 {stage} url

Use Cloudfront to remove {stage} from custom domain url

amazon-web-services

flask

aws-api-gateway

amazon-cloudfront

domain-mapping