質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 426

score 12

現在の状況

  • 現在、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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • branchpeach

    2021/04/18 02:07

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

    キャンセル

  • branchpeach

    2021/04/18 02:18

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

    キャンセル

  • AbeTakashi

    2021/04/19 22:11

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

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

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

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

    キャンセル

回答 1

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る