使用 Cloudfront 从自定义域 url 中删除 {stage} [英] Use Cloudfront to remove {stage} from custom domain url

问题描述

我有一个通过 zappa 部署到 AWS Lambda 的 Flask 应用程序.Zappa 创建了一个 AWS 休息端点，例如 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 发行版具有以下参数:

 备用域名:dev.mywebsite.com源域:random_api_ID.execute-api.us-east-2.amazonaws.comOrigin Path: dev <-- 这是舞台名称

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

提前致谢！

解决方案

我发现了这个

6. 保存您的函数

7. 通过单击 Test 选项卡并输入带有附加阶段名称的 url 来测试您的函数:

8. 点击测试功能按钮.您应该会在函数代码下方看到一条成功执行消息:

9. 单击Publish 选项卡，然后单击Publish function 按钮发布您的函数.

10. 在发布部分下，您需要将发布的函数关联到您的 Cloudfront 分配.点击添加分发按钮.

11. 在新窗口中，选择一个分布并点击Add Association按钮.

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

I have a flask app deployed to AWS Lambda via zappa. Zappa creates an AWS rest endpoint such as random_api_ID.execute-api.us-east-2.amazonaws.com/devwhich works perfectly when directly entered into the browser. But, when I use Cloudfront to associate this end point to my custom domain, dev.mywebsite.com, I get a 404 error in the response for any assets stored in a subfolder. The reason is because Cloudfront is serving urls such as

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

instead of

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

Also, this works: random_api_ID.execute-api.us-east-2.amazonaws.com/dev/static/css/style.css

But this does not: random_api_ID.execute-api.us-east-2.amazonaws.com/static/css/style.css

So, somehow, I need Cloudfront to associate random_api_ID.execute-api.us-east-2.amazonaws.com/dev with dev.mywebsite.com instead of dev.mywebsite.com/dev.

My Cloudfront distribution has the following parameters:

 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

I've tried mapping a custom domain to the zappa-generated AWS rest endpoint via AWS API Gateway; however, that solution produces a private Cloudfront domain that I have no control over; I prefer a solution that involves configuring Cloudfront.

Thanks in advance!

解决方案

I found this article and ended up solving the problem by using Cloudfront Functions:

1. Make sure you have a Cloudfront distribution that's a) associated with your AWS API Gateway endpoint and b) contains your custom domain name.

2. Within the origin tab of your distribution, I entered the full AWS API Gateway endpoint. My app uses an endpoint automatically generated by Zappa,random_api_ID.execute-api.us-east-2.amazonaws.com/dev. Entering the full endpoint into the origin domain field should automatically populate the origin path field with \dev.

3. In the Cloudfront navigation pane, choose Functions then click the Create function button.

4. Enter a function nam, then click Create Function.

5. With the Build tab selected, go to the Function Code section and enter the following Javascript:

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

6. Save your function

7. Test your function by clicking the Test tab and enter a url with an appended stage name:

8. Clicking the test function button. You should get a successful execution message below your function code:

9. Click the Publish tab and publish your function by clicking the Publish function button.

10. Under the publish section, you need to associate the published function to your Cloudfront distribution. Click the Add distribution button.

11. In the new window, select a distribution and click the Add Association button.

12. Wait for Cloudfront to finish deploying your distribution. When it's finished, check your custom domain in the browser and make sure assets are successfully loaded.

这篇关于使用 Cloudfront 从自定义域 url 中删除 {stage}的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！