本番環境(EC2)上でunicornは起動できたが、アクセスができない時に確認すべきこと

# 概要
下記記事を参考に、RailsアプリをAWS上で動かす設定をしていたが、unicornの起動後も色々とハマった。
その際の解決方法について。

> （参考）unicorn起動までにハマったこと
https://qiita.com/jibirian999/items/f793206a7b7adf485b7d

https://qiita.com/gyu_outputs/items/b123ef229842d857ff39#%E3%83%A6%E3%83%8B%E3%82%B3%E3%83%BC%E3%83%B3%E3%82%92%E8%B5%B7%E5%8B%95

# 環境
- アプリ
  - ruby 3.0.2
  - rails 6.1.4
  - mysql 8.0.31

- EC2AMI
    - Amazon Linux2 AMI 


## エラー①ERR_SSL_PROTOCOL_ERROR
unicorn起動後、ChromeブラウザにてパブリックIPアドレスにアクセスしたところ、エラーが発生。

### エラー内容（ブラウザ上で表示）
>このサイトは安全に接続できません
XX.XX.XX.XX から無効な応答が送信されました。
ERR_SSL_PROTOCOL_ERROR


https://XX.XX.XX.XX:3000
となっているところを、
http://XX.XX.XX.XX:3000
に変えてアクセスしても同じ。

起動自体はできている様子。
```terminal:ターミナル（EC2）
[ec2-user@ip-xx-xx-xx-xx <app名>]$ ps -ef | grep unicorn | grep -v grep
ec2-user 22015     1  0 11:32 ?        00:00:01 unicorn_rails master -c config/unicorn.rb -E production -D
ec2-user 22017 22015  0 11:32 ?        00:00:00 unicorn_rails worker[0] -c config/unicorn.rb -E production -D
```

### 対応
production.rbのconfig.force_sslがtrueになっていると、常にSSL接続されてしまうとのこと。
httpでアクセスできるように下記をコメントアウト。
```rb:config/environments/production.rb
Rails.application.configure do
  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
  # config.force_ssl = true # コメントアウト
end
```

## エラー②We're sorry, but something went wrong.
それでも依然アクセスすることができない。
### エラー内容
>We're sorry, but something went wrong.

```terminal
curl -v http://XX.XX.XX.XX:3000
```
curlで試しても同様。

### ログを確認
```terminal:ターミナル（EC2）
[ec2-user@ip-xx-xx-xx-xx <app名>]$ cat log/production.log
```
>  (Mysql2::Error: Table 'my-app.users' doesn't exist):

db:createはしていたが、db:migrateはしていなかったことが判明。

### 対応
```terminal:ターミナル（EC2）
[ec2-user@ip-xx-xx-xx-xx <app名>]$ rails db:migrate RAILS_ENV=production
```

正常にマイグレーションが実行された。

## エラー③We're sorry, but something went wrong.
それでも依然アクセスすることができない。
再度ログを確認。

> ActionView::Template::Error (Webpacker can't find application.js in /var/www/my-app/public/packs/manifest.json. Possible causes:

どうやらアセットコンパイルができていない様子。

### 対応
```terminal:ターミナル（EC2）
[ec2-user@ip-xx-xx-xx-xx <app名>]$ rails assets:precompile RAILS_ENV=production
```
しかしここでもエラーが発生。

> Sprockets::FileNotFound: couldn't find file 'trix/dist/trix' with type 'text/css'

そもそもyarnが入っていなかった。

```terminal:ターミナル（EC2）
[ec2-user@ip-xx-xx-xx-xx <app名>]$ npm install --global yarn
```
これで再度コンパイル実行し、成功。


参考

https://qiita.com/miriwo/items/a1a0d6471aef9bff224f

## エラー④CSSが適用されていない
ここにきて、curlでHTMLを取得できるようになった。
EC2上からも、ローカルからも、どちらもHTML取得できている状態。
また、ブラウザ上でもアクセス自体はできた。
しかし、CSSが効いていない。

ログを見ると、前と同じエラーが出ている。
> ActionView::Template::Error (Webpacker can't find application.js in /var/www/my-app/public/packs/manifest.json. Possible causes:

アセットコンパイルがうまくいっていない
or
うまくいっているがコンパイル後のファイルを参照できていない
と思われたため、

- キャッシュを削除したり

https://follmy.com/rails-assets-compile-cache/

```terminal:ターミナル（EC2）
[ec2-user@ip-xx-xx-xx-xx <app名>]$ bundle exec rails tmp:cache:clear
[ec2-user@ip-xx-xx-xx-xx <app名>]$ bundle exec rails assets:clobber RAILS_ENV=production
[ec2-user@ip-xx-xx-xx-xx <app名>]$ bundle exec rails assets:precompile RAILS_ENV=production
```

webpacker.ymlのproduction設定にて、
- compile: false をtrueにしたり
- extract_css: true をfalseにしたり

https://techracho.bpsinc.jp/hachi8833/2021_05_13/85940

https://ja.stackoverflow.com/questions/66709/webpacker%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AB%E3%82%88%E3%81%A3%E3%81%A6aws%E3%81%A7rails6%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93

したが、うまくいかず。

### 対応

参考

https://qiita.com/at-946/items/b7d467bf25c40fcfca44

https://railsguides.jp/asset_pipeline.html

こちらの記事と公式ガイドにある通り、
> Railsのアセットはプリコンパイル済みかつ静的なアセットとしてWebサーバーから提供されることが前提

のため、config.public_file_server.enabledをtrueにしなければならないとのこと。

```ruby:config/environments/production.rb
config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
```

そこで、環境変数として1を渡し、unicornを起動。
```terminal:ターミナル（EC2）
[ec2-user@ip-xx-xx-xx-xx <app名>]$ RAILS_SERVE_STATIC_FILES=1 unicorn_rails -c config/unicorn.rb -E production -D
```

これにてCSSが反映され、アプリの正常な起動をすることができた。



# 最後に
より良い方法や間違い等ありましたらご指摘いただけますと幸いです！