Techioz Blog

Rails 7 - リッチテキストに添付されたメディアコンテンツが表示されない

概要

私は、ActionText/Trix エディターを使用する Rails 7 アプリに取り組んでいます。ファイルの保存には Amazon AWS / S3 を使用しています。メディア ファイルが S3 にアップロードされていることを確認しましたが、何らかの理由でメディア ファイルが表示されません (コンテンツを編集しようとするときも、コンテンツを提示したいときにもエディターに表示されません)。通常の画像/メディアのアップロードには S3 を使用していますが、その他の場合でも画像は適切に表示されます。

私の構成は次のようになります。

# storage.yml
amazon:
  service: S3
  access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
  secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
  region: eu-north-1
  bucket: <app name>-<%= Rails.env %>

# credentials.yml
aws:
  access_key_id: xxx
  secret_access_key: xxx

テキストは適切に表示されますが、表示されないのはメディア ファイルだけです (開発でも運用でも)。

私の _blob.html.erb ファイルは次のようになります。

<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file"   %> attachment--<%= blob.filename.extension %>">
  <% if blob.image? %>
    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
  <% end %>

  <% if blob.video? %>
    <%= video_tag url_for(blob.attachable),
    preload: "auto",
    ... %>
  <% end %>

  <% if blob.audio? %>
    <%= audio_tag url_for(blob.attachable), controls: "controls" %>
  <% end %>

  <figcaption class="attachment__caption">
    <% if caption = blob.try(:caption) %>
      <%= caption %>
    <% end %>
  </figcaption>
</figure>

Trix エディターでメディア ファイルをアップロードした後、メディア ファイルが表示されません。

次のようにフォーム要素をレンダリングします。

<%= rich_content_form.rich_text_area :content %>
<%= rich_content_form.hidden_field :id if rich_content_form.object.persisted? %>

私のモデルにこれを入れます:

has_rich_text :content

私のメディア ファイルが表示されない理由について何かアイデアやヒントはありますか?

アップデート

ブラウザのコンソールを見ると、次のエラーが表示されます。

[Error] Failed to load resource: Origin http://localhost:3000   is not allowed by Access-Control-Allow-Origin. Status code: 200   (bo2qo7q0diw0juxl9v85y63nv771, line 0)

[Error] XMLHttpRequest cannot load https://<bucket-name>.s3.eu-north- 1.amazonaws.com/bo2qo7q0diw0juxl9v85y63nv771?X-Amz-Algorithm=AWS4- HMAC-SHA256&X-Amz-Credential=AKIAUP7MDHHNOBYGZXSA%2F20230731%2Feu- north-1%2Fs3%2Faws4_request&X-Amz-Date=20230731T103209Z&X-Amz- Expires=300&X-Amz-SignedHeaders=content-length%3Bcontent- md5%3Bcontent-type%3Bhost&X-Amz- Signature=a0f1b1cc9be7cf2a4618095379fda05bde5418707c280ca2473cad604 6d6a671 due to access control checks.

[Error] Error: Direct upload failed: Error storing "grooveland-  designs-8kkTIumkHxU-unsplash.jpg". Status: 0
nrWrapper (860.03a8b7a5-1.236.0.min.js:1:6259)

アップデート 2 - Chrome

上記のコンソール ログは Safari からのもので、Chrome では次のようになります。

edit:1 Access to XMLHttpRequest at 'https://<bucket-name>.s3.eu-north- 1.amazonaws.com/qkqx3qd8gq9a4uogojg8dvh3vyvu?X-Amz-Algorithm=AWS4- HMAC-SHA256&X-Amz-Credential=AKIAUP7MDHHNOBYGZXSA%2F20230731%2Feu- north-1%2Fs3%2Faws4_request&X-Amz-Date=20230731T104633Z&X-Amz- Expires=300&X-Amz-SignedHeaders=content-length%3Bcontent- md5%3Bcontent-type%3Bhost&X-Amz- Signature=5c68bee1732d950470c0fccc203a5f8d3895bd7122f3e4667ca82ee63 210242f' from origin 'http://localhost:3000' has been blocked by  CORS policy: Response to preflight request doesn't pass access  control check: No 'Access-Control-Allow-Origin' header is present  on the requested resource.
 
860.03a8b7a5-1.236.0.min.js:1 Uncaught Error: Direct upload  failed: Error storing "grooveland-designs-8kkTIumkHxU- unsplash.jpg". Status: 0
at AttachmentUpload.directUploadDidComplete (actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :849:13)
at BlobUpload.callback (actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :624:17)
at BlobUpload.requestDidError (actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :597:12)
at XMLHttpRequest.<anonymous> (actiontext-28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js:582:57)
at XMLHttpRequest.nrWrapper (860.03a8b7a5- 1.236.0.min.js:1:6208)

directUploadDidComplete @ actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :849
(anonymous) @ actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :624
requestDidError @ actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :597

[...]

actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :586     PUT https://<bucket-name>.s3.eu-north- 1.amazonaws.com/qkqx3qd8gq9a4uogojg8dvh3vyvu?X-Amz-Algorithm=AWS4- HMAC-SHA256&X-Amz-Credential=AKIAUP7MDHHNOBYGZXSA%2F20230731%2Feu- north-1%2Fs3%2Faws4_request&X-Amz-Date=20230731T104633Z&X-Amz- Expires=300&X-Amz-SignedHeaders=content-length%3Bcontent- md5%3Bcontent-type%3Bhost&X-Amz- Signature=5c68bee1732d950470c0fccc203a5f8d3895bd7122f3e4667ca82ee63 210242f net::ERR_FAILED

解決策

コメントで述べたように、この問題は CORS 構成に関連していました。ここで動作する構成が見つかりました。

[
{
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "HEAD",
        "GET",
        "PUT",
        "POST",
        "DELETE"
    ],
    "AllowedOrigins": [
        "https://<domain>",
        "https://www.<domain>"
    ],
    "ExposeHeaders": []
}
]

https://translate.google.com/translate?hl=ja&sl=en&tl=ja&u=https://stackoverflow.com/a/76244924/756148