Using Content Delivery Networks or Content Distribution Networks (CDN) is a good way to speed up a website. In short, a CDN distributes assets like JavaScript files, images, or CSS files to locations all over the world, so that users of the websites download the assets from a close location. This helps to reduce routing hops and to decrease latency. A few months ago Amazon started a CDN service called Cloud Front. Although, Cloud Front is the New Kid in the Amazon Web Service (AWS) Family and still beta, it already has good tool support and works just fine. In fact, it is no problem to set up your own CDN with Rails and Cloud Front in just a few minutes.

To use Cloud Front, you need an Amazon S3 account and a Cloud Front account. Both can be created here. Since, the sign up process is pretty straight-forward, I will skip it here.

All AWS have good and public APIs, hence, it didn’t take the community long developing some tools. Currently my favorite tools are all Firefox based (actually I think Firefox is becoming my number one development environment), for S3 and Cloud Front get S3Fox, if you are also interested in Amazon’s EC2 service get Elasticfox. Once you have the plugin installed, open it over the Menu Tools – S3 Organizer. This will open a new Tab, now create a New Account.

You find the necessary information at the AWS site under ‘Your Account’ – ‘Access Identifiers’, then use your Access Key ID and your Secret Access Key for the account.

When the account has been created, we can start to organize our S3 files. Create a new folder which is actually a S3 bucket, but for us the difference doesn’t matter now. Next start uploading the files you want to distribute.

After all the files are up, right click on the bucket and select manage distributions. A new dialog opens in which you have to create a new distribution and insert a CNAME record, e.g. http://assets.timewhale.com for the distribution. Don’t forget to also update the CNAME at your domain registrar, at the end of this article I describe how to do this with GoDaddy, so that requests are routed to our Cloud Front distribution.

There is only one thing left, you have to set the right access rights (ACL) on the files in the bucket. Use the right click menu and select ‘Edit ACL’, make sure that everyone is allowed to read the files (default only the owner is allowed to read and write the files).

Our new, fast, and distributed network is setup and ready to go! and it took us about 5 minutes.

Wait, we have to configure Rails to use our CDN. So go to your application and open the file /config/environments/production.rb. Set the asset server to the CNAME you defined before.

# Enable serving of images, stylesheets, and javascripts from an asset server
config.action_controller.asset_host                  = “http://assets.timewhale.com”

Yep, that’s the Rails way: set one line and configure your whole application to use the CDN. With this option set, Rails will alter image, javascript and css tags to use the assets server (only in the production mode). So

<%= image_tag "timewhale.png", :alt ="TimeWhale" %>

will automatically become

http://assets.timewhale.com/images/timewhale.png

Just make sure that all the assets you want to distribute are referenced through a Rails tag and not hardcoded.

Login to your GoDaddy account and go to the Domain Manager. Select the domain you want to configure. Look for the weird-named link ‘Total DNS Control and MX Records‘ (it is in the middle of the page) and click on it. Now click ‘Add new New CNAME Record‘ and enter the appropriate data. In our case this would be ‘assets.timewhale.com’ for Alias and ‘?????.cloudfront.net’ for the Host (without the http://).

Normally it takes a couple of minutes that the CNAME get propagated. Time for a cup of coffee!

Related posts:

1. How Rails 3.1 will speed up your application with Automatic Flushing
2. Speed up your WordPress Site with the best performance plugin