この記事いついて
私の備忘録としてここに残します。
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を作成しましょう。