如何通过CloudFront查询字符串实现S3分发不同index.html页面

要实现根据查询参数返回不同的HTML页面，核心是通过CloudFront的边缘计算能力修改请求路径，指向S3中对应的文件。下面提供两种实用方案：

方案一：CloudFront函数（轻量低成本，推荐） #

CloudFront函数是运行在边缘节点的轻量脚本，适合简单的路径重写场景，延迟低且费用远低于Lambda@Edge。

1. 准备S3文件：在你的S3存储桶里放两个页面，默认版本index.html和AMP版本amp-index.html。
2. 创建CloudFront函数：
   • 登录AWS控制台，进入CloudFront服务，切换到「函数」标签页，点击「创建函数」。
   • 函数类型选「查看器请求」（用户请求刚到边缘节点时触发的逻辑）。
   • 替换默认代码为以下逻辑：检查请求是否带amp查询参数，是的话把请求路径改成/amp-index.html，否则保持默认的/index.html。

     function handler(event) {
         const request = event.request;
         const queryParams = request.querystring;
         
         // 只要查询参数里有amp（不管值是什么），就指向AMP页面
         if (queryParams.hasOwnProperty('amp')) {
             request.uri = '/amp-index.html';
         } else {
             // 根路径请求默认指向index.html
             if (request.uri === '/') {
                 request.uri = '/index.html';
             }
         }
         
         return request;
     }
     

3. 发布并关联分发：点击「发布」，然后把这个函数关联到你的CloudFront分发的「查看器请求」事件上。
4. 测试验证：访问https://www.example.com返回默认页面，访问https://www.example.com?amp返回AMP版本。

方案二：Lambda@Edge（适合复杂逻辑） #

如果需要更复杂的判断（比如检查amp参数的具体值、多参数组合匹配），可以用Lambda@Edge：

1. 准备S3文件：和方案一一样，先放好两个页面。
2. 创建Lambda函数：
   • 必须在us-east-1（弗吉尼亚北部）区域创建Lambda，选择Node.js运行时。
   • 编写以下代码，逻辑和CloudFront函数类似，但支持更复杂的异步操作：

     exports.handler = async (event) => {
         const request = event.Records[0].cf.request;
         const queryString = request.querystring;
         
         // 检查查询字符串是否包含amp参数
         if (queryString.includes('amp')) {
             request.uri = '/amp-index.html';
         } else if (request.uri === '/') {
             request.uri = '/index.html';
         }
         
         return request;
     };
     

3. 部署到Lambda@Edge：在Lambda函数页面点击「部署到Lambda@Edge」，选择你的CloudFront分发，触发事件选「查看器请求」，确认部署。
4. 测试验证：等待部署完成后，按方案一的方式测试访问。

关键注意事项 #

• S3权限：确保CloudFront的Origin Access Identity（OAI）有权限读取S3桶里的文件，避免出现403错误。
• 缓存策略：为了避免不同参数的请求被错误缓存，要在CloudFront分发的缓存设置里，把「查询字符串」设置为「全部转发」或者「仅包含指定的查询字符串（amp）」，让CloudFront根据查询参数区分缓存内容。
• 缓存失效：修改配置后，如果测试时还是返回旧页面，可以手动触发CloudFront的缓存失效，清除旧缓存。

内容的提问来源于stack exchange，提问作者Renan Bessa