RailsでEC2にデプロイしたところCSSと画像が表示されない

Question

EC2への手動デプロイ時にCSS及び画像が表示されません

Railsで開発環境からAWSへデプロイする作業を進めていたところ、手動デプロイをして確認したら画像とCSSが表示されなくなってしまいました。
同じようなエラーで悩まれている方が多かったようで検索すると記事もいくつか出てくるのですが、どれを試しても効果がありませんでした。
以前に別のアプリケーションをデプロイしたときは問題なく表示されており、うまくいったほうのアプリケーションのコードとも見比べましたが差異が確認できませんでした。
どなたかご教示頂けますでしょうか。
初めての質問なので足りていない情報などありましたら大変お手数ですがご指摘下さい。
宜しくお願いいたします。

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

AWS: EC2/S3
DB: Maria DB
アプリケーションサーバー: Unicorn
webサーバー: Nginx

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

ログを確認すると

# EC２内で実行
$ tail -n 30 production.log

I, [2021-02-19T11:48:47.092118 #8670]  INFO -- : [952994f8-7137-40a8-be8f-2f20289521b9] Completed 200 OK in 925ms (Views: 920.4ms | ActiveRecord: 1.8ms | Allocations: 1375318)
I, [2021-02-19T11:48:47.242416 #8670]  INFO -- : [a5201a8b-54b3-4f75-8cb9-319addbbea90] Started GET "/1.jpeg" for 180.197.230.54 at 2021-02-19 11:48:47 +0000
F, [2021-02-19T11:48:47.243138 #8670] FATAL -- : [a5201a8b-54b3-4f75-8cb9-319addbbea90]   
[a5201a8b-54b3-4f75-8cb9-319addbbea90] ActionController::RoutingError (No route matches [GET] "/1.jpeg"):
[a5201a8b-54b3-4f75-8cb9-319addbbea90]   

以下略

app/views/index.html.erb

<%= image_tag '/1.jpeg', class: 'img-fluid', alt: 'Responsive image' %>

#下記に変更してもダメでした
<%= link_to image_tag("/1.jpeg", class: 'img-fluid', alt: 'Responsive image') %>

config/environments/development.rb

# trueからfalseに変更
config.assets.debug = false

config/environments/production.rb

# falseからtrueに変更
config.assets.compile = true

試したこと

assets配下に配置してある画像の場所が悪い可能性があるとの情報を見つけたので、
public/images配下にファイルを移動してみたところ変化なしでした。

# EC２内で実行
$ rails assets:precompile RAILS_ENV=production

# ⬇️プロセスをkill
$ ps aux | grep unicorn

#　Maria DBの確認
$ sudo systemctl status mariadb

# 再起動
$ sudo systemctl reload nginx

# アセットを見つけられるように指定
RAILS_SERVE_STATIC_FILES=1 unicorn_rails -c config/unicorn.rb -E production -D

# ⬇️エラーログを確認してもエラーはありません
$ less log/unicorn.stderr.log

Answer 1

直近の質問で参考になりそうな回答をしました。
また、そこでも貼った参考になりそうなブログの記事をここにも貼っておきます。
【Ruby on Rails】画像は public と app/assets/images のどちらに設置すべき？
恐らくは画像の配置先に問題があります。

画像はどのディレクトリに配置していますか？
先の質問の回答に配置先として記載しているのはapp/assets/imagesまたはpublicであってpublic/imagesではないです。
そのように配置した場合、/1.jpegではなく/images/1.jpegのような感じの指定になるのではないですか？

先の質問ではJSでアセットパイプラインの画像を読み込むのは面倒なのでpublic配下に画像を配置したほうが簡単ですよという回答でしたけど、今回JSで画像読み込みしてるわけではないのでapp/assets/imagesに配置してassets:precompileでも別にいいような気はします。

Comments

[q00]

ご回答ありがとうございます。
リンクをして頂いた部分も読ませて頂きました。
ご指摘の通り、`/1.jpeg`の部分をまず`1.jpeg`としました。
この部分ですがBootstrapのcarouselで3枚の画像をスライド表示させていおりますので、`2.jpeg`、`3.jpeg`と3枚続きます。
2と3は`/`が入っていなかったので修正しました。

また、下記コマンドにてNginxファイルを修正しました。

```terminal
$ sudo vim /etc/nginx/conf.d/rails.conf

# {}で囲った部分をブロックと呼ぶ。サーバの設定ができる
server {
# このプログラムが接続を受け付けるポート番号
listen 80;
# 接続を受け付けるリクエストURL ここに書いていないURLではアクセスできない
server_name Elastic IP;

# クライアントからアップロードされてくるファイルの容量の上限を2ギガに設定。デフォルトは1メガなので大きめにしておく
client_max_body_size 2g;

# 接続が来た際のrootディレクトリ
root /var/www/アプリ名/current/public;　　⬅️currentを追加しました

# assetsファイル(CSSやJavaScriptのファイルなど)にアクセスが来た際に適用される設定
location ^~ /assets/ {
gzip_static on;
expires max;
add_header Cache-Control public;
root /var/www/アプリ名/current/public;　　⬅️currentを追加しました
}

```

これで画像とCSSが表示されました。
yu_1985さんのおっしゃる通り、画像の配置は`app/assets/images`で問題なく表示されることがわかりました。
ありがとうございます。
しかしながら1枚目の画像だけ表示されておらず、2枚目と3枚目は表示されてスライドのアクションも問題なく作動しています。
1枚目画像の名前を変えてみたりしましたが表示がされない状況です。
carouselが引っかかっているのかと思いましたが画像のみが表示されておらず他に原因があるのではないかと思いコードを見直し、設定を確認していますが問題になりそうな部分がわかりませんでした。

```index.html.erb
<main role="main">
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="7000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<%= image_tag '1.jpeg', class: 'img-fluid', alt: 'Responsive image' %>
<div class="container">
<div class="carousel-caption">
<h1><strong>テキスト</strong></h1>
</div>
</div>
</div>
<div class="carousel-item">
<%= image_tag '2.jpeg', class: 'img-fluid', alt: 'Responsive image' %>
<div class="container">
<div class="carousel-caption">
<h1><strong>テキスト</strong></h1>
</div>
</div>
</div>
<div class="carousel-item">
<%= image_tag '3.jpeg', class: 'img-fluid', alt: 'Responsive image' %>
<div class="container">
<div class="carousel-caption">
<h1><strong>テキスト</strong></h1>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
```

Answer 2

解決できました

currennt部分を削除し、インスタンス以外を再起動したところ問題なく表示されました。
yu_1985さんありがとうございました。