【Rails】本番環境におけるアセットプリコンパイルの設定

自分用メモです。
本番環境を整えた後のアセットプリコンパイルの設定について。

## 環境

ruby 2.6.4
Rails 5.2.4.1
puma 3.12.4
nginx 1.12.2

## エラーログ

本番環境でルートにアクセスしたらエラーが表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/dc50f901-0de0-97f0-01e1-fe44ddeface6.png)
エラーログはこんな感じです。（読みやすいように整形済）

```test_app/log/production.log
 INFO -- : [e53342b0-17fc-4146-a4d1-6d64dc3007cd] Started GET "/" for 119.245.128.225 at 2020-03-09 02:40:39 +0000
 INFO -- : [e53342b0-17fc-4146-a4d1-6d64dc3007cd] Processing by PostsController#index as HTML
 INFO -- : [e53342b0-17fc-4146-a4d1-6d64dc3007cd]   Rendering posts/index.html.erb within layouts/application
DEBUG -- : [e53342b0-17fc-4146-a4d1-6d64dc3007cd]   ^[[1m^[[35m (0.5ms)^[[0m  ^[[1m^[[35mSET NAMES utf8mb4 COLLATE utf8mb4_general_ci,  @@SESSION.sql_mode = CONCAT(CONCAT(@@sql_mode, ',STRICT_ALL_TABLES'), ',NO_AUTO_VALUE_ON_ZERO'),  @@SESSION.sql_auto_is_null = 0, @@SESSION.wait_timeout = 2147483^[[0m
DEBUG -- : [e53342b0-17fc-4146-a4d1-6d64dc3007cd]   ^[[1m^[[36mPost Load (0.6ms)^[[0m  ^[[1m^[[34mSELECT `posts`.* FROM `posts`^[[0m
 INFO -- : [e53342b0-17fc-4146-a4d1-6d64dc3007cd]   Rendered posts/index.html.erb within layouts/application (39.9ms)
 INFO -- : [e53342b0-17fc-4146-a4d1-6d64dc3007cd] Completed 500 Internal Server Error in 41ms (ActiveRecord: 1.1ms)
FATAL -- : [e53342b0-17fc-4146-a4d1-6d64dc3007cd]
FATAL -- : [e53342b0-17fc-4146-a4d1-6d64dc3007cd] ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.):
FATAL -- : [e53342b0-17fc-4146-a4d1-6d64dc3007cd]      5:     <%= csrf_meta_tags %>
           [e53342b0-17fc-4146-a4d1-6d64dc3007cd]      6:     <%= csp_meta_tag %>
           [e53342b0-17fc-4146-a4d1-6d64dc3007cd]      7:
           [e53342b0-17fc-4146-a4d1-6d64dc3007cd]      8:     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
           [e53342b0-17fc-4146-a4d1-6d64dc3007cd]      9:     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
           [e53342b0-17fc-4146-a4d1-6d64dc3007cd]     10:   </head>
           [e53342b0-17fc-4146-a4d1-6d64dc3007cd]     11:
FATAL -- : [e53342b0-17fc-4146-a4d1-6d64dc3007cd]
FATAL -- : [e53342b0-17fc-4146-a4d1-6d64dc3007cd] app/views/layouts/application.html.erb:8:in `_app_views_layouts_application_html_erb___3755432300733913925_37575720'
 INFO -- : [8619eccb-3edb-4fa4-9a1b-70d8b0a37c37] Started GET "/" for 119.245.128.225 at 2020-03-09 02:40:45 +0000
 INFO -- : [8619eccb-3edb-4fa4-9a1b-70d8b0a37c37] Processing by PostsController#index as HTML
```
> ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.):

要するに、アセットされた"application.css"がないということらしい。

## 手順
### 1. 手動でプリコンパイルする

自動でプリコンパイルされないので、手動でプリコンパイルしてあげる。

```terminal:terminal
[username@ip-10-0-11-63 test_app]$ bundle exec rails assets:precompile RAILS_ENV=production
yarn install v1.22.1
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.06s.
I, [2020-03-09T02:51:40.398095 #11404]  INFO -- : Writing /var/www/test_app/public/assets/application-111ac35321e379f53529ace176fe931c952be73f7ffd688b815ec21878126685.js
I, [2020-03-09T02:51:40.398487 #11404]  INFO -- : Writing /var/www/test_app/public/assets/application-111ac35321e379f53529ace176fe931c952be73f7ffd688b815ec21878126685.js.gz
I, [2020-03-09T02:51:40.401030 #11404]  INFO -- : Writing /var/www/test_app/public/assets/application-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css
I, [2020-03-09T02:51:40.401248 #11404]  INFO -- : Writing /var/www/test_app/public/assets/application-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css.gz
```

public/assets/配下にプリコンパイルされたアセットが存在することを確認。

```terminal:terminal
[username@ip-10-0-11-63 test_app]$ cd public/assets/
[username@ip-10-0-11-63 assets]$ ls
application-111ac35321e379f53529ace176fe931c952be73f7ffd688b815ec21878126685.js
application-111ac35321e379f53529ace176fe931c952be73f7ffd688b815ec21878126685.js.gz
application-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css
application-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css.gz
```

```
http://18.179.8.134/assets/application-111ac35321e379f53529ace176fe931c952be73f7ffd688b815ec21878126685.js
```

確認したアドレスに直アクセスしてみると、ちゃんと表示される（下記画像）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/732f1715-72b2-6729-f3da-6b67a00ea52b.png)

### 2. public配下のファイルを公開する

```config/environments/production.rb
  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
```
の値がfalseの場合、public配下のファイルが公開されないので、`true`にするとうまく行きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/367e9f47-0b96-9b30-96d6-6c9486a9f8c0.png)
が、直接`true`にするのはよくないということだったので、上の変更はやめました。
エラーが出るのは`ENV['RAILS_SERVE_STATIC_FILES']`に値が入っていないのが原因なので、ターミナルから変数を渡すことにします。

```terminal:terminal
[username@ip-10-0-11-63 test_app]$ export RAILS_SERVE_STATIC_FILES=true
```

### 3. サーバーを再起動する

コードの変更などを行った後、nginxの再起動だけでは反映されないので、pumaも再起動する必要があります。

```terminal:terminal
[username@ip-10-0-11-63 test_app]$ ps ax | grep puma
14353 ?        Sl     0:00 puma 3.12.4 (unix:///var/www/test_app/tmp/sockets/puma.sock) [test_app]
14355 ?        Sl     0:00 puma: cluster worker 0: 14353 [test_app]
14356 ?        Sl     0:00 puma: cluster worker 1: 14353 [test_app]
14662 pts/1    S+     0:00 grep --color=auto puma
[username@ip-10-0-11-63 test_app]$ kill -9 14353
[username@ip-10-0-11-63 test_app]$ bundle exec puma -C config/puma/production.rb -e production -d
[username@ip-10-0-11-63 test_app]$ sudo nginx -s stop
[username@ip-10-0-11-63 test_app]$ sudo service nginx start
```

親玉のpumaだけ`kill`すれば、cluster workerは消えてくれます。不安な場合は、再度`$ ps ax | grep puma`コマンドで確認するといいです。

## リンク

- [アセットパイプライン - Railsガイド](https://railsguides.jp/asset_pipeline.html#production%E7%92%B0%E5%A2%83%E3%81%AE%E5%A0%B4%E5%90%88)
- [Rails Asset Pipelineがうまくいかないときの問題の切り分けかた](https://qiita.com/metheglin/items/c5c756246b7afbd34ae2)
- [Rails5でnginx+pumaでproduction環境を構築する](http://blog.atwata.com/middle/2017/09/30/rails5-nginx-puma.html)
- [よく使うアセット関連の設定項目まとめ](https://qiita.com/suhirotaka/items/4c7f1f43d822d31eeccf)