[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.

Recommended Posts

Le CSS React.js dans l'application Rails déployée sur EC2 ne peut pas être chargé
Le serveur Rails ne peut pas être démarré dans Cloud9
Lancez EC2 Rails
Déployer RAILS sur EC2
Appliquer le CSS à une vue spécifique dans Ruby on Rails
[rails] Problèmes qui ne peuvent pas être enregistrés / connectés avec l'appareil
[Ruby On Rails] Mesures d'urgence lorsque redirect_to action :: show ne peut pas être (ne peut pas être utilisé) dans l'action de création et de destruction
Créer une nouvelle application avec Rails
Ruby on Rails compatible japonais-anglais i18n
Lancer des rails sur EC2 (déploiement manuel)
[Rails 6] MySQL 2 ne peut pas regrouper l'installation
Impossible d'installer Java sur Ubuntu 13.04
Utilisez l'application Web Timecop in Rails pour déplacer le temps dans le navigateur
Cloud IDE: Heroku n'a pas pu être installé dans le didacticiel Ruby on Rails
[Rails] Comment appliquer le CSS utilisé dans l'application principale avec Administrer