【问题标题】:Rails & Nginx & Passenger css and javascript loading but not being applied in productionRails&Nginx&Passenger css和javascript加载但未应用于生产
【发布时间】:2014-10-31 23:10:57
【问题描述】:

这是一个由 Nginx + Passenger 提供服务的 Rails 4 项目。在开发 Rails 环境时完美运行。我认为压缩的 javascript 文件加载正确,因为应该在页面加载时执行的 ajax 调用工作正常。问题是没有任何 CSS 规则应用于文档。

我遇到了与此处描述的完全相同的问题:CSS available but not rendering when push to production [Rails app],除了我的 css 文件的 mime 类型是正确的。

这是我的配置/环境/production.rb

  config.eager_load = true
  config.cache_classes = true
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true
  config.serve_static_assets = true
  config.assets.compress = true
  config.assets.compile = false
  config.assets.digest = true
  config.assets.css_compressor = :yui

资产已正确预编译。这是相关的 html 链接/脚本规范:

  <link data-turbolinks-track="true" href="/assets/application-3d4e35bd2c14a288b7d2ff3f5dd8f5c4.css" media="all" rel="stylesheet" />

  <script data-turbolinks-track="true" src="/assets/application-ab6bb9f22b553eba6788881b0b36f94c.js"></script>

Nginx 配置:

http {
    passenger_root /home/ubuntu/.rvm/gems/ruby-2.1.3/gems/passenger-4.0.53;
    passenger_ruby /home/ubuntu/.rvm/gems/ruby-2.1.3/wrappers/ruby;

    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen 80;
        server_name subdomain.domain.com;
        root /home/user/rails-project/public;
        passenger_enabled on;
        rails_env production;
    }
}

这里是 css 请求/响应(注意正确的 mime 类型):

CSS 文件已正确编译,并且我的所有 sass 和 css 规则和存在(组合 sass 和 css)。

【问题讨论】:

  • 你是如何部署的?卡皮斯特拉诺?尝试将config.serve_static_assets 设置为false
  • 设置config.assets.compile = true 能解决这个问题吗?
  • 你也可以发布完整的 HTML 内容吗?另外,我假设您尝试使用 Ctrl+F5 清除缓存并重新加载所有内容?无论哪种方式,您都不希望您的生产应用程序提供静态资产,nginx 会这样做。 config.action_dispatch.x_sendfile_header = "X-Accel-Redirect"。如果您的浏览器可以接收 CSS 文件并正确读取它,那么它应该可以正常工作。你的生产服务器和你的开发服务器是同一台机器吗? 标签是否在标头中?
  • 不使用 capistrano,通过从 git repop 手动拉取进行部署。 config..assets.compile = true 没有影响。关于 Jake 的建议:生产机器和开发机器不一样;链接标签是def。在标题中。我不会发布 html,但我会告诉你,我在 HTML 验证器中传递了 HTML,并且没有错误(只是一些警告)。

标签: css ruby-on-rails nginx asset-pipeline passenger


【解决方案1】:

静态文件应直接从磁盘提供,因此请确保 Nginx 设置为具有足够的权限来访问文件。它还建议为静态制作自己的位置:

location /assets/  {
  root /home/user/rails-project/public;
  gzip_static on;
  expires max;
  add_header Cache-Control public;
  access_log /dev/null;
}

Assets Pipeline 生成压缩的 JS 和 CSS 文件的 gzip 版本,因此“gzip_static”指令可帮助您立即提供 gzip,而无需任何开销。您的 Nginx 应该使用模块 --with-http_gzip_static_module 编译以支持它。

【讨论】:

  • 嗨,迈克,感谢您的回答。我卸载了,然后按照您的建议使用 gzip 静态模块重新安装了 nginx。这并没有解决这个问题。
【解决方案2】:

事实证明,CSS 编译器很可能是这个问题的根源。当我有这样的编译器设置时:

config.assets.css_compressor = :yui

css 文件似乎被缩小和编译没有问题。但是,一旦我删除了该行(我假设它默认为 sass gem 进行压缩),然后当我尝试rake assets:precompile 时,我收到以下错误:

➜  stylesheets git:(master) ✗ rake assets:precompile
(in /home/ubuntu/spice-conduit)
rake aborted!
Sass::SyntaxError: Invalid CSS after "    filter: progid": expected ";", was ": DXImageTransf..."
  (in /home/ubuntu/spice-conduit/app/assets/stylesheets/application.css)
(sass):3566
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:1147:in `expected'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:1085:in `expected'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:1080:in `tok!'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:586:in `block in declaration_or_ruleset'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:1123:in `call'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:1123:in `rethrow'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:592:in `declaration_or_ruleset'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:554:in `block_child'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:546:in `block_contents'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:535:in `block'
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:529:in `ruleset'

那么显然在使用 yui 压缩器时没有显示编译错误?这些编译错误发生在编译 bootstrap 和 font-awesome css 文件时。

我是如何解决的:

  1. 从项目中删除了所有 Bootstrap 和 Font-awesome gem
  2. 从他们的 github 站点下载了最新的 Bootstrap 和 Font-awesome css 文件
  3. 将文件放在供应商/资产中
  4. 从文件中删除了所有 DXImageTransform 实例。
  5. 预编译和部署的资产

这个解决方案不是主意,因为现在我必须手动维护 bootstrap 和 font-awesome 资产文件。不过,就目前而言,至少我的应用提供压缩和缩小的资产!

【讨论】:

    猜你喜欢
    • 2018-04-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-03-31
    • 2017-02-06
    • 2015-06-19
    • 1970-01-01
    相关资源
    最近更新 更多