ActionCable 与生产中的导入贴图

Question

我正在尝试使用使用导入映射的 Rails 7 应用程序设置 ActionCable。开发中一切正常，但在生产中我找不到我的频道 javascript：

Failed to load resource: the server responded with a status of 404 ()

对于我所有的

notifications_channel.js

和所有其他频道。

我有什么遗漏的吗？我没主意了。

我的设置如下：

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

javascript/application.js

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

// Start StimulusJS
import { Application } from "@hotwired/stimulus"

const application = Application.start();

javascript/channels/index.js

import "./notification_channel"

javascript/channels/notification_channel.js

consumer.subscriptions.create("NotificationChannel", {
  connected() {
    console.log("connected NotificationChannel")
    // Called when the subscription is ready for use on the server
  },

  disconnected() {
    console.log("disconnected NotificationChannel")
    // Called when the subscription has been terminated by the server
  },

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

频道/notification_channel.rb

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

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end

生产.rb

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

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

这是我的 importmap.rb

# Pin npm packages by running ./bin/importmap pin tailwindcss-stimulus-components

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/[email protected]/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/[email protected]/src/index.js"
pin "tailwindcss-stimulus-components", to: "https://ga.jspm.io/npm:[email protected]/dist/tailwindcss-stimulus-components.module.js"


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

电缆.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:[email protected]:6379/1

Answer 1

不要使用相对导入，它仅在开发中有效，因为资产请求会经过

sprockets

。

// import "./notification_channel"
import "channels/notification_channel"

请注意，您不是直接在此处导入本地文件，导入必须与导入映射中的某些内容匹配：

$ bin/importmap json
{
  "imports": {
    "application": "/assets/application-9ee50de6a17243a5097c1f973bcaae67bdac6cb2b67c3ad5e79c70be188dbb9c.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-49f8a244b039107fa6d058adce740847d31bdf3832c043b860ebcda099c0688c.js",
    "@hotwired/stimulus": "/assets/stimulus-a1299f07b3a1d1083084767c6e16a178a910487c81874b80623f7f2e48f99a86.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-6024ee603e0509bba59098881b54a52936debca30ff797835b5ec6a4ef77ba37.js",
    "controllers/application": "/assets/controllers/application-44e5edd38372876617b8ba873a82d48737d4c089e5180f706bdea0bb7b6370be.js",
    "controllers/hello_controller": "/assets/controllers/hello_controller-29468750494634340c5c12678fe2cdc3bee371e74ac4e9de625cdb7a89faf11b.js",
    "controllers": "/assets/controllers/index-e70bed6fafbd4e4aae72f8c6fce4381d19507272ff2ff0febb3f775447accb4b.js",

    "channels/notification_channel": "/assets/channels/notification_channel-510986bf3ec580274dd79451bb45720fe7d029b87052fe489db68b2a6788d294.js",

    "channels/consumer": "/assets/channels/consumer-da959cc6b798c852c626e9654ac3901f7f0da2b714bf8e61689e24ed43faafad.js",
    "channels": "/assets/channels/index-fd886e165dedb6cb07b976754f38ccc2620717ec75e0e84831bde391dac10e32.js"
  }
}