Unsupported Resource ARN In Policy

Question

I am trying to create an S3 bucket for my Next JS App to serve all images.

When going to the Object URL , I receive this error:

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>6SB4RB915NRGND12</RequestId>
<HostId>nPvYg2FlnBW9cmG+R4HmMI5K++WgIftGt/FO1WZ6IFZg2qwhAO+vbjC3AM698PP9+p8h5O1WlzU=</HostId>
</Error>

I have therefore, attempted to create an Access Policy for the s3 bucket directory, but have an issue on the Resource line :

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Principal": "*",
            "Effect": "Allow",
            "Action": ["s3:getObject"],
            "Resource": ["arn:aws:s3:::hiredinchina-images/*"]
        }
    ]
}

The issue: "Unsuppored Resource ARN In Policy"

Bonus: If you could also help me just make these objects available for my website, that'd be even better. Any tips welcomed. This is my first attempt.

Answer 1

I think you shoud remove the [] in resource line.

If you want to use S3 to host website, there are a lot of blogs for that. For NextJS with S3, you can read here: https://dev.to/parmentierchristophe/how-to-deploy-static-next.js-to-aws-s3-1d4f