RoR: Using Paperclip with Amazon S3 and Cloudfront

In my spare time I’ve been working on a site to help people find their lost pets, Lost Pet Alerts. People sign up, tell it roughly where they live (postcode and country), and when pets near them go missing they get an email.

Obviously when reporting a pet as lost it’s good to upload some photos.  The app is hosted on Heroku, so the images are uploaded to Amazon S3.  To improve page load speeds I’m also using Cloudfront, Amazon’s CDN for S3, with a CNAME pointing to it.  Uploads are done using the Paperclip gem.  Unfortunately the documentation doesn’t have a good description of how to make it work with Cloudfront CNAME based URLs, so it took me far too long to get working.  So if you are having problems, here is what I’m using:

I have an S3 bucket called lostpetalerts.

I have a Cloudfront distribution for this bucket.

The CNAME static.lostpetalerts.org points to this Cloudfront distribution.

In you paperclipped model…

  has_attached_file :image,
      :styles => {
        :thumb=> "100x100#",
        :small  => "300x300>",
        :large => "900x900>"
          },
      :storage => :s3,
      :s3_credentials => {
        :access_key_id => ENV['S3_KEY'],
        :secret_access_key => ENV['S3_SECRET'] },
      :url => ':s3_alias_url',
      :s3_host_alias => 'static.lostpetalerts.org', 
      :bucket => 'lostpetalerts',
      :path => "images/:class/:id.:style.:extension"

The important bit here is the last four lines…

:url tells Paperclip what the url scheme is, in this case is tells it that it is an S3 alias. And yes, that parameter needs to be in quotes, it isn’t a Ruby label.

:s3_host_alias should be the CNAME you have set up.

:bucket should be your bucket name, obviously.

You will need to set the :path yourself. I tried it without but this kept raising a Paperclip::InfiniteInterpolationError exception. Setting it myself made that go away. There appears to be something incompatible in the default scheme.

With all that in place you should find that the URLs generated by Paperclip point to something like http://static.lostpetalerts.org/images/some_class/5.thumb.jpg. They will now be loaded quickly from Amazon’s CDN, making your overall page load much quicker, and with nicer URLs that don’t expose the Amazon-ness.