When developing websites, it’s important to deliver front-end assets as fast as possible to the client. One tool that web developers use is the Content Delivery Network (CDN). Which is basically a way of distributing front-end assets (scripts, stylesheets and images) on servers across the globe so that the files will have to travel less distance. This works by having the nearest server deliver the file to the client. Nicholas Zakas has written a really good article on how content delivery networks work. You can check that out if you want to dive deeper. In this article we’re going to take a look at Amazon Cloudfront, which is the content delivery network offered by Amazon Web Services.
Setting Up a New Distribution
Amazon Cloudfront utilizes the files from your S3 bucket. First thing that you need to do is to go to the Amazon Web Services console, select Cloudfront from the list of services, select create distribution, then click on the ‘Get Started’ button under the Web section.
Once you’re redirected to the next page, you will be greeted by a form where you enter the details of your new distribution.
Each distribution uses a specific S3 bucket and you can pick that on Origin Domain Name. It would look something like
app-name.s3.amazonaws.com. Once you have selected the Origin Domain Name, the Origin ID will automatically get filled up. You can click on the help icon on each field to get information on what they are. Knowing that, you can just leave the optional fields as blank and stick with the default values. Once you’re done filling out the form, you can click on the ‘Create Distribution’ button. After creation, it will be listed as the top item in your list of distributions. Your new distribution won’t be immediately useable. You can see it from the status field in the table. Right after creation, its status would be ‘In Progress’. I’m not really sure what goes on behind the scenes during this time, but I assume it’s distributing all the files that is stored on the S3 bucket that you selected across different servers around the globe. Once your new distribution is ready, you can now use the domain name assigned to your distribution as the domain name when linking your files. Do note that files distributed using Cloudfront should be invalidated every time you make a change to them. So it’s not recommended to use Cloudfront when you’re still developing your app. As you frequently have to invalidate the files as you make changes to your code.
You will need to invalidate files when you make changes to a file in your S3 bucket. The changes won’t take effect in the distribution that’s why you need to invalidate. To do that, click the distribution on the list. Once in there, click the invalidations tab, click ‘create invalidation’ and enter the path of the file you want to invalidate. The path is relative to the root of your bucket. So if your bucket is named
bookr and your file is at
/uploads/users/image/image-001.jpg then use that as the path. Do note that invalidating a file can take a while so use it sparingly.
That’s it! In this tutorial, you have learned how to use Amazon’s Cloudfront as a solution for your CDN needs. It’s really easy to get setup if you’re already using S3 to serve your front-end assets.