AWS CloudFront CDN with S3 Static Website Hosting

What is CloudFront?

Amazon CloudFront is a content delivery network (CDN) service provided by Amazon Web Services (AWS). It accelerates the delivery of static and dynamic web content, including images, videos, applications, and APIs, to users worldwide with low latency and high transfer speeds.

CloudFront works by caching content at edge locations around the globe, which are strategically located data centers. When a user requests content, CloudFront automatically routes the request to the nearest edge location, reducing the distance the data must travel and minimizing latency. This results in faster load times and improved user experience.

Key features of Amazon CloudFront include:

1. Global Coverage: CloudFront operates a large network of edge locations in multiple continents, ensuring global coverage and reliable content delivery to users worldwide.

2. Low Latency: By caching content at edge locations, CloudFront reduces the time it takes for users to access web content, resulting in lower latency and faster load times.

3. High Performance: CloudFront uses advanced caching techniques, including dynamic content caching and intelligent request routing, to optimize content delivery and improve performance.

4. Security: CloudFront integrates with AWS Identity and Access Management (IAM) and AWS Certificate Manager (ACM) to provide security features such as access control and SSL/TLS encryption for content delivery.

5. Scalability: CloudFront automatically scales to handle large volumes of traffic, ensuring reliable performance during traffic spikes and high-demand periods.

6. Customization: CloudFront offers customization options, including content compression, cache control policies, and custom error pages, allowing users to tailor the CDN configuration to their specific requirements.

Overall, Amazon CloudFront is a powerful CDN solution that enables organizations to deliver web content to users globally with speed, reliability, and scalability.

STEPS:

Step:1 :- Upload Static Content to S3 Bucket

1. Navigate to S3 and click on “create bucket”.

2. Give the bucket name in format : www. <bucket_name>.com; If you have domain create a bucket with same domain name format.

3. Leave all others as default and click on create bucket.

4. Take a file from the local or github or any source.

5. Now upload the static content files like index.html,style.css,index.js etc.

6. Click on save changes.

7. When we access the web page on browser you will get:

This is because we blocked the public access to it.

Step:2 :-Create CloudFront Distribution

1. Navigate to CloudFront and click on “create distribution”.

2. Choose the origin domain as created s3 bucket.

3. Under origin access select “legacy access identities”.

4. Click on Create new OAI.

5. Under bucket policy select “Yes, update the bucket policy”

This will create a policy for cloudfront distribution to access the content on s3 bucket. Go to S3 → permission -> policy updated.

6. Under Default cache behavior →Viewer protocol policy select “Redirect HTTP to HTTPS”

7. Under WAF rules select “No”.

8. Leaving all others as default click on “create distribution”.

9. Wait for 10–15 minutes until it get deployed.

10. Now copy the domain name and paste it on your browser.

If you see this page.. Congratulations You have successfully leveraged CloudFront CDN.

Hope it helps..!

Thank you for reading so far! Before you go:

• 👏 Clap for the story if it helped :)
• 📰 View more content from me https://medium.com/@clouddevsecops