无需使用AWS CDN在AWS S3部署React JS项目相关问题咨询

是否可以不使用AWS CDN直接在S3托管React项目 #

可以，S3静态网站托管功能可独立运行，无需搭配AWS CloudFront CDN使用，你无需将DNS从Cloudflare迁移到AWS，后续只需在Cloudflare的DNS记录中指向S3静态站点的公开访问端点即可正常使用。

访问S3站点提示访问拒绝的解决方案 #

按以下优先级逐一排查配置：

• 存储桶公开访问配置：进入存储桶「权限」选项卡，关闭「阻止公开访问」下的全部四项配置并保存。
• 配置桶公开读取策略：在存储桶「权限」-「桶策略」中添加如下策略，替换<你的存储桶名称>为实际存储桶名后保存：

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

• 静态托管配置校验：进入存储桶「属性」-「静态网站托管」，确认已开启该功能，同时索引文档填写为index.html，错误文档也必须填写为index.html。这一步同时是解决React Router客户端路由失效的核心配置，所有非根路径的路由请求都会回退到index.html交由React Router处理。
• 构建包上传路径校验：执行npm run build生成的build文件夹内的所有文件，需要直接上传到S3存储桶的根目录，不要将整个build文件夹上传到存储桶中，否则访问时会无法找到入口文件。
• 单文件权限校验：确认所有上传到存储桶的文件ACL为公开可读，可在上传时统一设置权限为继承存储桶的公开访问规则。

React Router路由不展示对应视图的调整 #

你当前使用的BrowserRouter本身没有配置问题，完成上述静态托管的错误文档配置后，所有路由请求都会正确返回index.html，客户端会自动加载React Router匹配对应的路由组件，无需额外修改代码逻辑。如果后续有兼容低版本浏览器或者SEO的需求，可以替换为HashRouter，否则现有代码可以直接正常运行。

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