ActionText Trix Editor のレール 7.0.7 が実稼働環境にロードされない

概要

Rails 7.0.7 アプリ、ruby 3.2.2 を使用してアクションテキストエディターを作成しました。のアクションテキストは開発環境では正常に動作しますが、運用環境では読み込まれません。開発ツールを開くと、本番環境でも開発環境でも trix シートが見つかりません。

404 が見つかりません mysite.com/assets/trix/dist/trix

ただし、エディターは開発中には正常に動作します。 Capistrano を使用してアプリを Ubuntu サーバーにデプロイしており、アセットが自動的にプリコンパイルされます。 Rails 7 運用環境でアクションテキストを動作させるにはどうすればよいですか?

<%= javascript_importmap_tags %> は、運用環境では十分な速度で読み込まれません。 Web 開発コンソール経由で次のエラーが発生します。

The resource at “https://example.com/assets/application-
1f9c638bad3431a2e119d5da3d19e833a518370510fc773f111900f8393e0d7f.css” 
preloaded with link preload was not used within a few seconds. Make 
sure all attributes of the preload tag are set correctly.

app/views/layouts/application.html.erb

 <%= javascript_importmap_tags %>

    <%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %>

    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
    
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>

アクションテキスト.css

/*

 *= require trix
*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

アプリケーション.css

@import "./actiontext.css";
@import "trix/dist/trix";

マニフェスト.js

//= link actiontext.css
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
// application.js
// youtube.js

JavaScript/アプリケーション.js

import "@hotwired/turbo-rails"
import "controllers"
import "trix"
import "@rails/actiontext"
import "./youtube" 
import "@rails/ujs"
import "rails"

開発環境で <%= javascript_importmap_tags %> を削除すると、テキストエディタは運用環境と同じように見えます。以下にその様子を示します。

解決策

これを行う：

# config/importmap.rb

pin "trix"
pin "@rails/actiontext", to: "actiontext.js"

// app/javascript/application.js

import "trix"
import "@rails/actiontext"

app/assets/stylesheets に生成された actiontext.css が存在するはずです。

<%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %>

trix および actiontext への他の参照を削除します。

アップデート

最後の ^ 文は本当にそう思ったので、他には何も必要ありません。

actiontext.css (または action_text.css) のこの部分は機能しません。追い風によって資産が縮小されない場合は、開発で機能する可能性があります。運用環境では、縮小化がオンになっている必要があり、そのスプロケットディレクティブはスプロケットに到達する前に追い風によって取り除かれます。

*= require trix

そのため、私は常に stylesheet_link_tag “actiontext” を実行し、application.css にはインポートしません。

// you don't need to import this one it is already in stylesheet_link_tag
@import "./actiontext.css";
// don't need that either since you don't have that file
@import "trix/dist/trix";

また、スタイルシートを少し修正します。 application.css は tailwind によってコンパイルされますか?その場合、それを stylesheet_link_tag に追加する必要はありません。

<%= stylesheet_link_tag "tailwind", "actiontext", "inter-font", "data-turbo-track": "reload" %>

同様に、manifest.js にも builds ディレクトリが欠けているようです。そうでない場合、「tailwind」スタイルシートがどこから来たのかわかりません。

//= link_tree ../builds

「//= link actiontext.css」は必要ありません。

import “./youtube” - いやいや。相対インポートは行わないでください。本番環境で動作しなくなる可能性があります。

https://translate.google.com/translate?hl=ja&sl=en&tl=ja&u=https://github.com/rails/sprockets#directives