photo by David Evers

Getting CloudFront CDN up and running for your website

Using a content delivery network (CDN) for assets should be an obvious choice for every new website, yet so many sites are not using it. There could be many reasons against not using a CDN but cost and setup time should not be among them–which is something you will find in this article.

I have been using Amazon CloudFront CDN for delivering assets (style sheets, javascripts and images) for Simply.io since it launched and it has been performing very well. Once you have it up and running it will work seamlessly in the background. The assets now load quickly and are cached properly no matter where the visitor is from.

You might be wondering what the cost of a CDN is, and to be honest, it is almost free–$0.14/month to be precise. If you have a larger website with more visitors that cost will increase but it is definitely worth the cost of a chewing gum per month.

Requirements

We will set up a few requirements for our example project and after we are done we will have completed all of them.

  • Use CDN for all static content under the “/assets” folder in the website.
  • Should not require any manual work of uploading content to the CDN storage.
  • Use a custom domain for CDN assets, e.g. cdn.example.net.
  • Show an index page when navigating directly to the CDN domain.

Getting started with Amazon Web Services

The first thing you will need to do is to create an AWS account at Amazon. They will ask you for payment methods and address details before you can continue with the next steps.

Create an S3 bucket

You should now be able to view the AWS console page where you can find S3 in the “Services” menu. S3 is a service for storing files.

Create a new bucket with the same name as your project (mine is called “simplyio”). We will use this storage bucket for delivering any files that does not exist in your website, e.g. the index page for our CDN domain.

The default file permissions for a new bucket does not allow anonymous file access, so when you upload new files to it you will need to select the files, click the Actions button and “Make Public”.

Index page for custom CDN domain

This is more a nice-to-have rather than required, but I generally add an index page for the CDN domain so that when you navigate to e.g. cdn.example.net/ it would display a short message explaining what this domain is used for. You can have a look at cdn.simplyio.net as an example.

You only need to upload a file called “index.html” to your S3 bucket and set Default Root Object (next step) for this to work. Remember to make the files public in S3.

Create and configure a CloudFront distribution

CloudFront is Amazon’s service for content distribution across the world.

Create a new distribution and select “Web” as delivery method.

In the next step you will leave all fields in the their default state except for these:

  • Origin Domain Name: In the dropdown choose the S3 bucket you created earlier.
  • Forward Query Strings: Set this to “Yes” if you want requests with unique query strings to be treated as a unique resource (handy for cache busting).
  • Alternate Domain Names (CNAMEs): Fill in the custom domain you want to use for your CDN, e.g. “cdn.example.net”. I only use one subdomain for my CDN, but if you have a lot of HTTP requests you can spread them out over multiple CDN subdomains. Note that I am using a different domain for my CDN compared to the website (simply.io vs cdn.simplyio.net) – more on why later.
  • Default Root Object: Set this to “index.html”. It means that when you navigate to http://cdn.example.net/ it will try to find a file called index.html in the S3 bucket and deliver it.

Save the new distribution.

image

We will now add a new origin server to the distribution which will be your website. Edit the new distribution and click the Origins tab. Create a new origin and fill in your domain name, e.g. “example.com” and save.

Next go to the Behaviors tab and click Create and use these values:

  • Path Pattern: “assets/*”. This will route all incoming requests starting with “assets” to your website and then cache them in CloudFront.
  • Origin: Choose the origin you just created above for your website.
  • Forward Query Strings:  Set this to “Yes” if you are using e.g. ASP.NET Bundling, so that the “v”/versioning query string is forwarded to the origin server.

Save the new behavior.

You have now configured routing where all “Assets” requests will be downloaded from your website, and all other requests will go to your S3 storage bucket.

It might take a while before your new CloudFront distribution is fully deployed.

Configure DNS for custom CDN domain

I mentioned earlier that I am using a separate domain for delivering my assets, “simplyio.net” and the reason behind this is that I want it to be a cookie-free domain (for performance). I can’t achieve this with a subdomain alone because the browser will send all cookies set on the main domain to the subdomains as well. However a cookie set on a subdomain won’t be sent to the other subdomains so if you are using “www” you won’t need to buy another domain if you need cookie-free.

Back to the subdomain. Open up the DNS editor for your domain and create a new CNAME pointing to your CloudFront URL.

Using your new CDN

By now you should have a working CDN domain that caches your assets. The last step is then to start using it on your website by pointing all assets to your CDN URL. That means instead of having a relative URL to your style sheet, “/assets/styles/main.css”, you would point it directly to “cdn.example.net/assets/styles/main.css”. A good tip is to have a function that does this automatically depending on environment.

If you are using ASP.NET with Bundling I would recommend having a look at this StackOverflow answer for how you handle CDN with Bundling.

image

You are done!

Your site should now feel a bit more snappier for your users. I still recommend running your site through YSlow or Google PageSpeed to find more points where you can increase performance.

published in Web