Use Amazon CloudFront to serve a static website hosted on Amazon S3

listen My

4 min readJan 3, 2021

Use the Amazon S3 console to create a bucket and to upload your website files.

Note: You don’t need to enable static website hosting on your bucket for this configuration. This configuration uses the REST API endpoint of the bucket, instead of the website endpoint from the static website hosting feature.

Upload your folder

Make sure to make a public folder
{
“Version”: “2008–10–17”,
“Id”: “PolicyForCloudFrontPrivateContent”,
“Statement”: [
{
“Sid”: “AllowPublicRead”,
“Effect”: “Allow”,
“Principal”: {
“AWS”: “*”
},
“Action”: “s3:GetObject”,
“Resource”: “arn:aws:s3:::cvmau/*”
},
{
“Sid”: “2”,
“Effect”: “Allow”,
“Principal”: {
“AWS”: “arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E34H0O9HH85H3”
},
“Action”: “s3:GetObject”,
“Resource”: “arn:aws:s3:::cvmau/*”
},
{
“Sid”: “3”,
“Effect”: “Allow”,
“Principal”: {
“AWS”: “arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E3ODNLXOKZQX8S”
},
“Action”: “s3:GetObject”,
“Resource”: “arn:aws:s3:::cvmau/*”
}
]
}

2. Create a CloudFront web distribution. In addition to the distribution settings that you need for your use case, enter the following:

For Origin Domain Name, select the bucket that you created.

For Restrict Bucket Access, select Yes.

For Origin Access Identity, select Create a New Identity.

For Comment, you can choose to keep the default value. Or, you can enter a custom label for the OAI.
For Grant Read Permissions on Bucket, select Yes, Update Bucket Policy.

Notes:

If you do not have,

Add DNS to your host

after confirm

Back to Cloudfront

Point Domain to CloudFront Distribution

Head back into Route 53 and hit the Hosted Zones button. If you don’t have an existing Hosted Zone, you’ll need to create one by adding the Domain Name and selecting Public Hosted Zone as the Type.