1

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!

clagccs
  • 2,130
  • 2
  • 20
  • 32
  • What about bucket policy? https://docs.aws.amazon.com/en_us/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html @clagccs – Passatizhi Jun 05 '19 at 02:53
  • thanks for the reply @Passatizhi I've updated my question with that detail – clagccs Jun 05 '19 at 02:58
  • 1
    My version of policy is "Version": "2012-10-17" { "Id": "Policy1559706008940", "Version": "2012-10-17", "Statement": [ { "Sid": "Stmt1559706007724", "Action": [ "s3:GetObject" ], "Effect": "Allow", "Resource": "arn:aws:s3:::mybucket/*", "Principal": "*" } ] } @clagccs Try to use policy generator – Passatizhi Jun 05 '19 at 03:45
  • thank you @Passatizhi I've used the policy generator and my new file is { "Id": "Policy1559706615600", "Version": "2012-10-17", "Statement": [ { "Sid": "Stmt15597066095x7", "Action": "s3:*", "Effect": "Allow", "Resource": "arn:aws:s3:::www.mydomain.com/*", "Principal": "*" } ] } I've updated my S3 policy but I'm still getting the error, not sure if I need wait some time, but I'll update with any new here, thank you – clagccs Jun 05 '19 at 03:53
  • The article say about Redirect Non-WWW to WWW. Did you use this? Maybe something is wrong with the setting? – Passatizhi Jun 05 '19 at 03:58
  • What URL do you use to access the content via CloudFront? Does the URL end without `cloudfront.net`, or have you associated your own Domain Name with the CloudFront Distribution (eg via a Route 53 `CNAME` record)? – John Rotenstein Jun 05 '19 at 04:04

1 Answers1

2

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):

enter image description here

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

enter image description here

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

enter image description here

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

Chris McKinnel
  • 13,244
  • 6
  • 60
  • 66
  • thank you @Chris McKinnel, this seems work partially, I still getting the 403 error when I try enter to the generated cloudfront url: mydomain.s3.amazonaws.com but I notice that I don't get any error when I enter to files or images path like mydomain.s3.amazonaws.com/1.png so seems that there is some problem with the index.html file through I can enter to the site directly using s3 path like mydomain.s3-website-us-east-1.amazonaws.com and I set the Default Root Object in cloudfront to index.html – clagccs Jun 05 '19 at 21:48
  • thank you so much I was able to fix the issue using your answer and rechecking my configurations – clagccs Jun 07 '19 at 20:58