docs: FRONTEND.md auf Linux korrigiert (NodeSource statt Homebrew, Build direkt auf Server)

This commit is contained in:
cynfo3000 2026-03-06 09:36:26 +01:00
parent 28ebb5378d
commit a163037ee8

View File

@ -15,16 +15,24 @@ React + Vite + TailwindCSS Web-Frontend, deployed als statische Dateien über Ng
--- ---
## 1. Voraussetzungen (Build-System) ## 1. Voraussetzungen (Frontend-Server: Debian/Ubuntu)
Build läuft auf dem Mac / Entwicklungsrechner, **nicht** auf dem Frontend-Server. Build und Serving laufen auf demselben Linux-Server.
```bash ```bash
# Node.js 20+ installieren (macOS mit Homebrew) # Node.js 20+ über NodeSource-Repository installieren
brew install node curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
apt install -y nodejs
# Abhängigkeiten installieren (einmalig nach Clone) # Version prüfen
cd frontend node -v # → v20.x.x
npm -v # → 10.x.x
# Repo klonen
git clone https://git.cynfo.net/christian/rmm2.git /opt/rmm
cd /opt/rmm/frontend
# Abhängigkeiten installieren (einmalig)
npm install npm install
``` ```
@ -131,34 +139,34 @@ nginx -t && systemctl reload nginx
--- ---
## 6. Deploy ## 6. Deploy (auf dem Frontend-Server selbst)
### Manuell
```bash ```bash
cd frontend cd /opt/rmm/frontend
# Alten Build löschen (Pflicht — Vite nutzt Hash-basierte Dateinamen)
rm -rf dist/ /var/www/html/assets/*
# Build erstellen
npm run build npm run build
ssh root@FRONTEND_SERVER 'rm -rf /var/www/html/assets/*' # Alte Hashes löschen!
scp -r dist/* root@FRONTEND_SERVER:/var/www/html/ # In Nginx-Webroot kopieren
ssh root@FRONTEND_SERVER 'nginx -s reload' cp -r dist/* /var/www/html/
# Nginx neu laden
nginx -s reload
``` ```
**Wichtig:** `assets/*` MUSS vor dem Deploy gelöscht werden — Vite generiert Hash-basierte **Wichtig:** `assets/*` MUSS vor jedem Deploy gelöscht werden — Vite generiert Hash-basierte
Dateinamen (`index-Dv2B5kJs.js`). Alte Dateien bleiben sonst auf dem Server und Dateinamen (`index-Dv2B5kJs.js`). Alte Dateien bleiben sonst liegen und der Browser
der Browser-Cache liefert 404-Fehler. bekommt beim nächsten Laden 404-Fehler.
### Mit deploy-script (empfohlen) ### Als Einzeiler (nach Änderungen am Code)
Das Skript `deploy-frontend.sh` im Root-Verzeichnis erledigt Build + Deploy + Nginx-Reload
in einem Schritt. Server-IP und Webroot am Anfang des Skripts anpassen:
```bash ```bash
# deploy-frontend.sh — Variablen anpassen: cd /opt/rmm && git pull && cd frontend && npm install && \
REMOTE="root@192.168.85.20" # IP des Frontend-Servers rm -rf dist/ /var/www/html/assets/* && npm run build && \
WEB_ROOT="/var/www/html" cp -r dist/* /var/www/html/ && nginx -s reload && echo "Deploy fertig"
# Dann ausführen:
./deploy-frontend.sh
``` ```
--- ---
@ -175,15 +183,25 @@ Passwort sofort ändern unter **Einstellungen → Benutzer**.
--- ---
## 8. Lokale Entwicklung ## 8. Lokale Entwicklung (optional)
```bash ```bash
cd frontend cd /opt/rmm/frontend
npm run dev npm run dev
``` ```
Startet Vite Dev-Server auf `http://localhost:5173` mit Hot-Reload. Startet Vite Dev-Server auf `http://FRONTEND_IP:5173` mit Hot-Reload.
API-Calls werden per Proxy an das Backend weitergeleitet (→ `vite.config.js` anpassen). API-Calls werden per Proxy an das Backend weitergeleitet — `vite.config.js` anpassen:
```js
proxy: {
'/api': {
target: 'https://192.168.85.13:8443', // Backend-IP
changeOrigin: true,
secure: false,
}
}
```
--- ---