Background image issue in Rails 3.1 asset pipe line with cloudfront CDN

Question

I have a rails 3.1.0 heroku app that uses Amazon cloudfront cdn to deliver assets.Everything works fine except for the background image, its not rendered.Inspecting the request in firebug/Yslow shows GET box.png 403 Forbidden d2g4atxxxxxx.cloudfront.net 231 B 54.240.xxx.xxx:xx and the url to the image is http://d2g4xxxxxxxx.cloudfront.net/assets/box.png.As you can see it is not the image is not fingerprinted.In application.css i have this background-image:url('box.png'); Things that i tried

1st try

I appended .erb to application.css and added background-image:url(<%=asset_path 'box.png'%>); Then i added config.action_controller.asset_host="http://mybucket_name.com.s3.amazonaws.com"
Then i did

bundle exec rake assets:precompile

Then i switched back to

config.action_controller.asset_host ="http://d2gxxxxxxx.cloudfront.net"

Then i did

 git add application.css.erb
 git commit -a
 git push origin master

But it didn't work

2nd try

I appended .scss to application.css and added background-image:image-url('box.png'); Then i added config.action_controller.asset_host="http://mybucket_name.com.s3.amazonaws.com"
Then i did

bundle exec rake assets:precompile

Then i switched back to

config.action_controller.asset_host ="http://d2gxxxxxxx.cloudfront.net"

Then i did

Then i added gem 'compass-rails' to a gemfile and created compass.rb and added this

   #In compass.rb
  project_type = :rails
  line_comments = false
  generated_images_dir = "public/assets"


 bundle install
 git add application.css.scss  compass.rb
 git commit -a
 git push origin master

But also it didn't work

What I have

gemfile

  source 'http://rubygems.org'

  gem 'rails', '3.1.0.rc8'


  group :development do
  gem 'sqlite3'
  end
  gem 'geocoder'
  gem "dynamic_form"
  gem 'devise'
  gem 'rack', '1.3.3'
  gem 'execjs'
  gem 'carrierwave'
  gem "meta_search",'>= 1.1.0.pre'
  gem "thumbs_up"
  gem 'geocoder'
  gem 'fog'
  gem 'koala'



   group :production do
   gem 'pg'
   gem 'therubyracer'
   gem 'unicorn'

   end
   gem 'jquery-rails'
   gem 'thin'

   gem 'mongrel', '1.2.0.pre2', :group => :development

   gem 'sass-rails', "  ~> 3.1.0.rc"
   gem 'coffee-rails', "~> 3.1.0.rc"
   gem 'uglifier'
   gem 'yui-compressor'
   gem "asset_sync"
  # gem 'compass-rails'


   group :test do
   # Pretty printed test output
   gem 'turn', :require => false
   gem 'rspec-rails'
   gem "factory_girl_rails"
   gem 'capybara'
   gem "guard-rspec"
   end

app/config/enviroenments/production.rb

    Deals::Application.configure do

    config.cache_classes = true

   # Full error reports are disabled and caching is turned on
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true
  config.action_controller.asset_host ="http://d2g4xxxxxx.cloudfront.net"

  config.serve_static_assets = true

  # Compress JavaScripts and CSS
  config.assets.compress = true
   config.assets.compile = true
    config.assets.digest = true
   config.assets.css_compressor = :yui
    config.assets.js_compressor = :uglifier
      config.i18n.fallbacks = true
    config.active_support.deprecation = :notify
    end

Question

What am i doing wrong?or what step am i missing, can somebody walk me through the steps please?I have spend the whole week reading different blogs and different questions about this with no luck.Thanks in advance

Answer 1

I use custom origins with CloudFront instead of S3. That means that CloudFront points to your Rails app instead of S3. This will cause all your assets to be versioned for you and may fix your problem.

Here's an article about CloudFront with custom origins when using the Rails Asset Pipeline. You can google more on the topic:

http://blog.ertesvag.no/post/10720082458

Here's another SO question with more info:

Rails 3 automatic asset deployment to Amazon CloudFront?