Alain Fontaine’s Jabberbox

Amazon CloudFront is a relatively new product offering in the range of the AWS products. In a simple definition, you could say that CloudFront allows you to easily setup and use Amazon’s infrastructure to distribute your content (web or streaming) globally, by leveraging Amazon’s edge servers in the US, Europe, and Asia. You can just call it a CDN – Content Delivery Network, although that definition applies to services that often provide very distinct additional services, depending on the provider.

My today’s Saturday morning IT exercise was to quickly dive into the CloudFront universe and give it a spin on one of our lab websites – www.wishlist.lu , which is a gift-list creating platform without any real commercial objective.

Read on to find out how easy it was to setup CloudFront on WishList !

I have some personal experience with CDN services from my job with atHome Group, where we now use Akamai technology as our CDN provider on our websites www.athome.lu, www.athome.de, and www.immoregion.fr. We mainly use the CDN for static content, i.e. property photos, and JavaScript (.js) and stylesheet (.css) files, and we’ve had a very good experience with it so far. Content delivery is very fast in all countries we serve, and the origin servers are offloaded quite significantly. The apparent problem with services like Akamai is that they’re quite cumbersome and expensive to use for small scale projects that could benefit from a CDN other than to keep up with extreme traffic requirements (for instance, just to offload your origin servers from serving static content). CloudFront seems to be a solution for this. But let’s get into it right away.

The exercise

My exercise is quite simple : have all images (design elements and gift photos) on www.wishlist.lu served globally via CloudFront instead of serving them locally. In other words, whenever a page call requires a picture to be displayed, I don’t want my own webserver serve that content, but I want CloudFront to do so.

It turned out that this was going to be a very easy task in fact! Let me give you a quick run-down of the involved steps.

1. You need a valid AWS CloudFront account to get started, of course. You can sign-up using your credit card on the AWS website.
2. You then need to setup a CloudFront distribution. A distribution is basically the definition of a CDN service, allowing you to specify your content origin (where your original content actually lives), plus a set of options related to it (is it web/http content, or streaming content? are there particular privacy settings to be applied? do you use http or https? etc.) Amazon says : A distribution specifies the location of the original version of your objects. A distribution has a unique CloudFront.net domain name (e.g. abc123.cloudfront.net) that you can use to reference your objects through the network of edge locations. If you wish, you can also map your own domain name (e.g. images.example.com) to your distribution. You can create distributions to either download your content using the HTTP or HTTPS protocols, or stream your content using the RTMP protocol.
3. Optionally, and that’s what I did, you configure a CNAME on your domain to point to the newly created CloudFront name – it makes things look sexier, if nothing else. In my case, this is cdn.wishlist.lu, although it would have been smarter to create the CNAME on a cookie-less domain.
   

   nslookup output for my newly created CNAME

4. Once your distribution is setup and configured, you need to configure your website’s code so that images are served through CloudFront instead of being served locally. If your code permits, it’s generally just a configuration setting that you change accordingly. On www.wishlist.lu, it was as easy as changing one configuration setting as seen below.
   

   Editing the wishlist.lu application source code

   As you can see here, we use a constant that defines the URL to be used in the <img /> tag of gift photos, and I’ve just told it to use the new CNAME (pointing to my freshly created CloudFront distribution) of my CDN. The result is now that the HTML code produced by our application contains this kind of <img /> tags :

   

5. Done ! Yes, that’s it. Of course, I didn’t go into all of the details here, but these four steps are what it takes, in my case, to “CDNize” the www.wishlist.lu website.

Pitfalls

The only real challenge I encountered was to actually create a CloudFront Distribution that would use a custom origin. Distributions are designed to use Amazon S3 storage as their origin by default, but Amazon recently added the option to use your own servers as the origin for your CloudFront Distribution, making it unnecessary to first deploy (and later on sync and manage) your content to an S3 bucket. Unfortunately, the AWS Management Console, while allowing you to create CloudFront Distributions, does not yet allow you to specify your own origin server. You can currently only do that using the AWS CloudFront API.

Fortunately, there is a number of very nice graphical tools that allow you to leverage this API very conveniently. I chose to use the excellent CloudBerry Explorer for Amazon S3 to create my Distribution using a custom origin server.

Once your Distribution is setup, it will show up in the AWS Management Console and you can continue managing it from there, if you want, or you use the PRO version of CloudBerry Explorer which allows you to so, too.

Pricing

The CloudFront service is ridiculously cheap.

In Europe, the most expensive price is 0.150 USD per transferred GB, with prices decreasing as your needs grow. This is especially true if you want to use CloudFront to reduce the load on your webservers that might struggle keeping up with the sheer number of requests caused by calling static content. That’s one of the big winners I see with this service – a very cheap and quick way to give your website or web application a good performance boost without the need of adding hardware or applying otherwise complicated and time consuming optimization measures.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.