CloudFront (CDN) for AWS S3
Tags: aws
Published: 2024-01-23 03:38:06

## CloudFront

Amazon CloudFront is a web service that speeds up the distribution of your static and dynamic web content, such as .html, .css, .js, and image files, to your users. CloudFront delivers your content through a worldwide network of data centres called edge locations. When a user requests content that you’re serving with CloudFront, the request is routed to the edge location that provides the lowest latency (time delay), so that content is delivered with the best possible performance. If the content is already in the edge location with the lowest latency, CloudFront delivers it immediately. If the content is not in that edge location, CloudFront retrieves it from an origin that you’ve defined — such as an Amazon S3 bucket, a MediaPackage channel, or an HTTP server (for example, a web server) that you have identified as the source for the definitive version of your content.

![](https://cdn-images-1.medium.com/max/2000/0*XO6YPUqH_mWIT7wh.png)

CloudFront speeds up the distribution of your content by routing each user request through the AWS backbone network to the edge location that can best serve your content. Typically, this is a CloudFront edge server that provides the fastest delivery to the viewer. Using the AWS network dramatically reduces the number of networks that your users’ requests must pass through, which improves performance. Users get lower latency — the time it takes to load the first byte of the file — and higher data transfer rates.

Prerequisites

[hosting-portfolio-on-aws-s3](https://dev.to/subbaramireddyk/hosting-portfolio-on-aws-s3-2n3f)

## Architecture

![](https://cdn-images-1.medium.com/max/2000/0*apr2HyWEoaPJKz35.png)

## Steps

Navigate to the AWS Management Console, type ‘CloudFront’ in the search bar, and select it.

![](https://cdn-images-1.medium.com/max/NaN/1*LVK_XAzh_w-nC4j1nXdCXA.png)

Select ‘**Create a CloudFront distribution**’.

![](https://cdn-images-1.medium.com/max/NaN/1*CPxxHR2LRBMnTFp6rzjMfA.png)

Choose the S3 bucket endpoint created for the portfolio as the origin domain and select use website endpoint.

![](https://cdn-images-1.medium.com/max/NaN/1*kU3PYisPQkRYrypBwXhe3A.png)

Opt for the ‘C**aching Optimized**’ cache policy in the default cache behaviour settings.

![](https://cdn-images-1.medium.com/max/NaN/1*87LlsRIaHsshTMvN74VkTw.png)

Within the Web Application Firewall (WAF), choose ‘**Do Not Enable Security Protections’**.

![](https://cdn-images-1.medium.com/max/NaN/1*d3V3v_SbDPuDiF5QONHA5A.png)

In the settings, keep everything at default and proceed by clicking ‘**Create** **Distribution**’.

![](https://cdn-images-1.medium.com/max/NaN/1*qzq6-ImMZIp4B1b5O7Ua4w.png)

You can check the created CloudFront, copy the Distribution domain name, and paste it into the browser to access the portfolio.

![](https://cdn-images-1.medium.com/max/NaN/1*cXBrHL-52XHwjwlV2KSynw.png)

When accessing the portfolio directly from the S3 bucket, the load time is observed to be 108 ms.

![](https://cdn-images-1.medium.com/max/NaN/1*sNfHsMAqY0WUvtjdZ-K58Q.png)

Accessing the portfolio through CloudFront resulted in a quicker load time, taking only 42ms.

![](https://cdn-images-1.medium.com/max/NaN/1*VZ4pERkefTHVKSKDzj-SUQ.png)

Thanks for reading! I hope you found this helpful and informative.

I’m always happy to connect with fellow tech enthusiasts and answer any questions you may have. Don’t forget to follow me for more updates on tech, programming, and more.😄😄

Follow me on LinkedIn to see interesting posts like this : ) [Linkedin](https://www.linkedin.com/in/subbaramireddy/)