[RUBY] React.js CSS in Rails app deployed on EC2 cannot be loaded

This article

I will leave it here as my memorandum.

I adopted React.js for the front part of the application created with Rails and loaded the CSS there. CSS was loaded in the local environment, but it is not loaded when deployed on EC2. I will describe how to solve such a situation.

Directory structure

Directly under the app directory

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

javascript directory

.
├── 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

I'm creating React and the target CSS in packs in the javascript directory. In this state, write the following in the specified view file.

index.html.erb

<%=javascript_pack_tag 'index'%>

This will load both React and CSS in your local environment. However, CSS is not loaded in the browser deployed with EC2, and it is in a dire situation ...

Cause

It was caused by creating CSS in the javascript / packs directory. When reading CSS on EC2, use the public directory.

"In rails, CSS is written in the assets directory and read? How do you make public read CSS ??"

I think there are some people who think that. After setting on EC2, execute the following. This time it is a memorandum, so I will omit the details.

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

"Rails assets: precompile" This command compresses the assets directory and moves it to public. "RAILS_ENV = production" is described because it is simply deployed by production.

Summary

If you put the created CSS in assets for the time being, you will not have any trouble. Let's create CSS considering that the class name will be covered.