Amazon CloudFront is a content delivery web service. It integrates with other Amazon Web Services to give developers and businesses an easy way to distribute content to end users with low latency, high data transfer speeds, and no minimum usage commitments.
With CloudFront's support for custom origin servers, and features of the Rails asset pipeline, building a CDN for your static assets is simple. In this blog post, we will show you how to set this up for your environment.
Do You Have Geographically Diverse Users?
Amazon CloudFront provides 52 (as of when this was written*) edge locations around the world. Your static content can be cached by these edge locations to reduce the latency of your web application. Additionally, this can reduce the load on your app servers, as it limits the number of times your app server needs to serve large static files.
You should be able to deploy your Ruby on Rails application to the Internet, and you should know the hostname or IP address for where your application is hosted. If you have followed along with the series and deployed our sample application on AWS OpsWorks, you can complete this tutorial. If not, consider trying out a deployment first.
Creating a CloudFront Distribution
First, we will create a new CloudFront distribution that uses our app as the custom origin. From the Amazon CloudFront console, click Create Distribution. Under "Web", click Get Started.
Within this form, call the Origin ID "Rails App Server", and for the Origin Domain Name, we will point to the URL of our Rails application. Here is how:
- If you have a domain name (e.g., "www.example.com"), then use that.
- If not, you should use as stable of a hostname as possible. For example, the hostname of your ELB instance, or at least an Elastic IP. For demonstration purposes, the public host name of your app server instance will also work.
If you're using something other than a domain name, don't worry, you can change the origin address later if you need to. All other options can be left at their default values, though you can turn on logging if you want. We aren't going to talk about using your own domain for the CDN just yet. Once you have your origin options set, click Create Distribution.
Configuring the Ruby on Rails App to Use CloudFront
Using CloudFront as the asset Host for your static assets is truly a one line change.
config.action_controller.asset_host = ENV['CLOUDFRONT_ENDPOINT']
This tells Rails to use your CloudFront endpoint as the hostname for static assets. Your endpoint hostname will be specified in a host environment variable.
To pick up that change if you're following along at home, go in to the OpsWorks console and edit your app:
Under "Application Source", point to the
Add a new environment variable pair:
- Key: CLOUDFRONT_ENDPOINT
- Value: The URL of your CloudFront endpoint, available in the CloudFront console. For e.g., "lettersandnumbers.cloudfront.net"
- You do not need to "Protect" this value.
Now, deploy your app! You do not need to run a database migration.
How It Works
While we wait for the deployment to complete, how does all of this work?
If you look at the page source of our application before adding the CloudFront CDN, you'll see lines like this:
<link data-turbolinks-track="true" href="/assets/application-0f3bf7fe135e88baa2cb9deb7a660251.css" media="all" rel="stylesheet" /> <script data-turbolinks-track="true" src="/assets/application-2ab5007aba477451ae5c38028892fd78.js"></script>
Those lines are how the page is including your
application.js files. In
app/views/layouts/application.html.erb, they correspond to these lines:
In turn, these include statements source from
rake assets:precompile, these files will be compiled and a fingerprint will be added to the filename. For example, I ran
rake assets:precompile and the following files were generated:
The fingerprinting is a big part of what makes all of this work so smoothly. Let's take a look at the page source after our latest deployment:
<link data-turbolinks-track="true" href="http://lettersandnumbers.cloudfront.net/assets/application-bfe54945dee8eb9f51b20d52b93aa177.css" media="all" rel="stylesheet" /> <script data-turbolinks-track="true" src="http://lettersandnumbers.cloudfront.net/assets/application-4984ddfbabfbae63ef17d0c8dca28d6c.js"></script>
You can see that we are now sourcing our static assets from CloudFront, and that nothing broke in the process. You can also see the compiled assets with fingerprints added to the filenames. When we loaded the page, the
Because fingerprinting is included out of the box, we do not need to deal with cache invalidations. When the assets change, the fingerprint will change. When that happens, CloudFront will not have the new file, and it will make a request to the origin server to get it. Eventually, the old, unused files will expire. It just works.
In this post, we took a Ruby on Rails application and cached its static assets using Amazon CloudFront and the Ruby on Rails asset pipeline. We also discussed the broad strokes of how CloudFront and Rails work together to make this simple to do.
Have any questions, comments, or problems getting your application to cache static content with Amazon CloudFront? Suggestions for topics you would like to see next? Please let us know in the comments!