8
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[aws,rails,css]awsにデプロイした時にcssが反映されないエラーの解決例

Last updated at Posted at 2020-03-11

#1.エラーの原因は?
ec2上のetc/nginx/conf.d/rails.confの記述内容の参照先の誤りにより、

/var/www/アプリ名/public/assetとすべきところを
/var/www/アプリ名/current/public/assetとしていたためでした

#2.解決方法

下記コマンドで設定箇所に飛びます

[ec2-user@ip-111-11-11-11 ~]$ cd /etc/nginx/conf.d
[ec2-user@ip-111-11-11-11 conf.d]$ sudo vim rails.conf
                    #↑書き込みを行うのでsudoをつけてください(権限ありで開くコマンド)

下記のように内容を編集してください

upstream app_server {
  # sharedの中を参照するよう変更
  server unix:/var/www/freemarket_sample_62d/shared/tmp/sockets/unicorn.sock;
}

server {
  listen 80;
  server_name 3.115.38.38;

  # ↓このpathを誤まってcurrent/publicの中を参照するようにしていました。下記が正解です。
  root /var/www/freemarket_sample_62d/public;

  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
# 筆者は↑にもcurrent指定してしまっていたためこのように修正しました。
  }

  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;

簡素ですがこれで筆者はエラー解決をすることができました

#3.なぜわざわざ記事にしたか
cssが反映されないで検索すると、コンパイルか、config/deploy/production.rbに関する記事しかヒットせずこの間違いにたどり着くまでにとても苦労したため、後の方々に少しでも早く解決していただければと思い作成しました。

筆者は"rails scss"で繰り返し検索をかけ、アセットパイプラインなる用語を見つけ、それを調べて初めて解決の糸口となった下記の記事に辿りつきました。("scss rails 反映されない"の検索ではヒットしませんでした)
https://qiita.com/metheglin/items/c5c756246b7afbd34ae2

なので今後学習される方がこのエラーの解決方法の検索で苦しまないように、"エラー"や"反映されない"の検索でこの記事をに辿りつき、その後上記の記事にたどり着いてもらえればいいなと思っております。

コンパイルはしたし、コンパイルの保存先も間違ってなくエラーが見つけられないで苦しんでいる方はおそらくこれが原因なので、上記の記事を一読していただければ良いのではないかなと思います。

純粋にローカルでエラーがあるかもという方は下記のrailsガイドをご参照ください
https://railsguides.jp/asset_pipeline.html

#4.後日談(記事より2週間後の話)
何故か再度この修正が仇となってエラーが起き、下記のように修正し、unicorn.rbのapp_path = File.expand_path('../../../', __FILE__)app_path ="/var/www/freemarket_sample_62d"としたらまた直りました。参考までに。

upstream app_server {
  # sharedの中を参照するよう変更
  server unix:/var/www/freemarket_sample_62d/shared/tmp/sockets/unicorn.sock;
}

server {
  listen 80;
  server_name 3.115.38.38;

  # currentの中を参照するよう変更
  root /var/www/freemarket_sample_62d/current/public;

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

8
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?