不启用S3托管时通过CloudFront Functions配置SPA子路径访问

你之前配置的CloudFront Function存在核心逻辑错误，导致访问返回404：

• 路径拼接规则错误：正则/^\/[^/]*\//会将/front/User/Login这类路径替换为/User/Login，后续拼接/front/index.html后，最终发往S3的请求路径为/User/Login/front/index.html，和S3桶内实际存储的front/index.html对象键完全不匹配，S3找不到对应对象自然返回404。
• 未区分请求类型：原有逻辑对所有/front/*路径统一做拼接处理，会导致js、css、图片等静态资源的请求路径也被错误改写，资源加载失败。
• 未适配S3原生源特性：关闭S3静态网站托管后，S3作为CloudFront原生源走REST API逻辑，必须完全匹配对象键才能返回正确内容，不自带静态托管模式下的索引文档fallback、路由重写能力。

前置确认 #

先确认S3桶内的文件结构符合预期：SPA打包后的所有文件存放在桶内front/前缀下，即存在对象键为front/index.html、front/assets/xxx.js这类结构，和你之前开启静态网站托管时的文件结构保持一致即可。同时对应/front/*缓存行为的*源路径（Origin Path）*配置保持为空，不要填写任何前缀，避免路径重复拼接。

Function 配置 #

将/front/*路径对应缓存行为关联的CloudFront Function触发时机设置为查看器请求（Viewer Request），替换为以下代码：

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

  // 匹配所有常见静态资源后缀，这类请求直接透传不修改路径
  const staticResourceSuffix = /\.(js|css|png|jpg|jpeg|gif|svg|ico|webp|woff|woff2|ttf|eot|map|json|txt|wasm)$/i;
  if (staticResourceSuffix.test(requestUri)) {
    return request;
  }

  // 所有无后缀的前端路由请求，统一重写到SPA入口文件
  request.uri = '/front/index.html';
  return request;
}

生效验证 #

配置发布后，在CloudFront控制台创建失效策略，失效路径填写/front/*，清理旧缓存后即可正常访问：

• 访问example.com/front/User/Login、example.com/front/Documents/这类前端路由时，Function会将请求统一转发到S3内的front/index.html对象，由SPA前端路由接管页面渲染
• 访问js、css、图片等静态资源时，请求直接透传到S3匹配对应对象键，资源可正常加载
• 根路径/的请求不受影响，正常转发到EC2的API源站

如果你的业务中有其他自定义后缀的静态资源，直接将后缀补充到代码里的staticResourceSuffix正则列表中即可。

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