How to use CloudFront to distribute content using Amazon S3 as Origin
Tags: aws, s3, awscommunitybuilder, cloudcomputing
Published: 2024-02-18 22:37:04

CloudFront is a content delivery network that helps improve the read performance of your content by caching it at different edge locations around the world. This improves the user experience by reducing latency and providing faster access to content. CloudFront has a global network of more than 600 Points of Presence and 13 regional edge caches in over 100 cities spanning 50 countries. With global distribution, CloudFront provides DDoS protection for content, as AWS Shield and AWS Web Application Firewall (WAF) are integrated to work together seamlessly. The availability and reliability of your files are also enhanced since copies of your content are cached in multiple edge locations worldwide.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0fxigfl05dm29b4pilu.png)

**How CloudFront Works**
When using CloudFront, you need to specify the origin servers, which can either be an Amazon S3 bucket or your own HTTP server, containing the files you want to distribute. These files will be transported from the origin servers to CloudFront edge locations scattered across the world.
The origin server holds the original and definitive version of your objects. The next thing is to upload your files to your origin servers. These files can be anything that can be served over HTTP, including web pages, images, and media files.
We are using Amazon S3 bucket as our origin server, which has the option of making the objects in the bucket publicly readable. Anyone with the CloudFront URLs for your objects can access them. Alternatively, these objects can be kept private and regulate who has access to them.
Once the origin servers have been specified, a CloudFront distribution can be created. This distribution will inform CloudFront which origin servers to retrieve your files from when users request the files through your website or application.
After creating a new distribution, CloudFront will assign a domain name to it, which can be seen in the CloudFront console. 
CloudFront sends your distribution's configuration to all of its edge locations, or points of presence (POPs). These are collections of servers in geographically dispersed data centres where CloudFront caches your content.

**How to set up CloudFront**
We need to create S3 bucket for starters.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqco6t2if7jolaytez9l.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ps65vwmku6q2feav3wk4.png)

We are going to upload our files into the bucket created.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enjmo6j4efl80mkwhs1x.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rj8inrv2328meugkjcia.png)

Then we open up CloudFront and create origin access control
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxp9bgqica14xlaa5nc7.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hxcf1lo45oenntp8vru.png)
We also need to update our S3 bucket policy, and then disable WAF protection because we do not need them for this hands-on.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5oujdn1kcziutgewr5lp.png)
The default root object should be "index.html", then click Create distribution
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6whk2whjt55odg62qfk1.png)

We have successfully created a new distribution. The S3 bucket policy needs to be updated and we can copy it from the CloudFront console.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wga12hnf8hs2njwrode.png) .
We go back to the S3 bucket created, click permissions, scroll down to Bucket policy, and then Edit. Paste the copied S3 bucket policy from CloudFront.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkuuuz8rjg7u0t6ivbb8.png)

Then we go back to the CloudFront console, copy the distribution domain name then paste it into a browser.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7abwnqpscg23c15wedl5.png)

Well done for coming thus far. We have been able to successfully distribute the files using CloudFront.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5tbm36g42xffvacx4g9.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f869655le9dl09faimr5.png)

That's it, folks. 
Till I break down more AWS services, catch you soon.