S3を導入しアップロードはできるが画像が表示されない。

Question

起きていること

AWSで画像投稿ができるサイトのデプロイをしています。S3を導入し、画像投稿までできるようになったのですが、肝心な画像が下記のように表示されません。production.logを参照してもエラーは出ておらず、その他ネットで調べた修正方法をいくつか試したのですが解決されません。
解決方法、もしくはエラーを特定する方法を教えていただきたいです。

画像の表示状況

試したこと

・「config/initializers/carrierwave.rb」の「config.asset_host = 'https://s3-ap-northeast-1.amazonaws.com/バケット名'」の記述を「 config.asset_host = 'https://xn--rcktbp3a4212b.s3.amazonaws.com'」に修正してみました。
・「config.asset_host = 'https://s3-ap-northeast-1.amazonaws.com/バケット名'」を削除してみました。
・S3の「アクセス権限」から「ブロックパブリックアクセス 」のブロックを全てオフにしてみました。

追記　microposts.rb

class Micropost < ApplicationRecord
  belongs_to :user
  validates :content, presence: true, length: { maximum: 1000 }
  has_many :likes, dependent: :destroy
  has_many :liked, through: :likes, source: :user
  has_many :joins, dependent: :destroy
  has_many :joined, through: :joins, source: :user
  has_many :comments, dependent: :destroy

  THUMBNAIL_SIZE = [300, 300]
  mount_uploader :image, ImageUploader

  geocoded_by :place
  after_validation :geocode
end

追記　image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick
  require 'mini_magick'
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  if Rails.env.production?
    include Cloudinary::CarrierWave
  else
    storage :fog
  end

  # Choose what kind of storage to use for this uploader:
  # storage :file
  storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
  # def default_url(*args)
   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))

  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url(*args)
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end

  # Process files as they are uploaded:
  # process scale: [200, 300]
  #
  # def scale(width, height)
  #   # do something
  # end

  # Create different versions of your uploaded files:
  # version :thumb do
  #   process resize_to_fit: [50, 50]
  # end

  # Add a white list of extensions which are allowed to be uploaded.
  # For images you might use something like this:
  def extension_whitelist
     %w(jpg jpeg gif png)
  end

  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  # def filename
  #   "something.jpg" if original_filename
  # end
  process resize_to_fill: [300, 300, "Center"]

end

追記　_micropost.html.erbで画像表示している部分

      <% if micropost.image? %>
      <%= image_tag micropost.image.url, class:"micropost_image" %>
      <% else %>
      <%= image_tag 'no_image.png', class:"micropost_image" %>
      <% end %>
    </div>

追記　config/initializers/carrierwave.rb

require 'carrierwave/storage/abstract'
require 'carrierwave/storage/file'
require 'carrierwave/storage/fog'

CarrierWave.configure do |config|
  config.storage = :fog
  config.fog_provider = 'fog/aws'
  config.fog_credentials = {
    provider: 'AWS',
    aws_access_key_id: 'ここにはアクセスキーを記入しています',
    aws_secret_access_key: 'ここにはシークレットキーを記入しています',
    region: 'ap-northeast-1'

  }

  config.fog_directory  = 'バケット名を記入しています'
  config.asset_host = 'https://s3-ap-northeast-1.amazonaws.com/バケット名を記入しています'
end

その他、追加すべきものがあればご指示ください。

Comments

[winterboum]

バッケと名はsaveできた時の値に戻してください。
model の画像取込みの宣言、取り込むルーチンを載せてください。
とりあえず「「ブロックパブリックアクセス 」のブロックを全てオフ」にした状態でトライし、失敗したらその時のlogを載せてください

[yu_1985]

production.logではなくてエラーログの方を見てみてください。

> config.asset_host = 'https://xn--rcktbp3a4212b.s3.amazonaws.com'

「xn--rcktbp3a4212b」というバケット名なのでしょうか？
そうでないのであれば正しくバケット名を指定してください。
参考
https://dev.classmethod.jp/articles/s3-no-longer-support-path-style-requests/

[amby]

ご回答誠にありがとうございます。「「ブロックパブリックアクセス 」のブロックを全てオフ」にした状態でバケット名なども戻して再度トライしてみたのですがやはり状況変わりませんでした。
画像取り込み、表示に関するコードを追記させていただきました。コードが間違っていますでしょうか？
またエラーコードについてなのですが、本番環境ではproduction.logがエラーログにあたると思っていたのですが、エラーコードの見方は別でしたでしょうか？大変恐縮ですがご教示いただきたいです。
よろしくお願いいたします。

[yu_1985]

> バケット名なども戻して

戻したのであれば正しい記載にしてください。
'https://<バケット名>.s3.amazonaws.com'
が正しい記載かと。

> 本番環境ではproduction.logがエラーログにあたる

Rails単体で動かしてるならエラーを含んだログが全部そこに出るかもしれません。
ただproduction.log＝エラーログではないです。

よくよく表示を見ると、画像の参照先が間違っているだけのような気がするので`config.asset_host `の記載を正しく直してみて再度確認してみてほしいのですが…。

[amby]

ありがとうございます。'config.asset_host'を修正してみましたが、画像が表示されない状況は変わりませんでした。。。
Chromeの検証のコンソールをみると下記のエラーが表示されていました。①は単純に画像が読み込めないという内容だと思うのですが、②は今回のエラーに関係あるのでしょうか？
①Failed to load resource: the server <画像の情報？> responded with a status of 404 ()
②Uncaught Error: jquery-ujs has already been loaded!　jquery.min.js:2 at Function.error (jquery.min.js:2)

[amby]

ちなみに、①の画像情報のリンクをクリックすると「この res.cloudinary.com ページが見つかりません」と表示されます。

Answer 1

初めまして、初学者で同じようなことになっていたことがあります。
私は、背景に画像を表示させようとしてエラーが続いていますが、
画像を表示させることは出来ました。

私の場合、veiwsの記述に誤りがあったのですがいかがでしょうか！？
image_tagかurl_forで表示は出来ました！！

Comments

[amby]

ご回答いただき本当にありがとうございます。。。！

viewsについては下記のように記述してみたのですが、表示できませんでした。コードに間違いあるのでしょうか。。。開発環境だとこれで表示できていたので、問題ないと思っていたのですが。。。

<%= image_tag micropost.image, class:"micropost_image" %>

[yutaro_0529]

表示することが出来ず、すみません。
私はまだまだ初学者で経験不足なので、正しいかわからないですが、
以前このヘルパーメソッドを使うと表示することが出来ました。
<% url(<%= Rails.application.routes.url_helpers.url_for(micropost.image) , class:"micropost_image%>
この記事を参考に画像を表示させることが出来ました！
https://shinkufencer.hateblo.jp/entry/2018/07/25/230537

[amby]

ご回答ありがとうございます！
参考に、修正トライしてみます。

本当にありがとうございました。

[yutaro_0529]

参考になれば嬉しいです。
私は今、画像を背景に表示させるやり方を探しているので、
学習中に何か表示方法で良いやり方を見つけたら共有します！！