Cloudfront Distribution with S3
1. Create S3 Bucket for Static Website Hosting 🌐
-
Create an S3 bucket named “domain-name.com.”
-
Set the bucket as a static website page:
-
Open the S3 bucket and go to “Properties.”
-
In the last option, enable static website hosting.
2. Configure Bucket Policy for Public Access 📑
-
In the S3 bucket, navigate to “Permissions.”
-
Edit the bucket policy and add the following policy, replacing the
-
S3 bucket ARN:
Bucket policy
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::domain-name.com/*"
}
]
}
3. Create CloudFront Distribution 📤
-
Go to CloudFront and click on “Create Distribution.”
-
Choose the S3 bucket as the origin domain.
-
Follow the snapshots as per next option .
-
Click on “Create Distribution” and wait for verification.
-
After verification, edit the settings and add the alternative domain name (alternative domain is our main domain “abc.com”)
4. Configure CloudFront Origin Domain 🌍
-
Go to CloudFront > Origins > Edit.
-
Change the origin domain value by copying the S3 static website hosting URL (without http/).
-
Save the changes.
5. Redirect Domain to CloudFront ↪️
- Copy the URL of the CloudFront distribution.
-
Create a CNAME record on Cloudflare or your domain registrar with the CloudFront URL as the value.
-
After populating the value, your website will display the CloudFront content.
-
Now, your static website is hosted on AWS S3, served through CloudFront, and secured with an ACM SSL certificate.