ruby-on-rails 在生产中使用带导入Map的电缆

cbeh67ev  于 2023-10-21  发布在  Ruby
关注(0)|答案(1)|浏览(108)

我正在尝试使用我的Rails 7应用程序来设置Cable,该应用程序使用了importmaps。一切都在开发中工作,但在生产中我的通道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);
  }
});

channels/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

production.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"

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")返回一个有效的url:
redis://default: [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection) :6379/1

y3bcpkx1

y3bcpkx11#

不要使用相对导入,它只在开发中起作用,因为资产请求通过sprockets

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

请注意,您没有在这里直接导入本地文件,导入必须匹配importmap中的某些内容:

$ 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"
  }
}

相关问题