Rails资产和CDN问题(CSS,JS参考)

时间:2012-05-31 00:42:08

标签: ruby-on-rails asset-pipeline cdn amazon-cloudfront assets

我正在处理Rails 3.1.2,asset_sync和cludfront。我已经安装了asset_sync并预编译了所有资产。我面临的问题如下: rake编译将javascript和css文件组合到一个应用程序中。[js | css]。 在生产模式下,应用程序仍然引用原始名称,但使用新的cdn路径,我收到404错误。

这是生产环境文件:

Griov4::Application.configure do
  # Settings specified here will take precedence over those in config/application.rb

  # Code is not reloaded between requests
  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

  # Disable Rails's static asset server (Apache or nginx will already do this)
  config.serve_static_assets = false

  # Compress JavaScripts and CSS
  config.assets.compress = true

  # Don't fallback to assets pipeline if a precompiled asset is missed
  config.assets.compile = true

  # Generate digests for assets URLs
  config.assets.digest = true

  # Defaults to Rails.root.join("public/assets")
  # config.assets.manifest = YOUR_PATH

  # Specifies the header that your server uses for sending files
  # config.action_dispatch.x_sendfile_header = "X-Sendfile" # for apache
  # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for nginx

  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
  # config.force_ssl = true

  # See everything in the log (default is :info)
  # config.log_level = :debug

  # Use a different logger for distributed setups
  # config.logger = SyslogLogger.new

  # Use a different cache store in production
  # config.cache_store = :mem_cache_store

  # Enable serving of images, stylesheets, and JavaScripts from an asset server
  # config.action_controller.asset_host = "http://assets.example.com"

  # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
  # config.assets.precompile += %w( search.js )

  # Disable delivery errors, bad email addresses will be ignored
  # config.action_mailer.raise_delivery_errors = false

  # Enable threaded mode
  # config.threadsafe!

  # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
  # the I18n.default_locale when a translation can not be found)
  config.i18n.fallbacks = true

  # Send deprecation notices to registered listeners
  config.active_support.deprecation = :notify

  config.action_controller.asset_host = "#{ENV['CDN']}"

end

这是我的.env文件

FOG_PROVIDER=AWS
FOG_DIRECTORY=
AWS_ACCESS_KEY_ID= 
AWS_SECRET_ACCESS_KEY=
CDN=http://d3tf1w68p27174.cloudfront.net
RACK_ENV=production

我在js文件夹中的清单文件:

// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//


//= require_tree .

我在css文件夹中的清单文件:

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require bootstrap.min
*/

然后我输入:$ bundle exec rake assets:clean assets:precompile

application.ss和application.js被创建但不幸的是,生产应用程序仍然使用以下路径引用原始css / js文件:

http://d3tf1w68p27174.cloudfront.net/assets/home-24d72d1643e0016381b14c19d90d9e74.css

http://d3tf1w68p27174.cloudfront.net/assets/home-74ac0007a6e42997f8210f80b99a203b.js

我检查了我的本地文件夹和cdn文件夹,但没有一个包含这些文件。 asset_sync工作正常,因为我可以看到我的cdn文件夹中的其余资产。

我知道它可能与资产管道有关,但我无法弄清楚它是什么。

感谢您的帮助。

1 个答案:

答案 0 :(得分:2)

要确保所有资产都引用新资产主机,请确保使用Rails AssetTagHelper方法(例如image_tagstylesheet_link_tagfavicon_link_tag等)。

如果您在CSS中使用背景图片引用,则可以利用multiple asset-preprocessor支持来确保它们也引用新资产主机。

例如,要在“home.css”上启用多个资产预处理,您可以向其添加.erb扩展名,将其更改为“home.css.erb”。此文件将首先由ERB处理,然后由CSS处理,这意味着您可以引用您的资产,如下例所示:

body {
    background: url(<%= asset_path 'bg.png' %>);
}

你可以通过做一些像“home.css.scss.erb”这样的事情来做到这一点。

有关详细信息,请参阅thisthis