88196


※[他質問サイト](https://teratail.com/questions/3aylzv3ia4g0s8)でも同様の質問をしています。解決した場合はそちらも更新します。よろしくお願いします。

### 前提

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

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

### 実現したいこと

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

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

[code]

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

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

### 該当のソースコード

[code]

    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
    
[/code]

[code]

    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
    
[/code]

[code]

    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) %>
    
[/code]

[code]

    app/models/message.rb
    
    class Message < ApplicationRecord
    （省略）
      has_one_attached :image
    end
    
[/code]

[code]

    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>
    
    
[/code]

[code]

    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
    
[/code]

### 試したこと

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

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

ruby '3.0.2'  
rails ' 6.0.4'

### -追記（20220329）

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

[code]

    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)
    
[/code]

以上

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

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

[code]

    Rails.application.configure do
      config.web_console.whitelisted_ips = '192.168.160.1'
    （略）
    end
    
[/code]


CC BY-SA 4.0
2022-03-28T10:25:11.883
88072
2022-04-08T06:05:39.753
2022-04-08T06:05:39.753
51475
51475
question
ruby-on-rails ruby aws amazon-s3
S3に画像ファイルをアップロードできない


以下にて解決いたしました。

  * config.web_console.whitelisted_ipsでRailsへの許可設定  
development.rbに`config.web_console.whitelisted_ips = '0.0.0.0/0'`を追加

  * S3バケットにCORSの設定  
以下の記事を参考にしています。

[CORS（Cross-Origin Resource Sharing）を設定する -
Railsガイド](https://railsguides.jp/active_storage_overview.html#cors%EF%BC%88cross-
origin-resource-sharing%EF%BC%89%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B)

[code]

    [
        {
            "AllowedHeaders": [
                "*"
            ],
            "AllowedMethods": [
                "GET",
                "POST",
                "HEAD",
                "PUT"
            ],
            "AllowedOrigins": [
                "*"
            ],
            "ExposeHeaders": [],
            "MaxAgeSeconds": 3000
        }
    ]
    
[/code]


CC BY-SA 4.0
2022-04-06T07:35:58.263
88196
2022-04-07T05:27:20.607
2022-04-07T05:27:20.607
3060
51475
88072
answer