Hi, dear reader! Happy Independence Day from the Philippines! ❤
In this blog post, we will be looking into AWS CloudFront, AWS’s Content Delivery Network (CDN) service. This post is actually already long overdue and has been sitting in my drafts for about some time now.
One of the factors that could affect user experience when it comes to websites and applications is loading time. Have you encountered a site that you are very excited about, but unfortunately, its images and content take A LOT of time to load? And for every page, you wait for about 2 minutes or more for images to load? It can definitely take away excitement, doesn’t it?
This is a nightmare for both business and product owners as this could affect conversion and may increase bounce rates. To solve this, there are a lot of possible solutions, and on this post, we will be seeing how AWS CloudFront can be used as a caching mechanism for our static files.
AWS CloudFront accelerates content delivery by having many edge locations. It automatically determines the edge location that could deliver fastest to your edge customers. For a quick trivia, we actually have one edge location here in Manila. 🙂 CloudFront, too, has no additional cost, you only accrue cost everytime your content is accessed.
If you’ll be following this tutorial and creating your bucket, hope you can place it in the US Standard region, the endpoint for AWS S3. Based on my experience, having your new bucket in a different region may cause faulty redirects (i.e. temporarily routed to the wrong facility) in the beginning. And since we will be immediately experimenting with AWS CloudFront, these faulty redirects may be cached.
I. Creating S3 Bucket
AWS Cloudfront works seamlessly with AWS services like EC2 and S3 but also with servers outside of AWS. But for this quick example, we will be working with AWS Simple Storage Service (S3).
II. Uploading Your File
Also make sure that the file is viewable to everyone. before you access it via CloudFront. Else, the permission denied error message might be the one that will be cached.
Once you’re done giving permissions. Try accessing the image we just uploaded via the link on the upper part of the properties pane.
For our example, we have:
III. Creating AWS Cloudfront Distribution
We now go to CloudFront from our Services menu.
Then we click the ‘Create Distribution’ button.
For our purposes, we will choose ‘Web’:
And choose the bucket that we just created a while ago as the origin:
We can retain all other defaults for this example. If you wish to explore more on the other options, you may click on the information icon (filled circle with i) for more details on a specific option.
Once done, we just need to wait for our distribution to be deployed.
IV. Accessing Your Static File via AWS Cloudfront
Once your CloudFront distribution’s status is DEPLOYED, you may now access your static file at the domain name specified by CloudFront.
AWS S3 Link:
AWS CloudFront Link:
We just replaced the S3 URL and bucket name with the assigned AWS CloudFront domain name, which is d35qrezvuuaesq.cloudfront.net in our case.
V. Updating Your Static File
A. Deleting / Modifying Your Static File in AWS S3
Say we want to update the static file that we have cached with AWS CloudFront, modifying or deleting the static file in AWS S3 won’t make any changes to the file when accessed via the CloudFront URL unless cache has expired and a user has requested the specific file.
B. Versioning Your Static File
For purposes of updating or showing another version of your static file to the user, AWS recommends that users employ a way to distinguish different versions of your static files instead of naming them with the same name.
For example, if we have sample.png, for its version 2, we can have the name sample_2.png. Of course, this approach would require one to update the locations where he/she used the old links with the new updated links.
C. Invalidating A CloudFront Asset
If it is too tedious to change the occurrence of the old links, another method still exists: asset invalidation. AWS CloudFront allows the invalidation of assets even before cache expires to force edge locations to query your origin and get whatever is the latest version.
Note though that there is a limit to the number of assets that can be invalidated in a day.
To invalidate an asset, we choose the distribution we are interested in from the list of our existing CloudFront distributions:
Once chosen, we then click on the ‘Invalidations’ tab and click on ‘Create Validation’.
We then put the object path we want invalidated. This field also accepts wildcard elements so ‘/images/*’ is also valid. But for our purpose, since we only want sample.png to be invalidated, we put:
Yay, we just need to wait for our invalidation request to be completed (~ 5 mins) and we may now access the same CloudFront URL to get the latest version of our static file.
So yay, that was a quick overview of AWS CloudFront as a caching mechanism in AWS. 🙂
Thanks for reading! ‘Til the next blog post! ❤