herokuでAmazonS3を用いた画像表示

Question

やりたいこと

herokuでAmazonS3を使って画像表示すること。
（ActionTextのリッチテキスト機能で画像を挿入した際の画像）

やったこと

【Rails】Herokuで画像を投稿できるようにする方法（ActiveStorage + Amazon S3
Actiontext × S3 on Rails 6 （ブログ機能・画像アップロード）
Action Text での Amazon S3 アップロード

上記サイトを参考に

Active Storage の設定

# Use rails credentials:edit to set the AWS secrets (as aws:access_key_id|secret_access_key)
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: "us-west-2"
  bucket: "volvord"

  # Store uploaded files on the local file system (see config/storage.yml for options).
  config.active_storage.service = :amazon

S3用のGemをインストール

gem "aws-sdk-s3", require: false

Vimでの環境変数の設定

S3 側の CORS の設定

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Herokuの設定

Key Value
AWS_ACCESS_KEY_ID アクセスキー
AWS_SECRET_ACCESS_KEY シークレットキー
AWS_DEFAULT_REGION us-west-2

現在の状況

最初はエラーでサイトの表示自体されなかったのででそこは直せたのですが、
画像が表示されません。

どうやったらエラー、間違っているかわかるやり方、コマンドなどはありますでしょうか？
また間違っていそうな点を教えて頂けると幸いです。

Comments

[no1knows]

「過去に投稿した質問と同じ内容の質問」は推奨されていない質問となります。同じ質問をするのはやめましょう
https://teratail.com/help/avoid-asking

また理解力ができておらず恐縮なのですが、今現在、何ができていなくて、何ができているのでしょうか？

[mbaby__8]

一通りの設定はしたのですが、画像が表示されない状態です。
投稿はできるんですが画像だけ消えて文字だけ表視されています。

[no1knows]

S3にアップした画像データはあるのでしょうか？
また開発環境ではきちんと動作していたのでしょうか？

[mbaby__8]

s3のコンソールの方は、このバケットは空です。の表示です。
開発環境はs3ではなくlocalのままなので動作しています。

[no1knows]

ということは、まずHerokuではなく、ローカル環境でS3にデータが保存できるように実装する。
という方向性で考えると良いと思います。S3のアップロードとHerokuは、関係ないですもんね。

また「投稿はできるんですが画像だけ消えて文字だけ表視されています。」とは、画像部分がまったくなにもない状態になっているのか、画像部分は他の文字列などによって置き換えられているかと、上記コメントに返信いただいたものも含めて質問文を大幅に編集するとAWSに詳しい方が答えてくれるかもしれません。

Answer 1

自己解決できました。
色々やったので余分なのも含まれていると思いますが、やったこと書きます。

AWS側の設定

• S3バケット作成時、Amazon S3 ログ配信グループにこのバケットへの書き込みアクセス権限を付与する

を選択

Rails, Laravel(画像アップロード)向けAWS(IAM:ユーザ, S3:バケット)の設定
上記サイト参考に

• ユーザのパスワードの設定
• コンソールへのアクセスを「有効化」、パスワードの設定を「自動生成パスワード」にチェック
• ログインの確認
• 二段階認証
• バケットポリシーの追加
• CORS設定（もともとしていたが若干変更）

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3600</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

その他見たサイトまとめ

【Rails】Herokuで画像を投稿できるようにする方法（ActiveStorage + Amazon S3）
【更新：解決????】【Rails】ActionTextでアップロードした画像の保存先がローカルから変更できない????
Action Text での Amazon S3 アップロード

Actiontext × S3 on Rails 6 （ブログ機能・画像アップロード）
Rails+CarrierWave+heroku環境でAWS S3へ画像をアップロードする

サイトによっては
CORS設定していたりしていなかったり、
Credentialsの設定していたりしていなかったり、
heroku　Config　Vars設定していたりしていなかったり、
heroku buildpacks:add -i 1 https://github.com/heroku/heroku-buildpack-activestorage-previewの設定していたりしていなかったり、
AWSのコンソール画面がすぐ新しくなるので、アクセス権限どれにするのか
わからなかったりしました。