How to refence S3 images on rails app with the Assets Sync gem?

Question

I'm using the Assets Sync to upload the assets to the S3 on deploy. All the assets are uploaded correctly and stored on S3.

The js, css, fonts used in the app are pointing to the S3, except the images

I guess the problem may be on the rails app...

What is going on?

My initializer config file:

AssetSync.configure do |config|
  config.fog_provider = 'AWS'
  config.fog_directory = ENV['FOG_DIRECTORY']
  config.aws_access_key_id = ENV['AWS_ACCESS_KEY_ID']
  config.aws_secret_access_key = ENV['AWS_SECRET_ACCESS_KEY']

  # Don't delete files from the store
  # config.existing_remote_files = 'keep'
  #
  # Increase upload performance by configuring your region
  # config.fog_region = 'eu-west-1'
  #
  # Automatically replace files with their equivalent gzip compressed version
  config.gzip_compression = true
  #
  # Use the Rails generated 'manifest.yml' file to produce the list of files to
  # upload instead of searching the assets directory.
  # config.manifest = true
  #
  # Fail silently.  Useful for environments such as Heroku
  config.fail_silently = true
end

config/enviroment/staging.rb

MyApp::Application.configure do
  routes.default_url_options[:host]= ENV['DOMAIN']

  config.cache_classes = true  
  config.cache_store = :dalli_store
  config.static_cache_control = "public, max-age=2592000"
  config.action_controller.perform_caching = true

  config.consider_all_requests_local = false

  config.serve_static_assets = true
  config.assets.compress = true
  config.assets.compile = false
  config.assets.digest = true
  config.assets.enabled = true
  config.assets.js_compressor = :uglifier
  config.assets.precompile += %w(static.js static.css vendor.js)

  config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

  config.action_controller.asset_host = "//#{ENV['FOG_DIRECTORY']}.s3.amazonaws.com"
  config.assets.prefix = "/assets"

  config.i18n.fallbacks = true
  config.active_support.deprecation = :notify

end

Thanks!

Can you post example HTML/erb code for an image that isn't displaying correctly? — drewinglis, Apr 11 '13 at 04:23

score 0 · Answer 1 · edited May 23 '17 at 11:50

The problem is with your CSS

We just had to fix this issue, and it's pretty simple if you know what's up

Your app needs to use SCSS (SASS), to ensure that rake can compile the image_paths into your CSS files.

So instead of using

/*-- Typical .CSS (static) --*/
.profile_page {
    background: url(background.png);
}

You'll need to make sure that your app can handle the compilation process, which is where SCSS comes in:

/*-- file.css.scss (dynamic) --*/
.profile_page {
    background: asset_url(background.png)
}

There is a great resource about SCSS in rails apps here: Proper SCSS Asset Structure in Rails

What we've done is change application.css -> application.css.scss, then imported various different .scss files with the asset_path definition inside:

@import 'fonts';

This means that we can change the fonts.css.scss file to have this format:

/*-- Akagi Font --*/
@font-face {
    font-family: 'akagi';
    src: asset_url('fonts/akagi-th-webfont.eot');
    src: asset_url('fonts/akagi-th-webfont.eot?#iefix') format('embedded-opentype'),
         asset_url('fonts/akagi-th-webfont.woff') format('woff'),
         asset_url('fonts/akagi-th-webfont.ttf') format('truetype'),
         asset_url('fonts/akagi-th-webfont.svg#akagithin') format('svg');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'akagi';
    src: asset_url('fonts/akagi-bk-webfont.eot');
    src: asset_url('fonts/akagi-bk-webfont.eot?#iefix') format('embedded-opentype'),
         asset_url('fonts/akagi-bk-webfont.woff') format('woff'),
         asset_url('fonts/akagi-bk-webfont.ttf') format('truetype'),
         asset_url('fonts/akagi-bk-webfont.svg#akagibook') format('svg');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'akagi';
    src: asset_url('fonts/akagi-sb-webfont.eot');
    src: asset_url('fonts/akagi-sb-webfont.eot?#iefix') format('embedded-opentype'),
         asset_url('fonts/akagi-sb-webfont.woff') format('woff'),
         asset_url('fonts/akagi-sb-webfont.ttf') format('truetype'),
         asset_url('fonts/akagi-sb-webfont.svg#akagisemibold') format('svg');
    font-weight: 500;
    font-style: normal;
}

This fixes all the paths, but makes rake asset:precompile realllllllly slow

Important Note

There is a trick to getting this to work correctly, and it's to precompile the assets in the production environment, like this:

rake assets:precompile RAILS_ENV=production

How to refence S3 images on rails app with the Assets Sync gem?

1 Answers1