Using CloudFront with S3 and Paperclip

I wanted to cache my S3 images for my Rails app, so I changed my app to serve images using AWS CloudFront, a CDN.

Doing this was pretty simple.

(1) Set-up a AWS CloudFront instance and your S3 bucket as your origin

(2) Change your Paperclip settings to use the new CloudFront instance.  I did this in production.rb (make sure neither the url or s3_host_alias values are being written by Paperclip settings in your model):

config.paperclip_defaults = {
storage: :s3,
:url => “:s3_alias_url”,
:s3_host_alias => “”,
:path => “:rails_env/:class/:attachment/:id/:style/:filename”,
:bucket => “your-bucket-name”,
s3_credentials: {
bucket: ENV[‘AWS_S3_BUCKET’],
access_key_id: ENV[‘AWS_ACCESS_KEY_ID’],
secret_access_key: ENV[‘AWS_SECRET_ACCESS_KEY’],

and that’s it!

Now, if you check the URL of your images, it should see that their source is prefaced with your CloudFront URL.

Adding a Sitemap to Google for Sites on Heroku

I’m using the awesome Sitemap Generator gem for Rails  and also hosting my app on Heroku.  Since I’m updating my sitemap daily, and Heroku forces me to write to somewhere else, I need to create the sitemap nightly on Amazon Web Services (S3), instead.

The problem I ran into is that when I went to Google Webmaster Tools, it only allowed me to specify a url for the sitemap beginning with the name of my domain.  However, since the sitemap is hosted on AWS, it has an address that starts with an Amazon URL.

I found an answer here.

Basically what you need to do is to add a second property in Google Webmaster Tools for your S3 bucket.  I added a property to my directory with the sitemap (i.e. and then verified that I owned the property by placing the Google supplied HTML file in the sitemaps folder on S3.

The last step is adding the URL to the sitemap in settings for the new [S3] property that was added to Google Webmaster Tools.

Using SSL

Turning on SSL was a little more time consuming than I thought it would be – largely because of my naivete.  Here’s some of things I had to do to make it work.

  1. For Paperclip – for images from S3, I had to changes the parameters in has_attached_file to include ‘:s3_permissions => :private, ‘ .  This will give the S3 images a https in the url
  2. For the Recaptcha gem, add the option :ssl => true as an option to the recaptcha_tag, like so: <%= recaptcha_tags(:ssl => true) %>
  3. I had to change all external libraries I referenced for CSS or JS to https (in the url) or download a local copy and reference the local copy
  4. in each controller where a view that needed to be secured force_ssl :only => :new or force_ssl :only => [:new, :edit] for multiple actions

When you run into issues, maybe these tips will help:

  • if you’re using Chrome, Chrome will mark all pages insecure if you hit one that claims https, but has some insecure elements (so you may see a page that is secure, but it says insecure).  If you find this, pop open a new tab and paste the url in doubt
  • seek and destroy all elements that show in your source that are http instead https, except links
  • when a browser asks if you want to display insecure items, try saying no and see if you can see if there’s anything missing (in the case of it being javascript, you may not notice anything visually)