diff --git a/docs/FRONTEND.md b/docs/FRONTEND.md index 8ee0877..0cebb24 100644 --- a/docs/FRONTEND.md +++ b/docs/FRONTEND.md @@ -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 -# Node.js 20+ installieren (macOS mit Homebrew) -brew install node +# Node.js 20+ über NodeSource-Repository installieren +curl -fsSL https://deb.nodesource.com/setup_20.x | bash - +apt install -y nodejs -# Abhängigkeiten installieren (einmalig nach Clone) -cd frontend +# Version prüfen +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 ``` @@ -131,34 +139,34 @@ nginx -t && systemctl reload nginx --- -## 6. Deploy - -### Manuell +## 6. Deploy (auf dem Frontend-Server selbst) ```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 -ssh root@FRONTEND_SERVER 'rm -rf /var/www/html/assets/*' # Alte Hashes löschen! -scp -r dist/* root@FRONTEND_SERVER:/var/www/html/ -ssh root@FRONTEND_SERVER 'nginx -s reload' + +# In Nginx-Webroot kopieren +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 -Dateinamen (`index-Dv2B5kJs.js`). Alte Dateien bleiben sonst auf dem Server und -der Browser-Cache liefert 404-Fehler. +**Wichtig:** `assets/*` MUSS vor jedem Deploy gelöscht werden — Vite generiert Hash-basierte +Dateinamen (`index-Dv2B5kJs.js`). Alte Dateien bleiben sonst liegen und der Browser +bekommt beim nächsten Laden 404-Fehler. -### Mit deploy-script (empfohlen) - -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: +### Als Einzeiler (nach Änderungen am Code) ```bash -# deploy-frontend.sh — Variablen anpassen: -REMOTE="root@192.168.85.20" # IP des Frontend-Servers -WEB_ROOT="/var/www/html" - -# Dann ausführen: -./deploy-frontend.sh +cd /opt/rmm && git pull && cd frontend && npm install && \ +rm -rf dist/ /var/www/html/assets/* && npm run build && \ +cp -r dist/* /var/www/html/ && nginx -s reload && echo "Deploy fertig" ``` --- @@ -175,15 +183,25 @@ Passwort sofort ändern unter **Einstellungen → Benutzer**. --- -## 8. Lokale Entwicklung +## 8. Lokale Entwicklung (optional) ```bash -cd frontend +cd /opt/rmm/frontend npm run dev ``` -Startet Vite Dev-Server auf `http://localhost:5173` mit Hot-Reload. -API-Calls werden per Proxy an das Backend weitergeleitet (→ `vite.config.js` anpassen). +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: + +```js +proxy: { + '/api': { + target: 'https://192.168.85.13:8443', // Backend-IP + changeOrigin: true, + secure: false, + } +} +``` ---