部署在S3存储桶的React应用无法运行，命令行sync遇权限拒绝

问题1：手动上传build文件后应用无法显示，控制台404 #

解决方案： #

• 开启S3静态网站托管，务必将索引文档设为index.html，同时把错误文档也配置为index.html。React单页应用采用前端路由，当用户直接访问子路径（如/about）时，S3会默认找不到对应物理文件，需将所有404请求重定向到index.html，由React路由接管处理。
• 检查React项目package.json中的homepage字段：若部署到S3根路径，设为"homepage": "."或直接删除；若部署到子路径，需填写对应S3路径。该字段会影响npm run build生成的静态资源引用路径，路径错误会导致静态资源加载404。
• 确认上传内容：需上传build文件夹内的所有文件（如index.html、static文件夹等），而非将build文件夹本身上传到S3根目录，避免出现build/index.html这类错误路径。

问题2：aws s3 sync命令报AccessDenied（ListObjectsV2操作权限拒绝） #

解决方案： #

• 修正桶策略中的ListBucket资源：你当前的桶策略中，s3:ListBucket动作对应的Resource配置错误。s3:ListBucket是针对存储桶本身的权限，而非桶内对象，因此Resource需改为arn:aws:s3:::storygraf-react（去掉末尾的/*）。修正后的桶策略如下：

{
"Version": "2012-10-17",
"Id": "Policy1626945244527",
"Statement": [
    {
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::storygraf-react/*"
    },
    {
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:PutObject",
        "Resource": "arn:aws:s3:::storygraf-react/*"
    },
    {
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:ListBucket",
        "Resource": "arn:aws:s3:::storygraf-react"
    }
]
}

• 配置IAM用户权限：桶策略是授予外部实体的权限，而你使用AWS CLI的IAM用户需单独配置权限。给该用户添加以下IAM策略：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket",
                "s3:PutObject",
                "s3:GetObject",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::storygraf-react",
                "arn:aws:s3:::storygraf-react/*"
            ]
        }
    ]
}

• 验证CLI凭证：执行aws configure list检查当前使用的凭证是否对应拥有上述权限的IAM用户，避免误用了其他无权限的配置profile。

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