1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[ AWS ] EC2の本番環境で背景画像が表示されない問題

1
Last updated at Posted at 2021-03-11

今回、制作したポートフォリオを本番環境で使おうとしたときに 背景画像がまっ白な事に気づき、おかしいと思い調べを進めていきました。
結果的に表示された方法を備忘録として書いていきたいと思います。
 
 

本番環境ではコンパイルされるのが原因。

・本番環境では画像は全てpublic配下から読み込まれるようになる。
・コンパイルされないように先に移動させるのがベスト。してしまったら一度iamgesを複製してフォルダの名前のコピーと書かれた部分を消してiamgesという名前にに編集。
・新たにpublic配下に加える。
・コンパイルしてしまったものは過去の遺物として闇に葬りましょう。
(dog.jpg5349535363296969237626.jpgとあられもない姿にされて読み込まなくなる)
自分の場合、コンパイルされたcssは一応別のディレクトリに保管しました。
なのでstylesheet配下のcssをいじっています。(これできちんと読み込んでいますが、これが正解かは分かりません。)

解決策(例)

本来であればasset_path(アセットパイプラインのヘルパーメソッド)を使いますが、今回は。public/imagesを置いているので、
image_path
(pathなのでimagesではなく、image)
これはCSSのファイル内で使うことによって、public/imagesにある画像にパスを通すことができる。

まず初めに

config/environments/production.rb
  config.assets.compile = trueに変更    #元々はfalse

 

次にNginxの中の記述を

  location ^~ /images/ {     ⇦#imagesに変更。元々はassets
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }

  

次にuser.css.erbを手動で作成。
これを作ることによってRubyの記述ができるようになりviewで見えるようになる。

user.css.erb
form#new_user.new_user {
  padding: 10%;
  background-image: url("<%= image_path('field.jpg') %>")  #ここの記述では必ずpathを使って指定してあげます。
}

上記の記述では必ずpathを使って画像を指定してあげます。
  

こちらのcssは

user.css
form#new_user.new_user {
  padding: 10%;
  background-image: url("/images/field.jpg")
}

こちらも同様に画像の指定をします。
(publicの記述はいらない。自動で読みこむものなのでその下のファイル名を書く。)

まとめ

今回かなり色々調べてトライ&エラーしまくりましたが、自分はこの解決方法に至りました。
これらの記述を終えると反映されているはずです。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?