Rails7+Importmaps生产环境ActionCable频道JS404问题求助

问题现象 #

开发环境下ActionCable功能正常，但生产环境中所有频道JS文件（如notifications_channel.js）加载失败，报错：Failed to load resource: the server responded with a status of 404 ()

现有配置信息 #

版本依赖 #

ruby "3.0.0"
gem "rails", "~> 7.0.4", ">= 7.0.4.3"

app/javascript/application.js #

console.log("application.js")
import "@hotwired/turbo-rails"
import "controllers"
import "channels"

// 启动StimulusJS
import { Application } from "@hotwired/stimulus"

const application = Application.start();

app/javascript/channels/index.js #

import "./notification_channel"

app/javascript/channels/notification_channel.js #

consumer.subscriptions.create("NotificationChannel", {
  connected() {
    console.log("connected NotificationChannel")
    // 订阅在服务器就绪时触发
  },

  disconnected() {
    console.log("disconnected NotificationChannel")
    // 订阅被服务器终止时触发
  },

  received(data) {
    console.log(data)
    let element = document.getElementById("flashes")
    element.insertAdjacentHTML('beforeend', data.html);
  }
});

app/channels/notification_channel.rb #

class NotificationChannel < ApplicationCable::Channel
  def subscribed
    stream_from "notification_channel"
  end

  def unsubscribed
    # 取消订阅时需要的清理操作
  end
end

config/environments/production.rb #

config.action_cable.allowed_request_origins = [ "https://myapp.hatchboxapp.com", /http:\/\/localhost*/]

  config.hosts << "myapp.hatchboxapp.com"
  config.hosts << "localhost"

config/importmap.rb #

# 运行 ./bin/importmap pin tailwindcss-stimulus-components 来固定npm包

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/stimulus@3.2.2/dist/stimulus.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "@rails/request.js", to: "https://ga.jspm.io/npm:@rails/request.js@0.0.8/src/index.js"
pin "tailwindcss-stimulus-components", to: "https://ga.jspm.io/npm:tailwindcss-stimulus-components@4.0.4/dist/tailwindcss-stimulus-components.module.js"


pin "@rails/actioncable", to: "actioncable.esm.js"
pin_all_from "app/javascript/channels", under: "channels"

config/cable.yml #

development:
  adapter: redis
  url: redis://localhost:6379/1

test:
  adapter: test

production:
  adapter: redis
  url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
  channel_prefix: linus_production

补充：ENV.fetch("REDIS_URL")返回有效地址：redis://default:somelongnumber@10.108.0.2:6379/1

排查方向 #

1. 确认资产预编译状态
   • 部署时必须执行rails assets:precompile，检查public/assets/importmap.json中是否存在channels/notification_channel的映射条目，缺失则说明预编译未正确处理频道文件。
2. 验证消费者初始化文件
   • 检查是否存在app/javascript/channels/consumer.js，Importmaps环境下需要显式初始化消费者：

     import { createConsumer } from "@rails/actioncable"
     export default createConsumer()
     

     并在频道文件顶部导入：import consumer from "./consumer"，否则直接使用consumer变量会导致加载逻辑异常。
3. 检查生产环境服务器配置
   • 确认Hatchbox的Nginx配置是否正确代理WebSocket请求，同时确保静态资产路由指向public/assets目录，避免请求路径错误。
4. 核对文件名与映射路径
   • 生产环境服务器可能区分大小写，确认部署后的notification_channel.js文件名与代码中的导入路径大小写完全一致。
5. 查看生产日志
   • 检查log/production.log和服务器日志，定位404请求的具体路径，判断是映射错误还是文件未生成。

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