使用ACM、CloudFront与NameCheap时带URL路径的网站访问失败

看起来你碰到的是单页应用（SPA）在CloudFront+S3架构下的典型路由问题，我来帮你一步步解决：

问题根源 #

当你直接访问https://xyz.online/home或者刷新这个页面时，CloudFront会默认去S3存储桶里找名为home的对象文件，但你的网站是单页应用——所有路由都是前端框架（比如React、Vue）在浏览器端处理的，S3里根本不存在home这个文件，只有index.html这一个入口文件，所以就会返回NoSuchKey错误。

解决方案 #

1. 配置CloudFront自定义错误响应（核心步骤） #

这是解决问题的关键，让CloudFront在遇到404错误时返回你的index.html，交给前端路由处理：

• 打开CloudFront控制台，找到你的分发配置
• 切换到错误页面标签页
• 点击「创建自定义错误响应」，填写以下参数：
  • HTTP错误代码：选择404 Not Found
  • 自定义错误响应：勾选「是」
  • 响应页面路径：输入/index.html
  • HTTP响应代码：选择200 OK
• 保存配置后，等待CloudFront完成分发更新（通常需要10-15分钟，别着急）

2. 完善S3存储桶的静态网站设置 #

虽然你已经设置了默认根对象，但建议同步配置S3的错误文档：

• 进入S3控制台，打开xyz.online存储桶的「静态网站托管」设置
• 在「错误文档」栏填写index.html
• 保存设置，这能给S3本身的请求也加上一层兜底保障

3. 检查CloudFront缓存行为 #

确保你的缓存行为配置正确，不会干扰路由：

• 回到CloudFront分发的「缓存行为」标签页
• 确认针对/*路径的缓存行为中，默认根对象是index.html
• 如果你的前端路由依赖特定请求头，记得在缓存行为里配置转发这些头部，避免错误缓存路由请求

完成这些配置后，再去测试直接访问https://xyz.online/home或者刷新页面，应该就能正常加载对应的前端路由页面了。

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