※他質問サイトでも同様の質問をしています。解決した場合はそちらも更新します。よろしくお願いします。
前提
railsでDM機能を作成しています。
ActiveStorageを使用してS3に画像ファイルをアップロードし、送信した画像を表示したいのですが、実装中に以下のエラーメッセージが発生しました。
ActiveStorage、S3のセットアップは以下を参考にして設定しました。
https://zenn.dev/kurao/articles/ce8e583450c76e
実現したいこと
メッセージフォームから送信した画像をメッセージ一覧に表示したい。
発生している問題・エラーメッセージ
localhost:3000の内容 Error storing "(ファイル名)". Status: 0
メッセージフォームから画像を選択して送信を押すと、このようなエラーメッセージがポップアップで表示され、画像をアップロードできません。
該当のソースコード
config/environment/development.rb
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
db/migrate/(日付)_create_active_storage_tables.active_storage.rb
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
config/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: <%= Rails.application.credentials.dig(:aws, :s3, :region) %> bucket: <%= Rails.application.credentials.dig(:aws, :s3, :bucket) %>
app/models/message.rb
class Message < ApplicationRecord (省略) has_one_attached :image end
app/views/rooms/show.html.erb
<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>
messages_controller.rb
試したこと
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)
Dockerfile
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"]
docker−compose.yml
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の設定
まだ回答がついていません
会員登録して回答してみよう