I am trying to setup CloudFront
to serve static files hosted in my S3
bucket. I have setup distribution but I get AccessDenied
when trying to browse to the CSS (/CSS/stlyle.css
) file inside S3 bucket:
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>E193C9CDF4319589</RequestId>
<HostId>
xbU85maj87/jukYihXnADjXoa4j2AMLFx7t08vtWZ9SRVmU1Ijq6ry2RDAh4G1IGPIeZG9IbFZg=
</HostId>
</Error>
I have set my CloudFront distribution to my S3 bucket and created new Origin Access Identity policy
which was added automatically to the S3 bucket:
{
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "1",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E21XQ8NAGWMBQQ"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::myhost.com.cdn/*"
}
]
}
Did I miss something?
I want all my files in this S3 bucket be served via CloudFront...
*** UPDATE ***
This cloud front guide says:
By default, your Amazon S3 bucket and all of the objects in it are private—only the AWS account that created the bucket has permission to read or write the objects in it. If you want to allow anyone to access the objects in your Amazon S3 bucket using CloudFront URLs, you must grant public read permissions to the objects. (This is one of the most common mistakes when working with CloudFront and Amazon S3. You must explicitly grant privileges to each object in an Amazon S3 bucket.)
So based on this I have added new permissions to all objects inside S3 bucket to Everyone Read/Download
. Now I can access files.
But now when I access the file like https://d3u61axijg36on.cloudfront.net/css/style.css
this is being redirected to S3 URI and HTTP
. How do I disable this?
To assist with your question, I recreated the situation via:
Created an Amazon S3 bucket with no Bucket Policy
Uploaded public.jpg and make it public via "Make Public"
Uploaded private.jpg and kept it private
Created an Amazon CloudFront web distribution: Origin Domain Name: Selected my S3 bucket from the list Restrict Bucket Access: Yes Origin Access Identity: Create a New Identity Grant Read Permissions on Bucket: Yes, Update Bucket Policy
Origin Domain Name: Selected my S3 bucket from the list
Restrict Bucket Access: Yes
Origin Access Identity: Create a New Identity
Grant Read Permissions on Bucket: Yes, Update Bucket Policy
I checked the bucket, and CloudFront had added a Bucket Policy similar to yours.
The distribution was marked as In Progress
for a while. Once it said Enabled
, I accessed the files via the xxx.cloudfront.net
URL:
xxx.cloudfront.net/public.jpg redirected me to the S3 URL http://bucketname.s3.amazonaws.com/public.jpg. Yes, I could see the file, but it should not use a redirect.
xxx.cloudfront.net/private.jpg redirected me also, but I then received Access Denied because it is a private file in S3.
I then did some research and found that this is quite a common occurrence. Some people use a workaround by pointing their CloudFront distribution to the static hosted website URL, but this has the disadvantage that it will not work with the Origin Access Identity and I also suspect it won't receive the 'free S3 traffic to the edge' discount.
So, I waited overnight, tested it this morning and everything is working fine.
Bottom line: Even if it says ENABLED
, things might take several hours (eg overnight) to get themselves right. It will then work as documented.
I added index.html
in Default Root Object
under General tab of cloudFront Distribution Settings
and it worked for me. As index.html was the root file for my project!
index.html
NOT /index.html
index.html
is the Default Root Object fixed it for me.
Instead of choosing default s3 bucket for Origin Domain Name, please enter the <bucket-name>.s3-website.<region>.amazonaws.com
as origin Domain Name(You can get this URL at Static website hosting property under S3 bucket properties).
In my case I was using multiple origins with "Path Pattern" Behaviors along with an Origin Path in my S3 bucket:
Bad setup:
CloudFront Behavior: /images/*
-> My-S3-origin
My-S3-origin: Origin Path: /images
S3 files: /images/my-image.jpg
GET Request: /images/my-image.jpg -> 403
What was happening was the entire CloudFront GET request gets sent to the origin: /image/my-image.jpg
prefixed by Origin Path: /images
, so the request into S3 looks like /images/images/my-image.jpg
which doesn't exist.
Solution
remove Origin Path.
This can happen if you are using a bucket that has just been newly created.
According official reply here: AWS Forun link, you have to wait for a couple of hours after creating a new bucket before you can have cloud front distribution working on it correctly.
Solution is to temporarily work from one of your old buckets and switch to the new bucket a couple of hours later.
I also got 403 from CloudFront but my issue was a bit different so sharing it here as it might help others.
Make sure the Origin Access Id you've defined as part of the bucket policy is the right one:
{
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "1",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity HERE_GOES_YOUR_ORIGIN_ACCESS_ID"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::deepen-frontend-prod/*"
}
]
}
An Origin Access Identity Id roughly looks like E19F48VV5H01ZD.
https://i.stack.imgur.com/nZE90.png
add this in Bucket policy
{
"Sid": "2",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ESDK2T2CSNT57"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::{Bucket name }/*"
}
Making the objects in the S3 bucket public-read is the fastest way to achieve this. However this is not recommended. Rather create a origin_access_identity
under the s3 orgin policy and grant this identity access to the S3 bucket using a bucket policy. That way you can keep all the objects private.
See 100% working solution...
It can be only solve at cloudFront panel by adding error response rule.
See Solution here - react router doesn't work in aws s3 bucket
It worked for me once I added index.html to the Default Root Object under the General tab of cloudFront Distribution Settings.
As an AWS novice, I encountered a similar problem after following a tutorial to set up a public S3 bucket. I wanted my S3 bucket to be private and have CloudFront serve the files. I set up an OAI and turned on Block all public access, only to receive AccessDenied
errors on all my CloudFront URLs.
My problem was that I had created two conflicting statements in my S3 bucket policy: one when I set up the public bucket following the tutorial, and the other that was generated automatically when I set up the OAI and selected Update bucket policy:
{
"Version": "2012-10-17",
"Id": "Policy1620442091089",
"Statement": [
{
"Sid": "Stmt1620442087873",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::my-s3-bucket/*"
},
{
"Sid": "2",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXXXXX"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::my-s3-bucket/*"
}
]
}
Removing the top statement solved my AccessDenied
errors. Hopefully this helps someone new to AWS. It wasn't immediately obvious to me to check for conflicting statements.
You can point cloud front to use s3 bucket or you can host your s3 bucket as a static website and point Cloud Front to a Static website URL.
When you are pointing CloudFront to s3 bucket I used OAI as prescribed here. It works for me.
https://i.stack.imgur.com/5Ko2Q.png
https://i.stack.imgur.com/X0D3y.png
https://i.stack.imgur.com/EJ8x1.png
However, please note that you cannot access the root without mentioning a root document.
append /existingfile.html to url and see whether you can access any document by full url. If not you need check your permissions issues mostly at s3 bucket. Follow above URL.
you need to provide a default root document (index.html or something like that).. Otherwise, your root will be denied access.
When you want to use s3 the static website. Do not choose S3 origin from the available list. Rather copy and paste S3 static root. In this case, the Origin has to be the exact URI given in the Static website hosting of the bucket. NOTE that This is different from the list very similar bucket name given in options while creating cloud front distribution.
Before creating a cloud front distribution make sure the website is working via this URL.
https://i.stack.imgur.com/OJbl1.png
Success story sharing