[RUBY] Le CSS React.js dans l'application Rails déployée sur EC2 ne peut pas être chargé

Cet article

Je vais le laisser ici comme mon mémorandum.

J'ai adopté React.js pour la partie avant de l'application créée avec Rails et y ai chargé le CSS. CSS a été chargé dans l'environnement local, mais il n'est pas chargé lors du déploiement avec EC2. Je décrirai comment résoudre une telle situation.

Structure du répertoire

Directement sous le répertoire de l'application

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

répertoire 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

Je crée React et le CSS cible dans des packs du répertoire javascript. Dans cet état, écrivez ce qui suit dans le fichier de vue spécifié.

index.html.erb

<%=javascript_pack_tag 'index'%>

Désormais, React et CSS seront chargés dans l'environnement local. Cependant, CSS n'est pas chargé dans le navigateur de destination déployé avec EC2, et il est dans une situation désastreuse ...

Cause

Cela a été causé par la création de CSS dans le répertoire javascript / packs. Lors de la lecture de CSS avec EC2, utilisez le répertoire public.

"Dans les rails, le CSS est écrit dans le répertoire des ressources et lu? Comment rendre public le CSS?"

Je pense que certaines personnes pensent cela. Après avoir réglé sur EC2, exécutez ce qui suit. Cette fois, il s'agit d'un mémorandum, je vais donc omettre les détails.

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

"Rails assets: precompile" Cette commande compresse le répertoire assets et le déplace vers public. "RAILS_ENV = production" est décrit car il est simplement déployé par production.

Sommaire

Si vous mettez le CSS que vous avez créé pour le moment, vous n'aurez aucun problème. Créons CSS en considérant que le nom de la classe sera couvert.