基于S3与CloudFront的多版本路径型单页应用客户端路由问题咨询

我刚好处理过几乎一模一样的场景，针对你这种多版本SPA共存的情况，Lambda@Edge是最灵活、可维护性最高的解决方案——它能根据请求路径动态重写URI，完美适配每个版本的SPA路由需求。下面给你详细拆解方案和操作步骤：

核心思路 #

当用户访问类似https://<app>.cloudfront.net/v1.0.0/about这样的客户端路由时，CloudFront会向S3请求对应的文件，但S3不存在/v1.0.0/about这个对象，导致返回404。我们需要在请求到达S3之前，判断这是一个客户端路由请求，自动将URI重写为对应版本的index.html，让React Router接管路由逻辑。

具体实现步骤 #

1. 创建Lambda@Edge函数（必须在us-east-1区域） #

Lambda@Edge需要在弗吉尼亚北部（us-east-1）区域创建，因为CloudFront的全局分发依赖这个区域的函数资源。

• 登录AWS控制台，进入Lambda服务，切换到us-east-1区域
• 创建一个新的Node.js函数（推荐Node.js 18.x或更高版本），选择“从头开始创作”

2. 编写重写逻辑的Lambda代码 #

替换函数代码为以下内容，逻辑已经适配多版本路径的场景：

exports.handler = async (event) => {
    const request = event.Records[0].cf.request;
    const uri = request.uri;
    
    // 匹配/vx.x.x/格式的版本前缀（可根据你的版本命名规则调整正则）
    const versionPrefixMatch = uri.match(/^\/v\d+\.\d+\.\d+\//);
    
    if (versionPrefixMatch) {
        const versionPrefix = versionPrefixMatch[0];
        // 判断请求是否为静态资源（带文件后缀，如.js/.css/.png等）
        const isStaticAsset = /\.\w+$/.test(uri);
        
        // 如果不是静态资源，说明是客户端路由，重写为对应版本的index.html
        if (!isStaticAsset) {
            request.uri = `${versionPrefix}index.html`;
        }
    }
    
    return request;
};

这个代码的逻辑：

• 先识别请求路径中的版本前缀（比如/v1.0.0/）
• 检查请求的URI是否带有文件后缀：如果是静态资源（如main.js），直接放行；如果是客户端路由（如/about），就把URI重写为对应版本的index.html

3. 发布Lambda函数并关联到CloudFront #

• 在Lambda函数页面，点击“部署”按钮发布一个版本（Lambda@Edge需要使用已发布的版本，不能用$LATEST）
• 切换到CloudFront控制台，找到你的分发配置
• 进入“行为”标签页，编辑对应的行为（通常是默认的*行为）
• 在“Lambda函数关联”部分，选择“源请求”（Origin Request）事件类型，添加你刚才发布的Lambda函数ARN（注意ARN会自动转换为Lambda@Edge的ARN格式）
• 保存更改，等待CloudFront分发更新（通常需要10-15分钟）

替代方案（不推荐，仅作参考） #

如果暂时不想用Lambda@Edge，你可以尝试为每个版本单独设置CloudFront行为：

• 为每个版本路径（如/v1.0.0/*）创建单独的CloudFront行为
• 在每个行为的“自定义错误响应”中，添加404状态码的重定向，指向对应版本的index.html
  但这种方案的缺点很明显：版本越多，需要维护的行为越多，扩展性极差，长期来看不如Lambda@Edge灵活。

注意事项 #

• 缓存问题：测试前记得清除CloudFront的缓存，或者在测试时添加查询参数（如?test=1）绕过缓存
• 权限配置：确保Lambda函数拥有lambda:GetFunction和lambda:InvokeFunction的权限，并且CloudFront有权调用该Lambda函数（创建Lambda@Edge时会自动添加相关权限，但最好检查一下）
• 版本正则调整：如果你的版本命名规则不是vx.x.x，可以修改代码中的正则表达式，比如适配/v1/或/beta-v2.1/这类格式

内容的提问来源于stack exchange，提问作者Nicholas Haley