CODEWITHSUNDEEP
cssruby-on-railsrubyruby-on-rails-4amazon-s3
Richlewis
Richlewis

Reputation: 15374

Dealing with assets and s3 buckets in Rails 4.2.1

I am serving my assets (css, js and images) from an S3 bucket using asset_sync. I cannot get my CSS/JS to load (I get 403 forbidden errors) but images load fine. I think I have found the issue though (it doesn't look like its bucket or IAM permissions).

When I upload my assets a file name is generated along the lines of

mybucket.s3.amazonaws.com/assets/application-123456789101112.css

However when my application then tries to call the css file the url it tries to get is like

mybucket.s3.amazonaws.com/assets/application.self-573489573934.css

The main differences are the inclusion of self and a completely different MD5 hash string, thus when trying to access this url it's forbidden.

This is my asset_sync config

if defined?(AssetSync)
  AssetSync.configure do |config|
    config.fog_provider = 'AWS'
    config.aws_access_key_id = ENV['AWS_ACCESS_KEY_ID']
    config.aws_secret_access_key = ENV['AWS_SECRET_ACCESS_KEY']
    config.fog_directory = ENV['FOG_DIRECTORY']
    config.existing_remote_files = "delete"
    config.gzip_compression = true
    config.manifest = true
    config.custom_headers = { '.*' => { cache_control: 'max-age=315576000', expires: 1.year.from_now.httpdate } }
  end
end

I also think the issue may lay in my environment settings. Have things changed in rails 4.2.1 compared to Rails 4 ?

Would this have anything to do with it ? https://github.com/thoughtbot/paperclip/issues/1772

In my development.rb (as I'm just testing this locally for now) I have

config.assets.compile = true
config.assets.digest = true
config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present? # Never seen this one before

Upvotes: 1

Views: 313

Answers (1)

Frederick Cheung
Frederick Cheung

Reputation: 84124

In development (by default) things like javascripts and css are loaded individually rather than combined into a single file. For example, if application.js had

//= require jquery
//= require something.js

then in development javascript_tag :application would insert separate <script> tags for both of those files, appending a timestamp rather than a md5 checksum, rather than a single request for the combined application.js file

These individual files don't existing in S3, you're getting a 403 (it's a 403 instead of a 404 because if you don't have permission to list a bucket then by default requests for non existant objects result in 403 errors).

Images aren't affected by this because there is no equivalent combining images together thing (unless perhaps you're using a gem to handle css sprites automatically)

The setting that controls this is

 config.assets.compress

However this seems like a very strange development setup where any changes to assets requires you to push them to s3.

Upvotes: 1

Related Questions