質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

解決済

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

kyosuke
kyosuke

総合スコア39

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

1回答

0評価

0クリップ

526閲覧

投稿2022/03/28 10:14

編集2022/04/06 09:59

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

前提

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

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)

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の設定

イメージ説明

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

kyosuke

2022/03/29 03:23 編集

@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
yu_1985

2022/03/29 04:32

development.rbに追加してますけど、rails_envはdevelopmentでやっているんですか? また、このRailsはどうやって起動しているのでしょう
kyosuke

2022/03/29 06:35

有難うございます。初心者のため回答がご質問の意図とずれていましたらご指摘をお願い致します。 >development.rbに追加してますけど、rails_envはdevelopmentでやっているんですか? はい。developmentです。 irb(main):001:0> Rails.env => "development" >このRailsはどうやって起動しているのでしょう 申し訳ございません。ご質問が理解できず私なりに推測してお答えします💦 アプリケーションサーバのことでお間違いないでしょうか? アプリケーションサーバはPumaを使用しています。 ご指導お願い致します。
yu_1985

2022/03/29 07:19

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

2022/03/29 09:11

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

2022/03/29 18:19

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

2022/03/30 16:04

内容が不足しており申し訳ございません。 以下をホワイトリストに追記しました。 ``` Rails.application.configure do config.web_console.whitelisted_ips = '192.168.160.1' (略) end ``` >この場合どうせ動かしているのはローカルなのでホワイトリスト全許可でいい気もしますが 有難うございます。恐れ入りますが、自分で調べてみても不明な点が多かったため、ホワイトリスト全許可の方法を教示いただけないでしょうか? また、本エラーはホワイトリストが原因であるということになりますでしょうか。
yu_1985

2022/03/31 08:01

同じような質問が過去にもあります。 https://teratail.com/questions/313537 > ホワイトリストが原因 何をもって「原因」とするかが微妙ですが、根本的にはDocker上で動かしていてネットワーク設定周りが想定通り設定されていないのが問題じゃないでしょうか。 そこをトラブルシュートしてもいいですが、ローカルで動かすだけなら全許可でも別にいいと思います。
kyosuke

2022/04/01 08:10

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

2022/04/01 08:39

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

2022/04/01 09:15

>追記したあとに立ち上げ直しましたよね? はい。立ち上げ直しました。 >また本当に全く同じでしたか? 表示される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

2022/04/01 09:31

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

2022/04/01 16:26 編集

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

2022/04/04 01:45

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

2022/04/04 04:11

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

2022/04/04 05:02

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

2022/04/04 05:27

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

2022/04/05 04:29

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

2022/04/06 05:14

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

2022/04/06 06:03

さすがに出てくる問題すべてをトラブルシュートはできないので別質問にしてください 表示されないといっても、そもそもどのように表示したいのかによってもやり方が変わるのでまずはそこをハッキリさせてください
kyosuke

2022/04/06 06:56 編集

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

2022/04/06 06:57

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

2022/04/06 07:10 編集

申し訳ございません。以下、誤って投稿してしまいました。 回答いただき有難うございます! >aws-sdk-s3のgemはインストールしています。 >

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。