static site works in my S3 instance but with cloudfront I'm getting an error 403 AccessDenied

Question

I'm following this tutorial about how deploy a static site to s3 and cloudfront

https://miketabor.com/host-static-website-using-aws-s3/

I've created my S3 bucket, set this as public and then upload my files, the site like

http://www.yourdomain.com.s3-website-us-east-1.amazonaws.com

works as expected, so far so good, now I created the cloudfront instance, following the guide my config is like this

Distribution ID
EMYC0...

ARN
arn:aws:cloudfront::22172726..981:distribution/EMYC0R..AP79B

Log Prefix
log_

Delivery Method
Web

Cookie Logging
Off

Distribution Status
Deployed

Comment
-
Price Class
Use All Edge Locations (Best Performance)

AWS WAF Web ACL
-

State
Enabled

Alternate Domain Names (CNAMEs)
dev.myurl.com

SSL Certificate
*.myurl.com (d89746a9-9d6d-45a9-b53c-ba24..36)

Domain Name
d1l63dvaobxx.cloudfront.net

Custom SSL Client Support
Clients that Support Server Name Indication (SNI) - (Recommended)

Security Policy
TLSv1.1_2016

Supported HTTP Versions
HTTP/2, HTTP/1.1, HTTP/1.0

IPv6
Enabled

Default Root Object
index.html (originally this was empty but I've changed this to index through not works neither)

Last Modified
2019-06-04 21:59 UTC-4

Log Bucket
www.dev.mybucketxx.com.s3.amazonaws.com

after check this article

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/DefaultRootObject.html#DefaultRootObjectHow

I supposed that the problem was the default root object, which wasn't set, so I changed this to index.html (index.html exist in the root of my s3 bucket)

but I always get this error

<Error><Code>AccessDenied</Code><Message>Access Denied</Message><RequestId>06C89B31EE8CA0A5</RequestId><HostId>NGWaHdZx0EbbzLwVPOMx5DAY6lRgmPBCCInTQeab...IOSMStfnI6pwmu4QpDYU3R0EPNk=</HostId></Error>

I think that the issue must be in cloudfront because I can access perfectly to my S3, but I can't found which could be the problem here

this is my bucket policy

{
    "Version": "2008-10-17",
    "Statement": [
        {
           "Sid": "AllowPublicRead",
           "Effect": "Allow",
           "Principal": {
               "AWS": "*"
           },
           "Action": "s3:GetObject",
           "Resource": "arn:aws:s3:::xxdomain.com/*"
       }
   ]
}

any help will be appreciate, thank you so much guys!

Answer 1

This will probably be because you selected the S3 bucket from the auto-populated drop-down menu when you defined your origin. This is what you should select if you wanted to serve your static files through CloudFront only, not if you want to serve a static website from S3.

Instead of selecting the auto-populated S3 bucket when you create your origin, you must paste in the URL of your S3 website.

What you need to do is:

1) Go into your S3 bucket > Properties > Static website hosting and copy the website URL (note: this is different to the S3 bucket endpoint):

2) Go into your CloudFront origin and paste in this URL

3) This will change your origin from an S3Origin (for static files only) to a CustomOrigin

Once this change has propagated (about 15 mins) you should be able to hit your website via your CloudFront Domain Name.