EC2で運用のrailsアプリでnginxでcssとjsが反映されません

Question

お読みいただきまして、ありがとうございます。
現在AWSにてEC2+RDS、nginx+unicornでrailsアプリを運用しております。

ご相談したいこと:

nginxを経由した、
xxx.xxx.xxx.xxx(:80)
でcss及びjsが反映されない。
(xxx.xxx.xxx.xxx:3000では反映されています。)

nginxのエラーコード:

2017/11/28 03:08:35 [error] 28xx7#0: *1xxx00 open() "/var/www/my_app/public/assets/application-9f0dfe6ead4aacc77b1a6e6e874aa719.css" failed (2: No such file or directory), client: xxx.xxx.xxx.xxx, server: xxx.xxx.xxx.xxx, request: "GET
/assets/application-9f0dfe6ead4aacc77b1a6e6e874aa719.css HTTP/1.1", host: "xxx.xxx.xxx.xxx", referrer: "http://xxx.xxx.xxx.xxx/"
※ファイルはbundle exec rake assets:precompile RAILS_ENV=productionにて生成済みです。またファイル名も合っています。
※unicornのログではエラーは出ておりません。

/etc/nginx/conf.d/my_app.confの内容:

upstream app_server {
server 127.0.0.1:3000;
}

server {
listen 80;
server_name xxx.xxx.xxx.xxx;

root /var/www/my_app/public;

location ^~ /assets/ {
gzip_static on;
expires max;
add_header Cache-Control 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;

}

/etc/nginx/nginx.confの内容:

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /var/run/nginx.pid;

include /usr/share/nginx/modules/*.conf;

events {
worker_connections 1024;
}

http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';

access_log  /var/log/nginx/access.log  main;

sendfile            on;
tcp_nopush          on;
tcp_nodelay         on;
keepalive_timeout   65;
types_hash_max_size 2048;

include             /etc/nginx/mime.types;
default_type        application/octet-stream;

include /etc/nginx/conf.d/*.conf;

index   index.html index.htm;

server {
        listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  localhost;
    root         /usr/share/nginx/html;

    location / {
    }

    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
}

#試したこと
nginx/conf.d/my_appの内容を少し変更したところ、ブラウザで反応がありましたので、nginxが反映されていないということではないようです。

rootあたりかと思うのですが、原因がわかりません。
お忙しいところ恐縮ですが、どなたかお分かりになる方がいらっしゃったらよろしくお願いいたします。

追記:

config/environments/production.rbの内容です。

Rails.application.configure do

config.cache_classes = true

config.eager_load = true

config.consider_all_requests_local = false
config.action_controller.perform_caching = true

config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?

config.assets.js_compressor = :uglifier

config.assets.compile = true

config.assets.digest = true

config.log_level = :debug

config.i18n.fallbacks = true

config.active_support.deprecation = :notify

config.log_formatter = ::Logger::Formatter.new

config.active_record.dump_schema_after_migration = false
end

Answer 1

本番環境では、通常Rails側の設定でconfig.assets.compile = falseがセットされているため、事前にrake assets:precompileでアセットのJavaScriptやCSSを生成しておく必要があります。

Comments

[takahirono4]

ご教授いただきましてありがとうございます。
EC2デプロイする前にconfig.assets.compile = trueに変えておりましたが、改めてlocalでrake assets:precompileで生成し、本番でも削除後に生成し直しましたが状況は変わりませんでした。(後ほど追記にてconfig/production.rbの内容を記載いたします。)

[takahirono4]

本番環境にpullする前に現在のassetsディレクトリをbundle exec rake assets:clobberにて削除しました。
その後gitpush、gitpullにて本番環境に適用させ、改めてEC2のアプリの環境でrake assets:precompile RAILS_ENV=productionを行いましたが、結果的には変わりませんでした。
unicornとnginxの再起動に関しては以下の手順で行いました。
1,unicorn切断
2,assets:precompile RAILS_ENV=productionのコマンド
3,nginxリロード
4,RAILS_SERVE_STATIC_FILES=1 unicorn_rails -c config/unicorn.rb -E productionのコマンド

Answer 2

前にもやった方法ですが、再度試してみて何故か解決しました。

upstream app_server {
server 127.0.0.1:3000;
}

server {
listen 80;
server_name xxx.xxx.xxx.xxx;

root /var/www/my_app/public;

location ^~ /assets/ {
gzip_static on;
expires max;
add_header Cache-Control public;
///////追記//////////
root /var/www/my_app/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;

}

一度nginxをパッケージアンイストールし、インストールし直したあとで、上記の追記を行いました。
その後、unicornの再起動とnginxの再起動を行なったらxxx.xxx.xxx.xxx(:80)で正常に表示されました。

お答えくださったmaisumakunさん、ありがとうございました。