React/Vite应用部署AWS CloudFront后出现403 Forbidden错误求助

• S3存储桶权限配置问题
  检查S3存储桶的桶策略，必须允许公开读取静态资源，示例配置如下：

  {
    "Version": "2012-10-17",
    "Statement": [
      {
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::your-bucket-name/*"
      }
    ]
  }
  

  同时确认存储桶已启用静态网站托管，索引文档和错误文档都设置为index.html（适配单页应用路由需求）。

• CloudFront权限与缓存配置问题

  • 检查Origin Access Control (OAC)：确认OAC已关联到目标S3桶，且桶策略允许CloudFront访问桶内对象。
  • 验证缓存行为：针对.css、.js、.png这类静态资源，确保缓存行为允许GET/HEAD请求，没有设置错误的访问限制。
  • 排查边缘计算逻辑：如果用了CloudFront函数或Lambda@Edge，检查是否存在错误的请求拦截规则导致返回403。

• Vite构建配置问题

  • 核对vite.config.js中的base配置：如果部署在域名子路径下（比如你的https://test.com/test/），必须设置base: '/test/'；根路径部署则留空base: '/'。
  • 确认构建产物：执行npm run build后，检查dist目录的文件结构是否完整，资源路径是否正确，避免部署后路径不匹配。

• CodePipeline部署流程问题

  • 验证CodeBuild阶段命令：确保执行了npm install和npm run build，且构建后的dist目录内容被正确同步到S3。
  • 检查S3同步命令：使用aws s3 sync dist/ s3://your-bucket-name/ --delete命令，确保旧文件被清理，新构建产物完整上传。

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