AWS(EC2)でRoute 53を使用しドメインを取得するとcssが適用されなくなった。

Question

#現在の状況

• 現在、Capistranoを使用し、AWS(EC2)に自動デプロイを行っております。
• route53でドメインを設定し、本番環境にアクセスするとcssが適用されなくなりました。(アクセスは可)
• route53を使用する前のElastic IPで本番環境を確認すると正しく表示されます。

質問

cssが適用されない原因は何か？
適用されるまでに時間がかかるものなのか？

インフラ構築

エラー

config/deploy/production.rb

server 'Elastic IP', user: 'ec2-user', roles: %w{app db web}

config/unicorn.rb

app_path = File.expand_path('../../../', __FILE__)

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

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

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

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

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

#通常のログを記録するファイルを指定
stdout_path "#{app_path}/shared/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

config/deploy.rb

lock '3.16.0'

set :application, 'アプリ名'

# どのリポジトリからアプリをpullするかを指定する
set :repo_url,  'githubリポジトリ'

# バージョンが変わっても共通で参照するディレクトリを指定
set :linked_dirs, fetch(:linked_dirs, []).push('log', 'tmp/pids', 'tmp/cache', 'tmp/sockets', 'vendor/bundle', 'public/system', 'public/uploads')

set :rbenv_type, :user
set :rbenv_ruby, '2.6.5'

# どの公開鍵を利用してデプロイするか
set :ssh_options, auth_methods: ['publickey'],
                                  keys: ['#'] 

# プロセス番号を記載したファイルの場所
set :unicorn_pid, -> { "#{shared_path}/tmp/pids/unicorn.pid" }

# Unicornの設定ファイルの場所
set :unicorn_config_path, -> { "#{current_path}/config/unicorn.rb" }
set :keep_releases, 5

# デプロイ処理が終わった後、Unicornを再起動するための記述
after 'deploy:publishing', 'deploy:restart'
namespace :deploy do
  task :restart do
    invoke 'unicorn:restart'
  end
end

Capfile

require "capistrano/setup"
require "capistrano/deploy"
require 'capistrano/rbenv'
require 'capistrano/bundler'
require 'capistrano/rails/assets'
require 'capistrano/rails/migrations'
require 'capistrano3/unicorn'

Dir.glob("lib/capistrano/tasks/*.rake").each { |r| import r }

capistrano.log

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  js/application-ea23ae402b20ce672355.js (541 KiB)
  js/application-ea23ae402b20ce672355.js.map.gz (528 KiB)
  js/application-ea23ae402b20ce672355.js.map.br (447 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  application (541 KiB)
      js/application-ea23ae402b20ce672355.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

Nginxエラーログ

2021/04/17 17:08:29 [error] 22948#0: *6 open() "/var/www/アプリケーション名/current/public/assets/application-796485acc5c1b3047846fd111ee629a32c9e3776a00951b710b65463d118fa3f.css" failed (2: No such file or directory), client: ~~~, server: Elastic IP名, request: "GET /assets/application-796485acc5c1b3047846fd111ee629a32c9e3776a00951b710b65463d118fa3f.css HTTP/1.1", host: "the-expenses.work", referrer: "http://the-expenses.work/users/sign_in"

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

upstream app_server {
  # Unicornと連携させるための設定
  server unix:/var/www/The-Expenses-95/shared/tmp/sockets/unicorn.sock;
}

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

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

# 接続が来た際のrootディレクトリ
  root /var/www/The-Expenses-95/current/public;

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

  try_files $uri/index.html $uri @unicorn;

  location @unicorn {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://app_server;
  }

  error_page 500 502 503 504 /500.html;
}

参考記事

以下の記事を参考にドメインを取得しました。
https://qiita.com/kono-hiroki/items/154e3ff96f7f63dc62cf

どなたかご教授いただけると幸いです。。

Comments

[yu_1985]

これだけだと何もわからないので、どのような構成かの説明を追記の上なにか現状の設定を貼ってください。

- 現状のアプリケーション・インフラ構成
Capistranoを使っているのでおそらくRailsだろうと思いますが、想像でしかないのでわかりません
何かミドルウェアや関連ツール（きっとnginxやunicornまたはpumaあたり）の設定があればそれも貼ってください。
- 該当のサイトにアクセスしたときに開発者ツール（F12）で見てみて、css読み込みにどのようなエラーがでているか
- Capistranoのデプロイで何を実行しているか
deploy.rbなどCapistrano周りの設定ファイルを貼ってください

[branchpeach]

すみません。情報不足でした。
よろしくお願いします。

[AbeTakashi]

まずはWEBブラウザのソースを見て、CSSのURLを直接確認して、そのURLにアクセスしてみたらどうなりますか？　この手の不具合の多くはFQDNやパスが微妙に間違っていたり、httpとhttpsが間違っていたりとか、その手のやつですよ。　それでも分からなければサーバのログも確認してCSSのアクセスが来ているかどうか、来ているならどう返しているか（404なのか503なのか）とか、その辺もチェックしたらいいと思います。

[branchpeach]

ご回答ありがとうございます。
エラーログを見てみたのですが、原因がわかりませんでした。。。
追加で添付しております。
よろしくお願いします。

[branchpeach]

コンソールのエラー画像も追加いたしました。

[AbeTakashi]

404のログですがこれはWEBブラウザ側のログですよね？　サーバ側にもログは出ていますか？　まずはここが切り分けポイントで、サーバ側にログが来てないのであれば、httpとhttpsが間違ってるとか、FQDNが間違っているとかそっち方面を疑うべきでしょう。サーバ側にも同じようにNot Foundのログが出ているのであれば、404にならないように諸々の設定を変えるしかないと思います。デプロイはどうなっているのか？　application-xxxx.cssというファイルがどこに配置されていていて、WEBサーバのドキュメントルートがどうなっているか？などをチェックして間違いを探すところから始めるべきかと。この辺の情報まで質問文に追記して頂ければ、原因を的確にアドバイスできる人が現れるかもしれませんが、現状だと404だけでは的確なアドバイスが来るのは期待薄な気もします。

[branchpeach]

ご回答ありがとうございます。
すみません。初歩的なことなのですが、サーバーサイドのエラーログの探し方がわからなくて。。
調べてみたのですが、出てこなくて。
教えていただけませんか？

[branchpeach]

sudo less /var/log/nginx/error.log　
このコマンドをターミナルで入力し、エラーログが出てきたので追加で添付しております。
よろしくお願いします。

[AbeTakashi]

サーバ側にアクセスログがあるのであれば、原因は多少は絞らせそうですね。

/var/www/アプリケーション名/current/public/assets/application-796485acc5c1b3047846fd111ee629a32c9e3776a00951b710b65463d118fa3f.css

は存在しないんですよね？　ですが、クライアント側としては存在しているものとしてアクセスが発生しているはずです。application-796485acc5c1b3047846fd111ee629a32c9e3776a00951b710b65463d118fa3f.css はサーバ上のどこにありますでしょうか？　このファイルが違うディレクトリに存在するのであれば、Nginxの設定などを見直す必要がありそうです。

ただ、気になるのはクライアントのログとのファイル名が違うことです。なんかファイル名がもっと短いですよね・・・　少なくともクライアントがあると思ってアクセスしているCSSファイルがサーバ上に存在しないのであれば、なぜこれが起こっているのかの原因をつかまないといけなさそうです。CSSファイルを生成する過程で何かしらミスが発生していそうな気もします。Rubyのフレームワークか何かでCSSファイルを生成しているのであれば、そちらが原因じゃないでしょうか？

Answer 1

Nginxのファイルのアプリ名の小文字と大文字を間違えておりました。