CloudFront is a content delivery network, consisting of distributed servers that deliver webpages and other web content with low latency and high data transfer speed.
This gets accomplished by caching the web content at an edge location, a user will then request the content at his closest edge location. If it is already stored, he just receives it from there, otherwise, the edge location will forward the request to the actual hosting location and saves it for future requests.
Objects are cached for a period of time which is their Time To Live. Default is 1 day but it can be changed.
CloudFront Edge Location: Location where content is cached. Separate to an AWS Region/AZ.
CloudFront Origin: Origin of all files. Can be an S3 Bucket, EC2 Instance, Elastic Load Balancer, or Route53.
CloudFront Distribution: Name given to the Origin and configuration settings for the content you wish to distribute using CloudFront (CDN).
Setup CloudFront for S3
We are going to set up the CloudFront service now. In this example, we will link CloudFront to an S3 bucket that hosts just a basic image.
Create a S3 Bucket
First, navigate to the S3 service and create a new bucket. Name it and choose an AWS region that is far away from you. As we want to be able to view the image, choose the section Object Ownership ACLs enabled.
On the section Block Public Access settings for this bucket, uncheck Block all public access and acknowledge it.
Then hit the Create bucket button! Now it’s time to upload some content in the bucket, select your previously created bucket and click on Upload. Click on Add files and choose an image that has a decent size, like more than 3 MB. Enhance the Permissions tab and select Grant public-read access.
Then hit the Upload button! Now, if you select the uploaded file and click on the Object URL, you will be navigated to the uploaded image. Check the time it takes to fully display the image and remember it.
Setup CloudFront
With all the pre-configurations done, it is now time to set up CloudFront and point it to the S3 bucket. So search for the AWS service CloudFront and click on Create distribution.
The creation dashboard provides a lot of different settings. We will go through the most common ones. First of all click on the Origin domain text box and select the previously created S3 bucket. In case you just want to use CloudFront for a subfolder inside the bucket, you can add the path to the Origin Path text box.
In the section Default Cache Behaviour Settings and below Viewer, you can select which kind of connections are allowed. We are going to redirect HTTP to HTTPS, this will ensure a more save connection. Under Allowed HTTP Methods it is possible to choose GET, HEAD, OPTIONS, PUT, POST, PATCH, or DELETE, which allows users to upload content directly to the edge locations. We stick to the default one, as it isn’t necessary here.
Section Cache key and origin requests define the cache policy. You can click on view policy which navigates you to the policy overview. Here you can see the time to live settings. These are used to define how long files are cached with CloudFront. With a minimum of 1 second, a maximum of 3153600 seconds equals one year, and a default of 86400 seconds equals one day.
The settings section of CloudFront also supports AWS WAF which provides traffic filtering for well known attacks like SQL injections and cross site scripting attacks. Below that, there is the option to insert an Alternate Domain Name (CNAME), which makes it possible to use your own domain.
Now it’s time to create to distribution, so click on the button Create distribution! It will take around 5 minutes to finish. You can get a coffee meanwhile.
If everything went well, you can select your freshly created distribution and copy the Distribution domain name. Paste it into a browser tab and wait for it to finish loading. The first time you visit the website it won’t be faster than before as the content isn’t cached into CloudFront yet. So try it a second time and compare the loading time, it should be much faster. Be aware that you have to disable your browser caching, either disable it in the developer tools or just open an incognito tab and execute it there.
And that’s it! You accomplished to setup CloudFront pointing to a public S3 bucket, well done!
