AWS CloudFront配置选择性404响应及SPA路由规则咨询

针对你的SPA托管需求，最适合的方案是使用CloudFront函数（轻量、低成本），通过修改请求路径实现规则：

实现步骤 #

1. 创建CloudFront函数 #

CloudFront函数可以在请求到达源站之前修改请求路径，完美匹配你的需求：

• 登录AWS控制台，进入CloudFront服务
• 左侧导航选择「函数」，点击「创建函数」
• 输入函数名称，事件类型选择「查看器请求」，点击「创建函数」
• 将以下代码粘贴到代码编辑器，完成后点击「发布」

function handler(event) {
    const request = event.request;
    const uri = request.uri;

    // /assets/开头的请求保持原路径，由S3返回文件或404
    if (uri.startsWith('/assets/')) {
        return request;
    }

    // 其他所有路径，直接请求index.html
    request.uri = '/index.html';
    return request;
}

2. 关联函数到CloudFront分发 #

• 进入你的CloudFront分发配置页面，切换到「行为」标签
• 选择覆盖所有路径的默认行为（路径为*的那条），点击「编辑」
• 在「函数关联」区域的「查看器请求」下拉菜单中，选择你刚创建的函数
• 点击「保存更改」，等待CloudFront部署生效（通常需要5-10分钟）

效果说明 #

• 所有以/assets/开头的请求：正常访问S3中的资源，资源不存在时S3返回404，CloudFront直接透传该响应
• 其他任何路径的请求：CloudFront会自动将请求路径修改为/index.html，返回该文件的内容及200状态码，无需重定向

备选方案：Lambda@Edge #

如果需要更复杂的逻辑（比如自定义响应头），可以使用Lambda@Edge替代CloudFront函数，代码示例如下：

exports.handler = (event, context, callback) => {
    const request = event.Records[0].cf.request;
    const uri = request.uri;

    if (uri.startsWith('/assets/')) {
        callback(null, request);
        return;
    }

    request.uri = '/index.html';
    callback(null, request);
};

部署注意：Lambda函数需创建在us-east-1区域，发布后关联到CloudFront分发的「查看器请求」阶段。

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