[RUBY] Die auf EC2 bereitgestellte CSS in Rails-App von React.js kann nicht geladen werden

Dieser Beitrag

Ich werde es hier als mein Memorandum belassen.

Ich habe React.js für den vorderen Teil der mit Rails erstellten App übernommen und dort das CSS geladen. CSS wurde in der lokalen Umgebung geladen, wird jedoch bei der Bereitstellung mit EC2 nicht geladen. Ich werde beschreiben, wie man eine solche Situation löst.

Verzeichnisaufbau

Direkt unter dem App-Verzeichnis

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

Javascript-Verzeichnis

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

Ich erstelle React und das Ziel-CSS in Paketen des Javascript-Verzeichnisses. Schreiben Sie in diesem Zustand Folgendes in die angegebene Ansichtsdatei.

index.html.erb

<%=javascript_pack_tag 'index'%>

Jetzt werden sowohl React als auch CSS in die lokale Umgebung geladen. CSS wird jedoch nicht in den mit EC2 bereitgestellten Zielbrowser geladen und befindet sich in einer schlimmen Situation ...

Ursache

Dies wurde durch das Erstellen von CSS im Verzeichnis javascript / packs verursacht. Verwenden Sie beim Lesen von CSS mit EC2 das öffentliche Verzeichnis.

"In Rails wird CSS in das Assets-Verzeichnis geschrieben und gelesen? Wie macht man das Lesen von CSS öffentlich?"

Ich denke, es gibt einige Leute, die das denken. Führen Sie nach dem Einstellen auf EC2 Folgendes aus. Diesmal ist es ein Memorandum, daher werde ich die Details weglassen.

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

"Rails-Assets: Vorkompilieren" Dieser Befehl komprimiert das Assets-Verzeichnis und verschiebt es in die Öffentlichkeit. "RAILS_ENV = Produktion" wird beschrieben, weil es einfach von der Produktion bereitgestellt wird.

Zusammenfassung

Wenn Sie das von Ihnen erstellte CSS vorerst in Assets einfügen, werden Sie keine Probleme haben. Lassen Sie uns CSS erstellen, wobei wir berücksichtigen, dass der Klassenname abgedeckt wird.