React Vite项目部署至AWS S3后出现404(Not Found)问题求助

相关截图 #

GitHub Pages的部署历史不会直接导致AWS上的404问题，无需为此纠结。以下是按优先级排序的排查修复步骤：

1. 确认构建目录与上传内容正确 #

• 不同前端框架的构建输出目录不同：
  • Create React App（CRA）执行npm run build后生成build目录
  • Vite、Vue等框架生成dist目录
• 必须上传构建目录内部的所有文件到S3桶的根路径，而非上传整个build/dist文件夹。检查S3控制台，确保index.html直接在桶根目录，没有嵌套层级。

2. 验证S3静态网站配置 #

• 确认S3桶已开启静态网站托管，索引文档和错误文档均设置为index.html
• 配置桶权限：若网站需公开访问，添加正确的Bucket Policy允许公共读取：

  {
    "Version": "2012-10-17",
    "Statement": [
      {
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::你的桶名称/*"
      }
    ]
  }
  

• 若使用CloudFront分发：
  • 设置默认根对象为index.html
  • 确保缓存行为配置允许转发所有请求到S3源

3. 检查CodePipeline流程（第二种部署方式） #

• 验证CodeBuild的构建命令：需包含依赖安装与构建步骤，比如CRA项目用npm install && npm run build，并将输出目录指定为build（对应CRA）或dist（对应其他框架）
• 检查部署阶段是否将构建产物正确上传到S3根目录，而非上传整个构建文件夹
• 查看CodePipeline执行日志，排查是否存在构建失败、文件上传遗漏等错误

4. 修复单页应用（SPA）路由问题 #

• 前端路由（如React的BrowserRouter）在S3静态网站中默认无法识别非根路径（如/projects），会返回404。解决方法：
  • 用CloudFront的话，配置自定义错误响应：将404状态码重定向到/index.html，并将HTTP状态码设为200
  • 直接用S3静态网站的话，切换为HashRouter（React），路由路径会带#，S3能正确解析

5. 排查静态资源路径问题 #

• 项目内图片、样式等资源需使用相对路径（如./images/avatar.jpg），避免绝对路径（如/images/avatar.jpg），否则可能指向错误的根域名
• 打开构建后的index.html，检查资源引用路径是否正确，确认所有资源文件都已上传到S3对应位置

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