S3に画像ファイルをアップロードできない

Question

※他質問サイトでも同様の質問をしています。解決した場合はそちらも更新します。よろしくお願いします。

前提

railsでDM機能を作成しています。
ActiveStorageを使用してS3に画像ファイルをアップロードし、送信した画像を表示したいのですが、実装中に以下のエラーメッセージが発生しました。

ActiveStorage、S3のセットアップは以下を参考にして設定しました。
https://zenn.dev/kurao/articles/ce8e583450c76e

実現したいこと

メッセージフォームから送信した画像をメッセージ一覧に表示したい。

発生している問題・エラーメッセージ

localhost:3000の内容
Error storing "（ファイル名）". Status: 0

メッセージフォームから画像を選択して送信を押すと、このようなエラーメッセージがポップアップで表示され、画像をアップロードできません。

該当のソースコード

Rails.application.configure do
  # ...
	
  config.active_storage.service = :amazon

  # ...

  Rails.application.routes.default_url_options[:host] = 'localhost'
  Rails.application.routes.default_url_options[:port] = 3001  
end

class CreateActiveStorageTables < ActiveRecord::Migration[5.2]
  def change
    create_table :active_storage_blobs do |t|
      t.string   :key,        null: false
      t.string   :filename,   null: false
      t.string   :content_type
      t.text     :metadata
      t.bigint   :byte_size,  null: false
      t.string   :checksum,   null: false
      t.datetime :created_at, null: false

      t.index [ :key ], unique: true
    end

    create_table :active_storage_attachments do |t|
      t.string     :name,     null: false
      t.references :record,   null: false, polymorphic: true, index: false
      t.references :blob,     null: false

      t.datetime :created_at, null: false

      t.index [ :record_type, :record_id, :name, :blob_id ], name: "index_active_storage_attachments_uniqueness", unique: true
      t.foreign_key :active_storage_blobs, column: :blob_id
    end
  end
end

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: <%= Rails.application.credentials.dig(:aws, :s3, :region) %>
  bucket: <%= Rails.application.credentials.dig(:aws, :s3, :bucket) %>

class Message < ApplicationRecord
（省略）
  has_one_attached :image
end

<div class="row my-5">
（省略）
  <% if @messages.present? %>
（省略）
<!-- 画像を表示するコード -->
    <%= image_tag @message.image.variant(resize:'500x500'), class: 'message-image' if @message.image.attached? %>
<!--  -->

  <% else %>
    <p>メッセージはまだありません。</p>
  <% end %>


  <%= form_with model: @message do |f| %>
（省略）
<!-- 画像を選択するコード -->
    <div class="field">
      <%= f.file_field :images, direct_upload: true, multiple: true %>
    </div>
<!--  -->

    <div class="form-group">
      <%= f.submit "送信", class: "btn btn-primary" %>
    </div>
  <% end %>
</div>

class MessagesController < ApplicationController

  def create
    if Entry.where(user_id: current_user.id, room_id: params[:message][:room_id]).present?
      @message = Message.new(message_params)
      if @message.save
        redirect_to "/rooms/#{@message.room_id}"
      end
    else
      flash[:alert] = "メッセージ送信に失敗しました。"
    end
  end

  private

  def message_params
    params.require(:message).permit(:user_id, :content, :image, :room_id).merge(user_id: current_user.id)
  end
end

試したこと

ActiveStorage、S3のセットアップに問題があると思い、エラーメッセージを検索しましたが、該当するページが見当たらず、お力添えをいただきたいです。

補足情報（FW/ツールのバージョンなど）

ruby '3.0.2'
rails ' 6.0.4'

-追記(20220329)

@messageがsaveされる前にbinging.pryを設置してエラーをチェックした結果、以下が表示されました。
※一部伏せ字にしています。

Started POST "/rails/active_storage/direct_uploads" for 192.168.160.1 at <日時> +0000
Cannot render console from 192.168.160.1! Allowed networks: 127.0.0.0/127.255.255.255, ::1
Processing by ActiveStorage::DirectUploadsController#create as JSON
Parameters:
{
"blob" => {
"filename" => "<ファイル名>",
"content_type" => "image/png",
"byte_size" => 30047,
"checksum" => "<checksumの文字列>"
},
"direct_upload" => {
"blob" => {
"filename" => "<ファイル名>",

"content_type" => "image/png",
"byte_size" => 30047,
"checksum" => "<checksumの文字列>"
}
}
}
(0.6ms)
BEGIN
ActiveStorage::Blob Create (1.3ms)
INSERT
INTO
`active_storage_blobs` (
`key`
,`filename`
,`content_type`
,`byte_size`
,`checksum`
,`created_at`
)
VALUES (
'<キー>'
,'<ファイル名>'
,'image/png'
,30047
,'<checksumの文字列>'
,'<日時>'
)
(5.8ms)
COMMIT
S3 Storage (1.6ms) Generated URL for file at key: <キー> (https://<バケット名>.s3.<リージョン名>.amazonaws.com/<キー>?X-Amz
-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=<アクセスキーID>%2F<日付>%2F<リージョン名>%2Fs3%2Faws4_request&X-Amz-Date=<日付>T<時間>Z&X-Amz-Expires=300&X-Amz-Signe
dHeaders=content-length%3Bcontent-md5%3Bcontent-type%3Bhost&X-Amz-Signature=01c10359b86d5cf1ef020d0286e428762f907fd7d6a7db1b8a2ed0c5daf08c8e)
Completed 200 OK in 1043ms (Views: 0.7ms | ActiveRecord: 12.0ms | Allocations: 231324)

Cannot render console from <IPアドレス>! のエラーが出ていましたので、以下記事を参考に
config/environment/development.rbにホワイトリストを追記しましたが、同様のエラーが表示され解決に至りませんでした。
https://qiita.com/terufumi1122/items/73da039e6fc90ee0a63f

↓追加したホワイトリスト

Rails.application.configure do
  config.web_console.whitelisted_ips = '192.168.160.1'
（略）
end

-追記(20220402)

FROM ruby:3.0.2
RUN apt-get update -qq && apt-get install -y nodejs

# yarnパッケージ管理ツールをインストール
# https://classic.yarnpkg.com/en/docs/install/#debian-stable
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
RUN apt-get update && apt-get install yarn

RUN apt-get install -y vim

WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp

# Add a script to be executed every time the container starts
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]

version: "3"

services:
  db:
    image: mysql:8.0

    command: mysqld --default-authentication-plugin=mysql_native_password
    environment:
      MYSQL_USER: user
      MYSQL_PASSWORD: password
      MYSQL_ROOT_PASSWORD: password
    ports:
        - 3306:3306
    volumes:
      - ./tmp/db:/var/lib/mysql
  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    environment:
      MYSQL_HOST: db
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db
    tty: true
    stdin_open: true

-追記(20220404)

-追記(20220404) CORSの設定

Comments

[yu_1985]

development.rbに追加してますけど、rails_envはdevelopmentでやっているんですか？

また、このRailsはどうやって起動しているのでしょう

[kyosuke]

有難うございます。初心者のため回答がご質問の意図とずれていましたらご指摘をお願い致します。

＞development.rbに追加してますけど、rails_envはdevelopmentでやっているんですか？

はい。developmentです。
irb(main):001:0> Rails.env
=> "development"

＞このRailsはどうやって起動しているのでしょう

申し訳ございません。ご質問が理解できず私なりに推測してお答えします💦
アプリケーションサーバのことでお間違いないでしょうか？
アプリケーションサーバはPumaを使用しています。

ご指導お願い致します。

[yu_1985]

そうではなく、Railsを起動する環境のことを聞いています。
参考サイトだとDockerで起動していますが、手元ではどのようにRailsを立ち上げて動作確認をしていますか？

[kyosuke]

ご返信有難うございます。失礼しました。
参考サイトと同様にDockerで起動しています。

[yu_1985]

ではホワイトリストに何を追記しましたか？

極力具体的な設定内容や打ったコマンドを記載してください。
この場合どうせ動かしているのはローカルなのでホワイトリスト全許可でいい気もしますが。

[kyosuke]

内容が不足しており申し訳ございません。
以下をホワイトリストに追記しました。
```
Rails.application.configure do
config.web_console.whitelisted_ips = '192.168.160.1'
（略）
end
```

＞この場合どうせ動かしているのはローカルなのでホワイトリスト全許可でいい気もしますが

有難うございます。恐れ入りますが、自分で調べてみても不明な点が多かったため、ホワイトリスト全許可の方法を教示いただけないでしょうか？
また、本エラーはホワイトリストが原因であるということになりますでしょうか。

[yu_1985]

同じような質問が過去にもあります。
https://teratail.com/questions/313537

> ホワイトリストが原因

何をもって「原因」とするかが微妙ですが、根本的にはDocker上で動かしていてネットワーク設定周りが想定通り設定されていないのが問題じゃないでしょうか。
そこをトラブルシュートしてもいいですが、ローカルで動かすだけなら全許可でも別にいいと思います。

[kyosuke]

有難うございます。config/environment/development.rbに
config.web_console.whitelisted_ips = '0.0.0.0/0'を追加しましたが、
エラーの内容が変わらずでした。
他に考えられる原因はございますでしょうか。

[yu_1985]

追記したあとに立ち上げ直しましたよね？
また本当に全く同じでしたか？
表示されるIP等は異なっていませんでしたか？

[kyosuke]

＞追記したあとに立ち上げ直しましたよね？

はい。立ち上げ直しました。

＞また本当に全く同じでしたか？
表示されるIP等は異なっていませんでしたか？

失礼しました。今回のログを確認したところ、2022/03/29 12:23に投稿したコメントのエラーコードの
Cannot render console from 192.168.160.1! Allowed networks: 127.0.0.0/127.255.255.255, ::1
の記述だけありませんでした。
表示されたエラーメッセージの「localhost:3000の内容　Error storing "（ファイル名）". Status: 0」は変わらないままでした。

[yu_1985]

Railsは設定や参考サイトを見ると3001番ポートで起動しているようですが、localhost:3000というのはどこから来たものでしょう？

[kyosuke]

有難うございます。
環境構築は別のサイトを参考にしており、後からActiveStorage、Amazon S3を追加しています。
環境のコードも本文に追記しますのでご確認いただけますでしょうか。

[yu_1985]

development.rbで指定しているポートと起動しているポートが異なっているのですが、そこはそろえなくて問題ないですか？

[kyosuke]

ご確認有難うございます。
development.rbのRails.application.routes.default_url_options[:port] = 3001をRails.application.routes.default_url_options[:port] = 3000に変更し再起動しましたが
状況は変わらずでした。

[yu_1985]

S3のアップロード自体は200 OKになっているように見えますが、S3を確認したらどうなっていますか？

[kyosuke]

確認方法が間違っていましたら申し訳ございません。
S3にログインしてオブジェクトを確認したところ何もありませんでした。
画像を本文に追記しますのでご確認いただけますでしょうか。

[yu_1985]

そういえば、バケットのCORS周りの設定はしてありますか？
参考
https://github.com/rails/rails/issues/30723

[kyosuke]

ご返信有難うございます。
CORSの設定は行っていませんでした。

以下記事を参考に、設定しました。
https://dev.classmethod.jp/articles/amazon-s3-edit-cors-configuration-using-json-in-aws-management-console/
画像を本文に追加します。

追加しましたが、状況は変わりませんでした。
他に必要な設定があるのでしょうか？

[yu_1985]

CORS設定は何でもいいわけではなく、今回で言うとアップロードに必要なPUTの許可が足りないのでそれを入れてください。
https://railsguides.jp/active_storage_overview.html

PUT以外の許可を入れるかどうかは要件次第です。

[kyosuke]

有難うございます！
PUTを許可したところ、本質問のエラーメッセージが表示されることなく、s３のバケットのオブジェクトにファイルが追加されました！
ここまでは良かったのですが、ビューに画像が表示されないことで行き詰まってしまいました。
railsガイド確認し抜けている箇所がないと思っていますが、お分かりになりますでしょうか？
何度も申し訳ございません💦

[yu_1985]

さすがに出てくる問題すべてをトラブルシュートはできないので別質問にしてください

表示されないといっても、そもそもどのように表示したいのかによってもやり方が変わるのでまずはそこをハッキリさせてください

[kyosuke]

別の質問に致します。有難うございました！

[yu_1985]

それが関係するところはアップロードのところで、アップロードされているにも関わらず画像が表示されないというのは
表示されないというのも単にからの画像を表示するのか、何かしらエラーが出ているのかなどで全然違うので改めて調査と切り分けをしてください。

[kyosuke]

申し訳ございません。以下、誤って投稿してしまいました。
回答いただき有難うございます！

>aws-sdk-s3のgemはインストールしています。

＞

Answer 1

この質問時点での問題点は下記でした

• config.web_console.whitelisted_ipsでRailsへの許可設定が足りなかった
• S3バケットにCORSの設定が足りなかった
• （もしかしたら）起動しているポートと設定ファイルのポートが違った

ここまでやった上で画像が表示されないのは別事象だと思うので改めて切り分けをしてください

Comments

[kyosuke]

数日にわたりご協力いただき有難うございました！