In this blog, we will learn about one of the most exciting AWS services i.e. CloudFront.In the vast world of the internet, speed matters. Imagine your website as a superstar with fans around the globe. AWS CloudFront is like the manager making sure your fans get the best experience, no matter where they are.

CloudFront

AWS CloudFront is like a magic carpet for our website. It's a content delivery service that helps our web pages, images, and videos around the world at lightning speed. How? By storing copies of your website's stuff in special places called edge locations.

CloudFront acts as a Content Delivery Network (CDN) service, strategically caching website content at its edge locations. These locations are strategically placed worldwide, aligning with where users access the data.

Consider a scenario where a website is initially uploaded from Australia, and users, like User1 in India and User2 in the US, access the same site. Without CloudFront, the website would take time to load for both users due to the geographical distance. However, with CloudFront in action, copies of the website are distributed to the nearest edge locations, such as India for User1 and the US for User2. This way, when users access the site, it's like grabbing it from a nearby storage rather than halfway across the globe. CloudFront significantly reduces loading times, ensuring users around the world can effortlessly and swiftly access the website.

CDN provides the lowest latency as the content is cached to the nearest edge locations.

Let's deep dive into the practical so that we can get hands-on experience with CloudFront service.

Objective: Host the static website in the S3 bucket and access the website using CloudFront. Use Amazon S3 to store your static website content and use Amazon CloudFront to distribute and serve that content globally, providing a faster and more reliable experience for users

Log into the AWS account.

First of all, we will upload our static website in the S3 bucket.

Create a S3 bucket.

AWS Region: default

Bucket name: demodevopsprofile.com

Object Ownership: ACLs Disabled

Block Public Access settings for this bucket: Block all public access

Bucket Versioning: Enabled

Click on Create bucket.

To host a static website, click on the bucket name and choose the properties tab. At the bottom choose the "edit" option on static website hosting.

Now choose enabled and name the root file of the static website.

Click on Save Changes.

Now go back to the bucket and upload the files of the website.

You can easily access the code using the GitHub link.

We will try to access the website that we had uploaded.

Copy the URL from here and try to access it in the browser.

We observe that direct access to the site is forbidden due to blocking all public access at the S3 bucket level. Accessing the site directly from the S3 bucket is not preferred, as it poses security concerns and tends to have longer loading times. To address this, we will implement a CloudFront distribution on top of the S3 bucket to enhance the website's accessibility.

Now we will move to CloudFront. In the search bar, search CloudFront.

Click on Create Distribution

Origin domain: website link

Origin access: Legacy access identities (create OAI)
\>Bucket policy : Yes, update the bucket policy

Web Application Firewall (WAF): enabled (for enhanced security), for now we keept it default(disabled)

Click on Create Distribution.

Our CloudFront distribution is created. Once the deployment is completed we will try to access the website using the link: https://d24tgcl2ko5qby.cloudfront.net

Congratulations to us, we have successfully accessed our website using the CloudFront distribution instead of the S3 bucket.

In the end, AWS CloudFront is like having a super-fast, globally connected buddy for your website. It makes sure your fans get your awesome content without a hitch. So, if you want your website to be a rockstar, give CloudFront a try!

Happy Learning!!