Question

我正在使用Assets Sync在部署时将资产上传到S3。所有资产都正确上传并存储在S3上。

应用程序中使用的js，css，字体指向S3，但图像

除外

我猜问题可能出现在rails应用程序中......

发生了什么事？

我的初始值设定项配置文件：

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

配置/环境/ 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

谢谢！

Answer 1

问题在于您的CSS

我们只需要解决这个问题，如果你知道怎么了

，这很简单

您的应用需要使用SCSS (SASS)，以确保rake可以编译将image_paths放入CSS文件中。

所以不要使用

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

您需要确保您的应用可以处理编译过程，这是SCSS的用武之地：

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

此处有一个很棒的resource about SCSS导轨应用：Proper SCSS Asset Structure in Rails

我们所做的就是改变application.css - ＆gt; application.css.scss，然后导入各种不同的.scss文件，其中包含asset_path定义：

@import 'fonts';

这意味着我们可以将fonts.css.scss文件更改为具有以下格式：

/*-- 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;
}

这会修复所有路径，但会使rake asset:precompile真正变慢

重要提示

有一个技巧可以让它正常工作，而且是在生产环境中预编译资产，如下所示：

rake assets:precompile RAILS_ENV=production

如何使用Assets Sync gem在rails应用程序上引用S3图像？

1 个答案: