christian/rmm2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
rmm2/docs/FRONTEND.md

8.4 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 (Frontend-Server: Debian/Ubuntu)

Build und Serving laufen auf demselben Linux-Server.

# Node.js 20+ über NodeSource-Repository installieren
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
apt install -y nodejs

# 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

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 = '<BACKEND-IP>'        // IP des Backend-Servers (für direkte Links, z.B. Tunnel-Ports)
export const BACKEND_URL = `https://${BACKEND_HOST}:8443`
export const API_KEY = 'DEIN_API_KEY'              // aus backend/config.yaml → api_keys[0]

Hinweis: API-Calls laufen im Produktivbetrieb über den Nginx-Proxy (/api/ → Backend). BACKEND_HOST wird nur noch für direkte Links verwendet (z.B. WebGUI-Tunnel-Ports). BACKEND_URL wird im Dev-Server-Modus (Vite) für direkte API-Calls verwendet.

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://<BACKEND-IP>:8443',  // Backend-IP anpassen
    changeOrigin: true,
    secure: false,
    ws: true,  // WebSocket-Proxy aktivieren (Web Terminal, Agent-WS)
  }
}

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

React Router benötigt ein Nginx-Config das alle Routen auf index.html umleitet. Zusätzlich proxyt Nginx alle /api/-Requests zum Backend — das löst zwei Probleme:

  • CORS entfällt komplett (gleicher Origin)
  • WebSocket-Verbindungen (Web Terminal, Agent-WS) funktionieren ohne Browser-Zertifikatswarning

Wichtig: proxy_ssl_verify off ist nötig da das Backend ein selbstsigniertes Zertifikat verwendet. Wichtig: proxy_read_timeout 86400 ist nötig für lang laufende WebSocket-Verbindungen (Terminal, Tunnel).

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

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

    # API Reverse-Proxy zum Backend (REST + WebSocket)
    location /api/ {
        client_max_body_size 50m;

        proxy_pass https://<BACKEND-IP>:8443;
        proxy_ssl_verify off;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # WebSocket-Support (Web Terminal, Agent-WS, Tunnel)
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 86400;
    }

    # 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

Backend-IP anpassen: <BACKEND-IP>:8443 durch die tatsächliche Backend-Adresse ersetzen.

6. Deploy (auf dem Frontend-Server selbst)

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

# In Nginx-Webroot kopieren
cp -r dist/* /var/www/html/

# Nginx neu laden
nginx -s reload

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.

Als Einzeiler (nach Änderungen am Code)

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"

7. Erster Login

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

Passwort sofort ändern unter Einstellungen → Benutzer.

8. Lokale Entwicklung (optional)

cd /opt/rmm/frontend
npm run dev

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:

// vite.config.js
proxy: {
  '/api': {
    target: 'https://<BACKEND-IP>:8443',  // Backend-IP anpassen
    changeOrigin: true,
    secure: false,
    ws: true,  // WebSocket-Proxy (Web Terminal, Agent-WS)
  }
}

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