Rails部署Fly.io后tailwind.css页面刷新闪烁问题求助

问题描述 #

按Fly.io Rails入门教程部署后，程序运行正常，但页面刷新时tailwind.css出现闪烁，控制台检测到JS和CSS资源未被缓存到内存或磁盘。当前config/environments/production.rb配置如下：

require "active_support/core_ext/integer/time"

Rails.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

  # Eager load code on boot. This eager loads most of Rails and
  # your application in memory, allowing both threaded web servers
  # and those relying on copy on write to perform better.
  # Rake tasks automatically ignore this option for performance.
  config.eager_load = true

  # Full error reports are disabled and caching is turned on.
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true

  # Ensures that a master key has been made available in either ENV["RAILS_MASTER_KEY"]
  # or in config/master.key. This key is used to decrypt credentials (and other encrypted files).
  # config.require_master_key = true

  # Disable serving static files from the `/public` folder by default since
  # Apache or NGINX already handles this.
  config.public_file_server.enabled = ENV["RAILS_SERVE_STATIC_FILES"].present?

  config.public_file_server.headers = {
    'Cache-Control' => 'public, max-age=15552000',
    'Expires' => 1.year.from_now.to_formatted_s(:rfc822)
  }

  # Compress CSS using a preprocessor.
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

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

  # 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

  # Store uploaded files on the local file system (see config/storage.yml for options).
  config.active_storage.service = :local

  # Mount Action Cable outside main process or domain.
  # config.action_cable.mount_path = nil
  # config.action_cable.url = "wss://example.com/cable"
  # config.action_cable.allowed_request_origins = [ "http://example.com", /http:\/\/example.*/ ]

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

  # Include generic and useful information about system operation, but avoid logging too much
  # information to avoid inadvertent exposure of personally identifiable information (PII).
  config.log_level = :info

  # Prepend all log lines with the following tags.
  config.log_tags = [ :request_id ]

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

  # Use a real queuing backend for Active Job (and separate queues per environment).
  # config.active_job.queue_adapter     = :resque
  # config.active_job.queue_name_prefix = "list_production"

  config.action_mailer.perform_caching = false

  # Ignore bad email addresses and do not raise email delivery errors.
  # Set this to true and configure the email server for immediate delivery to raise delivery errors.
  # config.action_mailer.raise_delivery_errors = false

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

  # Don't log any deprecations.
  config.active_support.report_deprecations = false

  # Use default logging formatter so that PID and timestamp are not suppressed.
  config.log_formatter = ::Logger::Formatter.new

  # Use a different logger for distributed setups.
  # require "syslog/logger"
  # config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new "app-name")

  if ENV["RAILS_LOG_TO_STDOUT"].present?
    logger           = ActiveSupport::Logger.new(STDOUT)
    logger.formatter = config.log_formatter
    config.logger    = ActiveSupport::TaggedLogging.new(logger)
  end

  # Do not dump schema after migrations.
  config.active_record.dump_schema_after_migration = false
end

修复方案 #

1. 优化静态文件缓存头

当前缓存头缺少immutable指令，导致浏览器会重复验证资源是否更新，修改production.rb中的public_file_server.headers：

config.public_file_server.headers = {
  'Cache-Control' => 'public, max-age=31536000, immutable',
  'Expires' => 1.year.from_now.to_formatted_s(:rfc822)
}

同时强制开启静态文件服务（避免依赖环境变量遗漏）：

config.public_file_server.enabled = true

2. 确认资产指纹与预编译

• 确保Rails资产指纹功能开启（生产环境默认开启，若被修改需恢复）：

  config.assets.digest = true
  

• 部署前务必执行rails assets:precompile，检查public/assets目录下的文件是否带有哈希后缀（如tailwind-abc123.css），哈希后缀是浏览器缓存的核心标识。

3. 配置Fly.io代理层缓存

在fly.toml中添加静态资产缓存规则，让Fly的CDN直接缓存资产文件：

[[statics]]
  guest_path = "/rails/public/assets"
  url_prefix = "/assets"
  cache_control = "public, max-age=31536000, immutable"

4. 验证缓存生效

部署修改后，打开浏览器控制台网络标签：

• 刷新页面，查看JS/CSS资源的状态是否为304 Not Modified或200 (from disk cache)
• 检查响应头中的Cache-Control是否包含immutable和正确的max-age值

内容的提问来源于stack exchange，提问作者Louis Bertin