Configuring rails 3.1 and dragonfly to use Herkou and Amazon CloudFront

dragonfly.rb

# Place this file in config/initializers/

require 'dragonfly'
app = Dragonfly[:images]

app.configure_with(:imagemagick)
app.configure_with(:rails)

if Rails.env.production?
  app.configure_with(:heroku, 'YOUR S3 BUCKET NAME HERE')
  app.datastore.configure do |c|
    # Prohibit images from being accessed directly from S3 by the public.
    # In conjunction with protect_from_dos_attacks (see below), this allows
    # our rails app to enforce access, e.g. to allow access to a 64x64 thumbnail
    # but prohibit access to the original image.
    c.storage_headers = {'x-amz-acl' => 'private'}
  end
end

app.configure do |c|
  # Make it effectively impossible to guess valid image URLs
  c.protect_from_dos_attacks = true
  # Amazon CloudFront does not allow query params, so put sha in the url itself
  c.url_format = '/media/:job/:sha/:basename.:format'
  # This secret should be unique to your app. Use SecureRandom.hex(64) to make one.
  c.secret = '647a89d8714be672d77427efb7a2a691b55276ddae5307ed6c22ba00919f9fcbe19aa839373f9b697e10f4e2471e63669d18a35b852e5d0f01307fb58070a55d'
end

app.define_macro(ActiveRecord::Base, :image_accessor)

Gemfile

gem 'dragonfly', '~>0.9.4'

group :production do
  gem 'fog' # for Amazon S3
end

production.rb

# Amazon CloudFront domain that uses the heroku app as its custom origin
config.action_controller.asset_host = "http://YOURDOMAIN.cloudfront.net"

shell

$ heroku config:add S3_KEY=XXXXXXXXX S3_SECRET=XXXXXXXXXX

@yongfook, I haven't worked with Dragonfly in a while, so my memory may be a little sketchy on this. But you should definitely get a speed boost with Cloudfront.

Are you getting cache hits on Cloudfront? You can check by opening the Web Inspector in Safari or Chrome and choosing the Network tab. With the Network window open, reload the page in your app that has the Dragonfly thumbnails. Then, click on one of the thumbnails in the Network and look at the response headers. You should see X-Cache: Hit from cloudfront. Here's a screenshot.

If you aren't getting a cache hit, that means that the image request is just passing through Cloudfront and hitting Dragonfly, as you suspected. In that case, your problem might be that you don't have the appropriate caching set up on the Rails side. (Cloudfront speeds delivery, but it can only help for assets that are cacheable in the first place.)

Here's what I did in my production.rb:

config.cache_store = :dalli_store
config.middleware.insert_before 'Dragonfly::Middleware', 'Rack::Cache', {
  :verbose     => true,
  :metastore   => 'memcached://localhost:11211/dragonfly/cache/meta',
  :entitystore => 'file:tmp/dragonfly/cache/body'
}

And in my Gemfile:

gem 'dalli' # memcache client
gem 'kgio' # non-blocking i/o gives dalli 10-20% speed boost
gem 'rack-cache', :require => 'rack/cache'

I believe I also had to enable the free 5MB memcache instance for my Heroku app.

Like I said, it has been a while. There may be better/easier cache solutions now. But at least in my test Heroku app this solution seems to work.

Thanks Matt > that definitely helped. Inspecting the headers showed that for some reason not all assets were being delivered via "hit from cloudfront".

After adding those additional settings it does appear that it is now "caching all the things" and latency has been greatly reduced! Cheers!