EC2でデプロイしたRailsアプリ内のReact.jsのCSSが読み込めない

#この記事いついて
私の備忘録としてここに残します。

Railsで作成したアプリのフロント部分にReact.jsを採用し、そこにCSSを読み込ませました。ローカル環境ではCSSが読み込まれていたのに、EC2でデプロイした際には読み込まれない。そんな状況の解決方法を記述します。

#ディレクトリ構成
appディレクトリ直下

.
├── assets
│   ├── config
│   ├── images
│   └── stylesheets
├── channels
│   └── application_cable
├── controllers
│   ├── concerns
│   └── users
├── helpers
├── javascript
│   ├── channels
│   ├── components
│   └── packs

javascriptディレクトリ

.
├── channels
│   ├── consumer.js
│   └── index.js
├── comment.js
├── components
│   └── HelloWorld.js
├── count.js
├── darkmode.js
├── nav.js
└── packs
    ├── App.jsx
    ├── Navbar.jsx
    ├── application.js
    ├── data.jsx
    ├── index.jsx
    ├── index.css
    ├── logo.svg
    ├── logo2.svg
    └── server_rendering.js

javascriptディレクトリのpacksの中にReactと対象のCSSを作成しています。
この状態で所定のビューファイルに下記を記述。

index.html.erb

<%=javascript_pack_tag 'index'%>

これでローカル環境ではReactもCSSも読み込まれる。
しかし、EC2でデプロイした先のブラウザではCSSが読み込まれず、悲惨な状況に...

#原因
javascript/packsディレクトリにCSSを作成した事が原因でした。
EC2でCSSを読み込む際はpublicディレクトリで対応します。

「railsではassetsディレクトリにCSSを記述して読み込んでいるんじゃないの？どうやってpublicにCSSを読み込ませるの??」

と思われる方もいらっしゃると思います。
EC2上で設定した上で下記を実行。
今回は備忘録なので詳細は省きます。

[ec2-user@~~~ myapp]$ rails assets:precompile RAILS_ENV=production

「rails assets:precompile」このコマンドでassetsディレクトリを圧縮してpublicに移動しています。
「RAILS_ENV=production」は単純にproductionでデプロイしているから記述しています。

#まとめ
作ったCSSはひとまずassetsに入れておくとトラブルなく済みます。
クラス名が被ることも考慮してCSSを作成しましょう。