298 lines
8.4 KiB
Markdown
298 lines
8.4 KiB
Markdown
# 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.
|
|
|
|
```bash
|
|
# 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).
|
|
|
|
```bash
|
|
cp frontend/src/config.example.js frontend/src/config.js
|
|
```
|
|
|
|
Dann `config.js` anpassen:
|
|
|
|
```js
|
|
// 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:
|
|
|
|
```js
|
|
// 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
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
# 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).
|
|
|
|
```bash
|
|
# 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)
|
|
|
|
```bash
|
|
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)
|
|
|
|
```bash
|
|
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)
|
|
|
|
```bash
|
|
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:
|
|
|
|
```js
|
|
// 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
|
|
```
|