本番環境（AWS）CSSを反映させたい

Question

前提・実現したいこと

本番環境（AWS）にてCSSを反映させたいのですが、反映されていない状態です。
Herokuへもデプロイを行っているのですが、こちらは正常にCSSが反映されているため、Nginxの設定やunicorn.rbに問題があるように感じておりますが、解決に至っておりません。

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

該当のソースコード

/etc/nginx/conf.d/rails.conf

※省略※

# 接続が来た際のrootディレクトリ
  root /var/www/powu_v1.0.0/public;

# assetsファイル(CSSやJavaScriptのファイルなど)にアクセスが来た際に適用される設定
  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
    root /var/www/powu_v1.0.0/public;
  }

※省略※

unicorn.rb

#サーバ上でのアプリケーションコードが設置されているディレクトリを変数に入れておく
app_path = File.expand_path('../../', __FILE__)

#アプリケーションサーバの性能を決定する
worker_processes 1

#アプリケーションの設置されているディレクトリを指定
working_directory app_path

#Unicornの起動に必要なファイルの設置場所を指定
pid "#{app_path}/tmp/pids/unicorn.pid"

#ポート番号を指定
listen "#{app_path}/tmp/sockets/unicorn.sock"

#エラーのログを記録するファイルを指定
stderr_path "#{app_path}/log/unicorn.stderr.log"

#通常のログを記録するファイルを指定
stdout_path "#{app_path}/log/unicorn.stdout.log"

#Railsアプリケーションの応答を待つ上限時間を設定
timeout 60

#以下は応用的な設定なので説明は割愛

preload_app true
GC.respond_to?(:copy_on_write_friendly=) && GC.copy_on_write_friendly = true

check_client_connection false

run_once = true

before_fork do |server, worker|
  defined?(ActiveRecord::Base) &&
    ActiveRecord::Base.connection.disconnect!

  if run_once
    run_once = false # prevent from firing again
  end

  old_pid = "#{server.config[:pid]}.oldbin"
  if File.exist?(old_pid) && server.pid != old_pid
    begin
      sig = (worker.nr + 1) >= server.worker_processes ? :QUIT : :TTOU
      Process.kill(sig, File.read(old_pid).to_i)
    rescue Errno::ENOENT, Errno::ESRCH => e
      logger.error e
    end
  end
end

after_fork do |_server, _worker|
  defined?(ActiveRecord::Base) && ActiveRecord::Base.establish_connection
end

app/assets/stylesheets/spplication.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require simple_calendar
 */
 @import "bootstrap";
 @import "user.css";
 @import "nav.css";
 @import "department/department.index.css";
 @import "department/department.new.css";
 @import "events.css";
 @import "simple_calendar.scss";
 @import "reset.css";


 * {
  box-sizing: border-box;
}

// ローディング画面
#overlay{ 
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height:100%;
  display: none;
  background: rgba(0,0,0,0.6);
}
.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;  
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-top: 4px #2e93e6 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
  100% { 
    transform: rotate(360deg); 
  }
}
.is-hide{
  display:none;
}

試したこと

https://qiita.com/KONTA2019/items/2a519f18b204dea9a771
上記のURLを参考に修正を加えておりましたが、解決に至りませんでした。
エラーから、CSSファイルが読み込めていないので正しく設定してあげれば解決出来そうではあるのですが、解決法が分からず、ご教授頂けると幸いです...

Comments

[AbeTakashi]

AWSのnginxのアクセスログやエラーログ、もしくはフレームワーク側のログは確認しましたか？ どちらかが404返ってきてるので、何かしらのログが出ているはずです。

こちらを見ても原因が分からないのであれば、そのログの情報を質問文に追記していただければ、正しい回答が出てくるかもしれません。

[eita-eng]

ご指摘ありがとうございます。
原因を特定できなかったため、ログを記載させて頂きました。

[AbeTakashi]

ログを見るに /var/www/powu_v1.0.0/public/assets/ 以下のファイルが存在しないとなっていますね。nginxの設定の location ^~ /assets/ 以下がおそらく間違っているのだと思います。この設定が効いてないのか、効いてはいるけど中の設定が間違っているかはこれだけの情報では読み取れません。実際のcssファイルが存在するディレクトリのフルパスを確認しつつ、この辺を調整しながらnginx再起動して都度ログを見ながら確認してみてはどうでしょう。

[eita-eng]

ご返信ありがとうございます。
先程ログを確認しながらパス関連の修正を繰り返しておりましたが、解決に至っておりません。
パスに関してですが色々試した結果、ブラウザの検証画面を確認した所、現在のパスが唯一ファイルまで辿り着いてはおり、中身だけ空の状態の様な形です。しかし、これは@importが正しく読み込まれていないような状態なのでしょうか？
調べている中でapplication.scssが問題の様な感じがしております。（下記の記事を見て、プリコンパイルの対象関連というところでscssは対象ではないのでしょうか？）
https://qiita.com/metheglin/items/c5c756246b7afbd34ae2
複数質問申し訳ございません。

[eita-eng]

度々の質問失礼致しました。
無事解決に至りました！ご教授有難う御座いました！

Answer 1

 @import "user.css";
 @import "nav.css";

上記の記述を、

 *= require user
 *= require nav

のように記述した所、読み込むようになりました！