※他質問サイト でも同様の質問をしています。解決した場合はそちらも更新します。よろしくお願いします。
前提
railsでDM機能を作成しています。
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'
-追記(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の設定
