cynfo3000 28ebb5378d docs: FRONTEND.md vollständig (Nginx, Node, config.js, deploy) + config.js aus Repo entfernt

2026-03-06 09:30:33 +01:00

6.6 KiB

Raw Blame History

Frontend — Installation, Build & Deploy

React + Vite + TailwindCSS Web-Frontend, deployed als statische Dateien über Nginx.

Eckdaten


Tech	React 18, Vite, TailwindCSS, Recharts, Zustand, lucide-react
Theme	Dark mit Orange-Akzent, komplett deutsch
Auth	JWT Login (8h Token)
Standard-Login	`admin` / `Start!123` (beim ersten Backend-Start angelegt)
Frontend-Server	separater LXC / Debian-Server mit Nginx
Backend-Verbindung	direkter HTTPS-API-Call zu `https://BACKEND_IP:8443`

1. Voraussetzungen (Build-System)

Build läuft auf dem Mac / Entwicklungsrechner, nicht auf dem Frontend-Server.

# Node.js 20+ installieren (macOS mit Homebrew)
brew install node

# Abhängigkeiten installieren (einmalig nach Clone)
cd frontend
npm install

2. Backend-URL konfigurieren

VOR dem Build muss frontend/src/config.js angelegt werden. Die Datei ist in .gitignore und wird nicht eingecheckt (enthält echte IP + API-Key).

cp frontend/src/config.example.js frontend/src/config.js

Dann config.js anpassen:

// frontend/src/config.js
export const BACKEND_HOST = '192.168.85.13'        // IP des Backend-Servers
export const BACKEND_URL = `https://${BACKEND_HOST}:8443`
export const API_KEY = 'DEIN_API_KEY'              // aus backend/config.yaml → api_keys[0]

Für die lokale Entwicklung (npm run dev) muss zusätzlich vite.config.js angepasst werden:

// vite.config.js → server.proxy
proxy: {
  '/api': {
    target: 'https://192.168.85.13:8443',  // Backend-IP eintragen
    changeOrigin: true,
    secure: false,
  }
}

3. Build

cd frontend
npm run build

Erzeugt frontend/dist/ mit:

index.html
assets/index-[hash].js (~330 KB)
assets/index-[hash].css (~32 KB)
vite.svg

4. Nginx auf dem Frontend-Server installieren

# Debian 12/13
apt update
apt install -y nginx

systemctl enable nginx
systemctl start nginx

5. Nginx konfigurieren (Single-Page Application)

React Router benötigt ein Nginx-Config das alle Routen auf index.html umleitet:

# Bestehende Default-Config ersetzen
cat > /etc/nginx/sites-available/rmm-frontend << 'EOF'
server {
    listen 80;
    server_name _;

    root /var/www/html;
    index index.html;

    # React SPA — alle Routen auf index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Statische Assets mit Cache
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Kein Zugriff auf versteckte Dateien
    location ~ /\. {
        deny all;
    }
}
EOF

ln -sf /etc/nginx/sites-available/rmm-frontend /etc/nginx/sites-enabled/rmm-frontend
rm -f /etc/nginx/sites-enabled/default

nginx -t && systemctl reload nginx

6. Deploy

Manuell

cd frontend
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'

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.

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:

# 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

URL:       http://FRONTEND_SERVER_IP
Benutzer:  admin
Passwort:  Start!123

Passwort sofort ändern unter Einstellungen → Benutzer.

8. Lokale Entwicklung

cd 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).

Seiten

Seite	Route	Beschreibung
Login	`/login`	JWT Login
Dashboard	`/`	Status-Kacheln, Agent-Liste, AgentPanel per Klick
Firewalls	`/agents`	Suchbare Tabelle, AgentPanel mit Tabs, Hinzufügen/Löschen
Tunnel	`/tunnels`	Globale Tunnel-Übersicht über alle Firewalls
Firmware	`/firmware`	Multi-Plattform Upload, Agent-Update-Trigger
Kunden	`/customers`	CRUD Kundenverwaltung
Einstellungen	`/settings`	Benutzerverwaltung, Passwörter ändern

AgentPanel Tabs

Tab	Inhalt
Übersicht	Hardware, OS, Uptime, CPU/RAM, Lizenz (Business Edition)
Interfaces	Netzwerk-Interfaces mit IP, MAC, Status, RX/TX
Dienste	Laufende Services mit Status-Badge
Tunnel	Quick-Buttons (WebGUI, SSH, Custom), aktive Tunnel
VPN	WireGuard-Instanzen mit Transfer-Statistiken
WireGuard	Peer-Management (CRUD), Client-Config mit Copy-Button
Routen	Routing-Tabelle
DHCP	Aktive Leases mit Suche (IP, MAC, Hostname)
Zertifikate	Karten-Layout mit Ablaufdatum und Fortschrittsbalken
Backups	Config-Backup erstellen, Liste, Download als XML
Agent	Version, Agent-ID, Update-Button, Remote-Befehle

Dateistruktur

frontend/
├── src/
│   ├── config.js              # NICHT im Git — vor Build anlegen (s.o.)
│   ├── config.example.js      # Vorlage mit Platzhaltern
│   ├── App.jsx                # Router + ProtectedRoute
│   ├── main.jsx               # Entry Point
│   ├── index.css              # TailwindCSS + Custom Styles
│   ├── api/client.js          # API Client (alle Endpoints)
│   ├── stores/auth.js         # Zustand Auth Store (JWT Token)
│   ├── layouts/AppLayout.jsx  # Sidebar Navigation + Outlet
│   ├── components/
│   │   ├── AgentPanel.jsx     # Side Panel mit 11 Tabs
│   │   └── StatusBadge.jsx    # Online/Offline/Stale Badge
│   └── pages/
│       ├── Dashboard.jsx      # Status-Kacheln + Agent-Liste
│       ├── Agents.jsx         # Firewall-Tabelle + Pre-Registration
│       ├── Tunnels.jsx        # Globale Tunnel-Übersicht
│       ├── Firmware.jsx       # Multi-Plattform Firmware + Updates
│       ├── Customers.jsx      # Kunden CRUD
│       ├── SettingsPage.jsx   # User-Management + Passwort
│       └── Login.jsx          # JWT Login
├── vite.config.js             # Vite Config (Proxy für Dev-Server)
└── package.json

6.6 KiB Raw Blame History