🔧 Aktualisierung der README.md zur Verbesserung der Backend- und Frontend-Installationsanweisungen. Einführung eines konsolidierten Setup-Skripts für die automatische Installation und Optimierung der Kiosk-Modus-Anweisungen. Hinzufügen eines neuen Dokuments für Verbindungstests zwischen Frontend und Backend. Verbesserte Farbpalette und CSS-Styles für Kiosk-Modus in tailwind.config.js und input.css. 📈
This commit is contained in:
382
docs/FRONTEND_INSTALLATION.md
Normal file
382
docs/FRONTEND_INSTALLATION.md
Normal file
@@ -0,0 +1,382 @@
|
||||
# MYP Frontend - Installationsanleitung
|
||||
|
||||
## Übersicht
|
||||
|
||||
Das MYP Frontend ist eine Next.js-Anwendung, die mit Docker und Caddy als Reverse Proxy betrieben wird. Das konsolidierte Setup-Skript automatisiert die komplette Installation und Konfiguration.
|
||||
|
||||
## Systemanforderungen
|
||||
|
||||
- **Betriebssystem**: Debian/Raspbian (Raspberry Pi OS)
|
||||
- **Hardware**: Raspberry Pi 4 oder höher (empfohlen)
|
||||
- **RAM**: Mindestens 2GB
|
||||
- **Speicher**: Mindestens 8GB freier Speicherplatz
|
||||
- **Netzwerk**: Internetverbindung für Installation
|
||||
|
||||
## Schnellstart
|
||||
|
||||
### Automatische Installation
|
||||
|
||||
```bash
|
||||
# Als Root ausführen
|
||||
sudo bash frontend/setup.sh
|
||||
```
|
||||
|
||||
Das Skript bietet ein interaktives Menü mit folgenden Optionen:
|
||||
|
||||
1. **Vollständige Frontend-Installation** - Komplette Neuinstallation
|
||||
2. **SSL-Zertifikate neu generieren** - Erneuert nur die Zertifikate
|
||||
3. **Service-Status prüfen** - Diagnose und Monitoring
|
||||
4. **Beenden** - Script verlassen
|
||||
|
||||
## Detaillierte Installationsschritte
|
||||
|
||||
### 1. System-Vorbereitung
|
||||
|
||||
Das Skript führt automatisch folgende Schritte durch:
|
||||
|
||||
- **System-Update**: Paketlisten aktualisieren
|
||||
- **Grundtools installieren**: curl, wget, git, openssl, etc.
|
||||
- **Internetverbindung prüfen**: Verfügbarkeit der benötigten Ressourcen
|
||||
|
||||
### 2. Docker-Installation
|
||||
|
||||
- **Docker CE**: Container-Runtime
|
||||
- **Docker Compose**: Multi-Container-Orchestrierung
|
||||
- **Service-Aktivierung**: Automatischer Start beim Boot
|
||||
|
||||
### 3. SSL-Zertifikate (Mercedes)
|
||||
|
||||
Das Skript erstellt selbstsignierte SSL-Zertifikate mit folgenden Eigenschaften:
|
||||
|
||||
**Zertifikat-Details:**
|
||||
|
||||
- **Organisation**: Mercedes-Benz AG
|
||||
- **Abteilung**: IT-Abteilung
|
||||
- **Standort**: Stuttgart, Baden-Württemberg, Deutschland
|
||||
- **Primäre Domain**: `m040tbaraspi001.de040.corpintra.net`
|
||||
|
||||
**Subject Alternative Names (SAN):**
|
||||
|
||||
- `m040tbaraspi001.de040.corpintra.net`
|
||||
- `m040tbaraspi001`
|
||||
- `localhost`
|
||||
- `raspberrypi`
|
||||
- `127.0.0.1`
|
||||
- `192.168.0.109`
|
||||
|
||||
**Speicherorte:**
|
||||
|
||||
- Zertifikat: `/etc/ssl/certs/myp/frontend.crt`
|
||||
- Privater Schlüssel: `/etc/ssl/certs/myp/frontend.key`
|
||||
- System-CA-Store: `/usr/local/share/ca-certificates/`
|
||||
|
||||
### 4. Frontend-Deployment
|
||||
|
||||
- **Zielverzeichnis**: `/opt/myp-frontend`
|
||||
- **Dateisynchronisation**: Exclude node_modules, .git, ssl
|
||||
- **Berechtigungen**: Root-Ownership mit korrekten Permissions
|
||||
|
||||
### 5. Docker Compose Konfiguration
|
||||
|
||||
**Services:**
|
||||
|
||||
1. **frontend-app**
|
||||
|
||||
- Build: Next.js Application
|
||||
- Port: 3000 (intern)
|
||||
- Environment: Production
|
||||
- Health Check: `/health` Endpoint
|
||||
2. **caddy**
|
||||
|
||||
- Image: caddy:latest
|
||||
- Ports: 80 (HTTP), 443 (HTTPS)
|
||||
- SSL-Termination und Reverse Proxy
|
||||
- Security Headers und Compression
|
||||
3. **db**
|
||||
|
||||
- SQLite-Container mit persistenten Volumes
|
||||
- Datenverzeichnis: `/data`
|
||||
|
||||
**Volumes:**
|
||||
|
||||
- `caddy_data`: Caddy-Daten persistent
|
||||
- `caddy_config`: Caddy-Konfiguration
|
||||
- `db_data`: Datenbank-Dateien
|
||||
|
||||
### 6. Systemd-Service
|
||||
|
||||
**Service-Name**: `myp-frontend.service`
|
||||
|
||||
**Eigenschaften:**
|
||||
|
||||
- **Auto-Start**: Beim Boot aktiviert
|
||||
- **Dependencies**: Startet nach Docker
|
||||
- **Management**: Standard systemctl-Befehle
|
||||
- **Logging**: Journald-Integration
|
||||
- **Sicherheit**: Sandboxed mit eingeschränkten Berechtigungen
|
||||
|
||||
### 7. Firewall-Konfiguration
|
||||
|
||||
**UFW-Regeln:**
|
||||
|
||||
- **SSH**: Port 22 (Remote-Zugang)
|
||||
- **HTTP**: Port 80 (Redirect zu HTTPS)
|
||||
- **HTTPS**: Port 443 (Hauptzugang)
|
||||
- **Lokale Verbindungen**: 127.0.0.1, ::1
|
||||
- **Mercedes-Netzwerke**: 192.168.0.0/16, 10.0.0.0/8, 172.16.0.0/12
|
||||
|
||||
## Zugang zur Anwendung
|
||||
|
||||
Nach erfolgreicher Installation ist das Frontend verfügbar unter:
|
||||
|
||||
- **Primär**: https://m040tbaraspi001.de040.corpintra.net
|
||||
- **Lokal**: https://localhost
|
||||
- **IP-Direkt**: https://192.168.0.109
|
||||
|
||||
## Service-Management
|
||||
|
||||
### Status prüfen
|
||||
|
||||
```bash
|
||||
# Systemd Service Status
|
||||
sudo systemctl status myp-frontend
|
||||
|
||||
# Docker Container Status
|
||||
cd /opt/myp-frontend
|
||||
sudo docker compose ps
|
||||
|
||||
# Live-Logs anzeigen
|
||||
sudo docker compose logs -f
|
||||
```
|
||||
|
||||
### Service-Kontrolle
|
||||
|
||||
```bash
|
||||
# Service starten
|
||||
sudo systemctl start myp-frontend
|
||||
|
||||
# Service stoppen
|
||||
sudo systemctl stop myp-frontend
|
||||
|
||||
# Service neustarten
|
||||
sudo systemctl restart myp-frontend
|
||||
|
||||
# Service deaktivieren
|
||||
sudo systemctl disable myp-frontend
|
||||
```
|
||||
|
||||
### Container-Management
|
||||
|
||||
```bash
|
||||
# Alle Container neustarten
|
||||
cd /opt/myp-frontend
|
||||
sudo docker compose restart
|
||||
|
||||
# Einzelnen Container neustarten
|
||||
sudo docker compose restart caddy
|
||||
sudo docker compose restart frontend-app
|
||||
|
||||
# Container-Logs einzeln
|
||||
sudo docker compose logs caddy
|
||||
sudo docker compose logs frontend-app
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Häufige Probleme
|
||||
|
||||
#### 1. Frontend nicht erreichbar
|
||||
|
||||
**Diagnose:**
|
||||
|
||||
```bash
|
||||
# Service-Status prüfen
|
||||
sudo systemctl status myp-frontend
|
||||
|
||||
# Container-Status prüfen
|
||||
cd /opt/myp-frontend
|
||||
sudo docker compose ps
|
||||
|
||||
# Netzwerk-Test
|
||||
curl -k -I https://localhost/health
|
||||
```
|
||||
|
||||
**Lösungsansätze:**
|
||||
|
||||
- Container neu starten: `sudo docker compose restart`
|
||||
- Service neu starten: `sudo systemctl restart myp-frontend`
|
||||
- Logs prüfen: `sudo docker compose logs`
|
||||
|
||||
#### 2. SSL-Zertifikat-Probleme
|
||||
|
||||
**Diagnose:**
|
||||
|
||||
```bash
|
||||
# Zertifikat-Gültigkeit prüfen
|
||||
openssl x509 -in /etc/ssl/certs/myp/frontend.crt -noout -dates
|
||||
|
||||
# SSL-Verbindung testen
|
||||
openssl s_client -connect localhost:443 -servername m040tbaraspi001.de040.corpintra.net
|
||||
```
|
||||
|
||||
**Lösung:**
|
||||
|
||||
```bash
|
||||
# Zertifikate neu generieren
|
||||
sudo bash frontend/setup.sh
|
||||
# Dann Option 2 wählen (SSL-Zertifikate neu generieren)
|
||||
```
|
||||
|
||||
#### 3. Docker-Build Fehler
|
||||
|
||||
**Diagnose:**
|
||||
|
||||
```bash
|
||||
# Build-Logs prüfen
|
||||
cd /opt/myp-frontend
|
||||
sudo docker compose build --no-cache
|
||||
|
||||
# Speicherplatz prüfen
|
||||
df -h
|
||||
```
|
||||
|
||||
**Lösungsansätze:**
|
||||
|
||||
- Docker aufräumen: `sudo docker system prune -a`
|
||||
- Neuinstallation: Frontend-Verzeichnis löschen und setup.sh erneut ausführen
|
||||
|
||||
#### 4. Port-Konflikte
|
||||
|
||||
**Diagnose:**
|
||||
|
||||
```bash
|
||||
# Port-Belegung prüfen
|
||||
sudo netstat -tlnp | grep -E ':(80|443)'
|
||||
sudo ss -tlnp | grep -E ':(80|443)'
|
||||
```
|
||||
|
||||
**Lösung:**
|
||||
|
||||
- Konflikt-Services stoppen
|
||||
- UFW-Regeln prüfen: `sudo ufw status`
|
||||
|
||||
### Log-Dateien
|
||||
|
||||
**Installation:**
|
||||
|
||||
- `/var/log/myp-frontend-install.log`
|
||||
|
||||
**Caddy:**
|
||||
|
||||
- `/var/log/caddy/access.log`
|
||||
- `/var/log/caddy/error.log`
|
||||
|
||||
**Docker:**
|
||||
|
||||
```bash
|
||||
# Container-Logs
|
||||
sudo docker compose logs frontend-app
|
||||
sudo docker compose logs caddy
|
||||
|
||||
# Systemd-Journal
|
||||
sudo journalctl -u myp-frontend -f
|
||||
```
|
||||
|
||||
## Sicherheitshinweise
|
||||
|
||||
### SSL/TLS
|
||||
|
||||
- Selbstsignierte Zertifikate erfordern Ausnahmen im Browser
|
||||
- Für Produktion sollten CA-signierte Zertifikate verwendet werden
|
||||
- Automatische HTTP-zu-HTTPS-Weiterleitung ist aktiviert
|
||||
|
||||
### Firewall
|
||||
|
||||
- Restriktive Einstellungen - nur notwendige Ports geöffnet
|
||||
- Mercedes-interne Netzwerke sind zugelassen
|
||||
- Externe Zugriffe werden standardmäßig blockiert
|
||||
|
||||
### Container-Sicherheit
|
||||
|
||||
- Container laufen mit minimalen Berechtigungen
|
||||
- Sensitive Dateien sind read-only gemountet
|
||||
- Netzwerk-Isolation zwischen Containern
|
||||
|
||||
## Backup und Wartung
|
||||
|
||||
### Backup wichtiger Dateien
|
||||
|
||||
```bash
|
||||
# SSL-Zertifikate
|
||||
sudo cp -r /etc/ssl/certs/myp /backup/ssl-certificates-$(date +%Y%m%d)
|
||||
|
||||
# Anwendungsdaten
|
||||
sudo cp -r /opt/myp-frontend /backup/frontend-$(date +%Y%m%d)
|
||||
|
||||
# Docker Volumes
|
||||
sudo docker run --rm -v myp-frontend_db_data:/data -v /backup:/backup alpine \
|
||||
tar czf /backup/db-data-$(date +%Y%m%d).tar.gz -C /data .
|
||||
```
|
||||
|
||||
### Regelmäßige Wartung
|
||||
|
||||
```bash
|
||||
# Docker-System aufräumen (monatlich)
|
||||
sudo docker system prune -f
|
||||
|
||||
# Log-Dateien rotieren (wöchentlich)
|
||||
sudo logrotate -f /etc/logrotate.conf
|
||||
|
||||
# SSL-Zertifikat-Ablauf prüfen (monatlich)
|
||||
openssl x509 -in /etc/ssl/certs/myp/frontend.crt -noout -dates
|
||||
```
|
||||
|
||||
## Performance-Optimierung
|
||||
|
||||
### Raspberry Pi spezifisch
|
||||
|
||||
- **Memory Swappiness**: Reduziert auf 10
|
||||
- **I/O Scheduler**: Optimiert für SD-Karten
|
||||
- **CPU Scheduling**: Verbesserte Interaktivität
|
||||
- **Caching**: Effiziente Nutzung des verfügbaren RAMs
|
||||
|
||||
### Container-Optimierung
|
||||
|
||||
- **Multi-Stage Builds**: Reduzierte Image-Größen
|
||||
- **Health Checks**: Automatische Fehlerbehandlung
|
||||
- **Resource Limits**: Verhindert Memory-Leaks
|
||||
- **Restart Policies**: Automatische Wiederherstellung
|
||||
|
||||
## Support und Weiterentwicklung
|
||||
|
||||
### Konfiguration anpassen
|
||||
|
||||
- **Caddy**: `frontend/docker/caddy/Caddyfile` bearbeiten
|
||||
- **Docker Compose**: `docker-compose.yml` in `/opt/myp-frontend`
|
||||
- **SSL**: Setup-Skript mit Option 2 für neue Zertifikate
|
||||
|
||||
### Monitoring
|
||||
|
||||
- **Health Endpoints**: `/health` für Verfügbarkeitsprüfung
|
||||
- **Logs**: Strukturierte JSON-Logs von Caddy
|
||||
- **Metrics**: Docker-Container-Statistiken
|
||||
|
||||
### Updates
|
||||
|
||||
```bash
|
||||
# Frontend-Code aktualisieren
|
||||
cd /opt/myp-frontend
|
||||
sudo git pull origin main
|
||||
sudo docker compose build --no-cache
|
||||
sudo docker compose up -d
|
||||
|
||||
# System-Updates
|
||||
sudo apt update && sudo apt upgrade -y
|
||||
sudo reboot
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Version**: 1.0.0
|
||||
**Letzte Aktualisierung**: $(date '+%Y-%m-%d')
|
||||
**Autor**: MYP Development Team
|
||||
296
docs/FRONTEND_SETUP_CHANGELOG.md
Normal file
296
docs/FRONTEND_SETUP_CHANGELOG.md
Normal file
@@ -0,0 +1,296 @@
|
||||
# Frontend Setup - Changelog und Verbesserungen
|
||||
|
||||
## Übersicht der Änderungen
|
||||
|
||||
**Datum**: 2025-01-06
|
||||
**Bearbeiter**: Claude AI Assistant
|
||||
**Auftrag**: Konsolidierung der Frontend-Installation mit Mercedes SSL-Zertifikaten
|
||||
|
||||
## ✅ Durchgeführte Änderungen
|
||||
|
||||
### 1. Bereinigung unnötiger Skripte
|
||||
|
||||
#### Gelöschte Dateien:
|
||||
|
||||
- `frontend/docker/legacy_deploy.sh` - Veraltetes Deployment-Skript
|
||||
|
||||
#### Begründung:
|
||||
|
||||
- Das legacy Skript war nicht mehr zeitgemäß
|
||||
- Funktionalität wird durch das neue konsolidierte Setup-Skript ersetzt
|
||||
- Reduziert Verwirrung und Wartungsaufwand
|
||||
|
||||
### 2. Neues konsolidiertes Setup-Skript
|
||||
|
||||
#### Erstellt: `frontend/setup.sh`
|
||||
|
||||
- **Größe**: ~700 Zeilen umfassendes Bash-Skript
|
||||
- **Struktur**: Nach Vorbild des Backend `setup.sh` erstellt
|
||||
- **Funktionalität**: Vollständige Frontend-Installation und -Konfiguration
|
||||
|
||||
#### Kernfunktionen:
|
||||
|
||||
1. **Systemvalidierung**
|
||||
|
||||
- Root-Berechtigung prüfen
|
||||
- Debian/Raspbian-System erkennen
|
||||
- Internetverbindung testen
|
||||
2. **Docker-Installation**
|
||||
|
||||
- Docker CE automatisch installieren
|
||||
- Docker Compose Plugin einrichten
|
||||
- Service-Aktivierung für Boot-Start
|
||||
3. **Mercedes SSL-Zertifikate**
|
||||
|
||||
- Selbstsignierte Zertifikate generieren
|
||||
- Subject Alternative Names (SAN) konfigurieren
|
||||
- System-CA-Store Integration
|
||||
4. **Frontend-Deployment**
|
||||
|
||||
- Anwendung nach `/opt/myp-frontend` kopieren
|
||||
- Docker Compose Konfiguration erstellen
|
||||
- Systemd Service einrichten
|
||||
5. **Systemintegration**
|
||||
|
||||
- UFW-Firewall konfigurieren
|
||||
- Automatischer Boot-Start
|
||||
- Umfassende Tests und Monitoring
|
||||
|
||||
### 3. Mercedes SSL-Zertifikat Konfiguration
|
||||
|
||||
#### Zertifikat-Details:
|
||||
|
||||
```
|
||||
Organisation: Mercedes-Benz AG
|
||||
Abteilung: IT-Abteilung
|
||||
Standort: Stuttgart, Baden-Württemberg, Deutschland
|
||||
Land: DE
|
||||
Primäre Domain: m040tbaraspi001.de040.corpintra.net
|
||||
```
|
||||
|
||||
#### Subject Alternative Names (SAN):
|
||||
|
||||
- `m040tbaraspi001.de040.corpintra.net`
|
||||
- `m040tbaraspi001`
|
||||
- `localhost`
|
||||
- `raspberrypi`
|
||||
- `127.0.0.1`
|
||||
- `192.168.0.109`
|
||||
|
||||
#### Speicherorte:
|
||||
|
||||
- Zertifikat: `/etc/ssl/certs/myp/frontend.crt`
|
||||
- Privater Schlüssel: `/etc/ssl/certs/myp/frontend.key`
|
||||
- OpenSSL Konfiguration: `/etc/ssl/certs/myp/openssl.conf`
|
||||
|
||||
### 4. Docker Compose Konfiguration
|
||||
|
||||
#### Erstellt automatisch: `docker-compose.yml`
|
||||
|
||||
```yaml
|
||||
services:
|
||||
frontend-app: # Next.js Application (Port 3000 intern)
|
||||
caddy: # Reverse Proxy (Port 80/443)
|
||||
db: # SQLite Container mit persistenten Volumes
|
||||
```
|
||||
|
||||
#### Volumes:
|
||||
|
||||
- `caddy_data`: Caddy-Daten persistent
|
||||
- `caddy_config`: Caddy-Konfiguration
|
||||
- `db_data`: Datenbank-Dateien
|
||||
|
||||
### 5. Systemd Service Integration
|
||||
|
||||
#### Service-Name: `myp-frontend.service`
|
||||
|
||||
- **Auto-Start**: Beim Boot aktiviert
|
||||
- **Dependencies**: Startet nach Docker-Service
|
||||
- **Working Directory**: `/opt/myp-frontend`
|
||||
- **Restart Policy**: Automatische Wiederherstellung bei Fehlern
|
||||
- **Sicherheit**: Sandboxed mit eingeschränkten Berechtigungen
|
||||
|
||||
### 6. Firewall-Konfiguration (UFW)
|
||||
|
||||
#### Erlaubte Verbindungen:
|
||||
|
||||
- **SSH**: Port 22 (Remote-Zugang)
|
||||
- **HTTP**: Port 80 (Redirect zu HTTPS)
|
||||
- **HTTPS**: Port 443 (Hauptzugang)
|
||||
- **Lokale Verbindungen**: 127.0.0.1, ::1
|
||||
- **Mercedes-Netzwerke**: 192.168.0.0/16, 10.0.0.0/8, 172.16.0.0/12
|
||||
|
||||
### 7. Interaktives Setup-Menü
|
||||
|
||||
#### Optionen:
|
||||
|
||||
1. **Vollständige Frontend-Installation**
|
||||
|
||||
- Docker, SSL-Zertifikate, Caddy, Services
|
||||
- Komplette Neuinstallation für Produktionsumgebung
|
||||
2. **SSL-Zertifikate neu generieren**
|
||||
|
||||
- Erneuert nur die Zertifikate
|
||||
- Services-Neustart inklusive
|
||||
3. **Service-Status prüfen**
|
||||
|
||||
- Systemd Service Status
|
||||
- Docker Container Gesundheit
|
||||
- Netzwerk-Tests und SSL-Validierung
|
||||
4. **Beenden**
|
||||
|
||||
- Skript verlassen
|
||||
|
||||
### 8. Umfassende Dokumentation
|
||||
|
||||
#### Erstellt: `docs/FRONTEND_INSTALLATION.md`
|
||||
|
||||
- **Umfang**: ~300 Zeilen detaillierte Dokumentation
|
||||
- **Inhalt**:
|
||||
- Schnellstart-Anleitung
|
||||
- Detaillierte Installationsschritte
|
||||
- Service-Management
|
||||
- Troubleshooting-Guide
|
||||
- Backup und Wartung
|
||||
- Performance-Optimierung
|
||||
|
||||
#### Aktualisiert: `README.md`
|
||||
|
||||
- Neue Schnellstart-Sektion mit automatischer Installation
|
||||
- Frontend-Setup-Skript Features dokumentiert
|
||||
- SSL-Zertifikat-Informationen hinzugefügt
|
||||
- Deployment-Szenarien erweitert
|
||||
|
||||
## 🔄 Migrationshinweise
|
||||
|
||||
### Von altem System zu neuem Setup
|
||||
|
||||
#### Alte Methode (Manuell):
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
pnpm install
|
||||
pnpm build
|
||||
pnpm start # Port 3000
|
||||
```
|
||||
|
||||
#### Neue Methode (Automatisch):
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
sudo ./setup.sh # Option 1 wählen
|
||||
# Verfügbar unter https://m040tbaraspi001.de040.corpintra.net
|
||||
```
|
||||
|
||||
#### Vorteile der neuen Methode:
|
||||
|
||||
- **Produktions-ready**: HTTPS auf Port 443 statt HTTP auf Port 3000
|
||||
- **Automatisiert**: Komplette Installation ohne manuelle Schritte
|
||||
- **Sicher**: SSL-verschlüsselt mit Mercedes-Zertifikaten
|
||||
- **Wartungsfreundlich**: Systemd-Integration für Service-Management
|
||||
- **Skalierbar**: Docker-basiert für bessere Ressourcenverwaltung
|
||||
|
||||
## 🧪 Tests und Validierung
|
||||
|
||||
### Automatische Tests im Setup-Skript:
|
||||
|
||||
1. **System-Validierung**
|
||||
|
||||
- Root-Berechtigung
|
||||
- Debian/Raspbian-Erkennung
|
||||
- Internetverbindung
|
||||
2. **Installation-Verification**
|
||||
|
||||
- Docker-Service Status
|
||||
- SSL-Zertifikat Gültigkeit
|
||||
- Container-Gesundheit
|
||||
3. **Netzwerk-Tests**
|
||||
|
||||
- HTTPS-Verbindung zu Domain
|
||||
- localhost-Fallback
|
||||
- Health-Endpoint Verfügbarkeit
|
||||
4. **Service-Integration**
|
||||
|
||||
- Systemd Service Status
|
||||
- Automatischer Boot-Start
|
||||
- Log-Dateien Zugriff
|
||||
|
||||
## 📊 Performance-Verbesserungen
|
||||
|
||||
### Container-Optimierungen:
|
||||
|
||||
- **Multi-Stage Builds**: Reduzierte Image-Größen
|
||||
- **Health Checks**: Automatische Fehlerbehandlung (30s Intervall)
|
||||
- **Resource Limits**: Verhindert Memory-Leaks
|
||||
- **Restart Policies**: Automatische Wiederherstellung
|
||||
|
||||
### Raspberry Pi spezifisch:
|
||||
|
||||
- **Memory Management**: Swappiness reduziert auf 10
|
||||
- **I/O Scheduler**: Optimiert für SD-Karten
|
||||
- **CPU Scheduling**: Verbesserte Interaktivität für Touch-Interface
|
||||
- **Caching**: Effiziente RAM-Nutzung
|
||||
|
||||
## 🔐 Sicherheitsverbesserungen
|
||||
|
||||
### SSL/TLS:
|
||||
|
||||
- **4096-bit RSA**: Stärkere Verschlüsselung als Standard 2048-bit
|
||||
- **Subject Alternative Names**: Unterstützt mehrere Domain-Namen
|
||||
- **System-CA-Integration**: Automatische Vertrauensstellung
|
||||
- **HTTP-zu-HTTPS-Redirect**: Automatische Sicherheitsweiterleitung
|
||||
|
||||
### Container-Sicherheit:
|
||||
|
||||
- **Sandboxed Execution**: NoNewPrivileges, PrivateTmp
|
||||
- **Read-Only Mounts**: SSL-Zertifikate schreibgeschützt
|
||||
- **Network Isolation**: Container-zu-Container Kommunikation begrenzt
|
||||
- **Privilege Restriction**: Minimale erforderliche Berechtigungen
|
||||
|
||||
### Firewall:
|
||||
|
||||
- **Restriktive Standard-Policy**: Deny incoming, allow outgoing
|
||||
- **Whitelist-Ansatz**: Nur explizit erlaubte Verbindungen
|
||||
- **Netzwerk-Segmentierung**: Mercedes-interne Bereiche definiert
|
||||
|
||||
## 🚀 Nächste Schritte
|
||||
|
||||
### Geplante Erweiterungen:
|
||||
|
||||
1. **Monitoring-Dashboard**: Integration von Prometheus/Grafana für Container-Metriken
|
||||
2. **Automatische Updates**: Rolling-Updates für Container ohne Downtime
|
||||
3. **Backup-Automation**: Regelmäßige Sicherung von Datenbank und Konfiguration
|
||||
4. **Load Balancing**: Horizontal-Skalierung bei höherer Last
|
||||
|
||||
### Wartungsaufgaben:
|
||||
|
||||
1. **Zertifikat-Rotation**: Automatische Erneuerung vor Ablauf
|
||||
2. **Log-Rotation**: Automatisches Archivieren großer Log-Dateien
|
||||
3. **Security Updates**: Regelmäßige Container-Image Updates
|
||||
4. **Performance-Monitoring**: Überwachung von Ressourcenverbrauch
|
||||
|
||||
## 📝 Fazit
|
||||
|
||||
Die Konsolidierung des Frontend-Setups bietet erhebliche Verbesserungen:
|
||||
|
||||
### ✅ Erreichte Ziele:
|
||||
|
||||
- **Ein einziges Setup-Skript**: Ersetzt alle manuellen Installationsschritte
|
||||
- **Produktions-ready**: HTTPS unter korrekter Mercedes-Domain verfügbar
|
||||
- **Automatisiert**: Minimaler manueller Aufwand für Deployment
|
||||
- **Dokumentiert**: Umfassende Anleitung für alle Szenarien
|
||||
- **Sicher**: SSL-verschlüsselt mit Mercedes-konformen Zertifikaten
|
||||
|
||||
### 🎯 Bewertung:
|
||||
|
||||
- **Wartbarkeit**: Deutlich verbessert durch Systemd-Integration
|
||||
- **Skalierbarkeit**: Docker-basiert für flexible Ressourcenverteilung
|
||||
- **Sicherheit**: Produktions-konforme SSL-Verschlüsselung
|
||||
- **Benutzerfreundlichkeit**: Interaktives Menü für alle Administrationsaufgaben
|
||||
|
||||
---
|
||||
|
||||
**Erstellt**: 2025-01-06
|
||||
**Autor**: Claude AI Assistant
|
||||
**Version**: 1.0.0
|
||||
**Zweck**: Dokumentation der Frontend-Setup-Konsolidierung für MYP-Projekt
|
||||
@@ -1 +1,298 @@
|
||||
|
||||
# Verbindungstest für Frontend-Backend Integration
|
||||
|
||||
## Übersicht
|
||||
|
||||
Anleitung zum Testen der Verbindung zwischen Frontend und Backend auf dem separaten Server `https://192.168.0.105:443`.
|
||||
|
||||
## 🔍 Schnelltest
|
||||
|
||||
### 1. Backend-Erreichbarkeit prüfen
|
||||
|
||||
```bash
|
||||
# Basis-Verbindung testen
|
||||
ping 192.168.0.105
|
||||
|
||||
# HTTPS-Port testen
|
||||
telnet 192.168.0.105 443
|
||||
|
||||
# SSL-Verbindung testen (ignoriert Zertifikatsfehler)
|
||||
curl -k https://192.168.0.105:443/health
|
||||
```
|
||||
|
||||
### 2. API-Endpunkte testen
|
||||
|
||||
```bash
|
||||
# Health Check
|
||||
curl -k https://192.168.0.105:443/health
|
||||
|
||||
# Drucker abrufen
|
||||
curl -k https://192.168.0.105:443/api/printers
|
||||
|
||||
# Jobs abrufen
|
||||
curl -k https://192.168.0.105:443/api/jobs
|
||||
|
||||
# Mit formatierter Ausgabe
|
||||
curl -k https://192.168.0.105:443/api/printers | jq .
|
||||
```
|
||||
|
||||
### 3. Frontend-Verbindung testen
|
||||
|
||||
```bash
|
||||
# Frontend starten
|
||||
cd frontend
|
||||
pnpm dev
|
||||
|
||||
# In Browser öffnen
|
||||
http://localhost:3000
|
||||
|
||||
# Browser-Konsole prüfen (F12)
|
||||
fetch('/api/health').then(r => r.json()).then(console.log)
|
||||
```
|
||||
|
||||
## 🔧 Fehlerbehebung
|
||||
|
||||
### SSL-Zertifikat-Probleme
|
||||
|
||||
**Problem**: `SSL_ERROR_SELF_SIGNED_CERT`
|
||||
|
||||
**Lösung**:
|
||||
1. Backend direkt im Browser öffnen: `https://192.168.0.105:443`
|
||||
2. Zertifikat manuell akzeptieren
|
||||
3. "Erweitert" → "Weiter zu 192.168.0.105"
|
||||
|
||||
**Alternative**:
|
||||
```bash
|
||||
# curl mit ignoriertem SSL
|
||||
curl -k https://192.168.0.105:443/health
|
||||
```
|
||||
|
||||
### Netzwerk-Verbindungsprobleme
|
||||
|
||||
**Problem**: `Connection refused` oder `Network unreachable`
|
||||
|
||||
**Diagnose**:
|
||||
```bash
|
||||
# 1. IP-Erreichbarkeit prüfen
|
||||
ping 192.168.0.105
|
||||
|
||||
# 2. Port-Verfügbarkeit prüfen
|
||||
nmap -p 443 192.168.0.105
|
||||
|
||||
# 3. Firewall-Status prüfen (auf Backend-Server)
|
||||
sudo ufw status
|
||||
```
|
||||
|
||||
**Lösung**:
|
||||
```bash
|
||||
# Auf Backend-Server (192.168.0.105):
|
||||
sudo ufw allow 443/tcp
|
||||
sudo ufw allow from 192.168.0.0/24 to any port 443
|
||||
```
|
||||
|
||||
### CORS-Probleme
|
||||
|
||||
**Problem**: `Access-Control-Allow-Origin` Fehler
|
||||
|
||||
**Diagnose**:
|
||||
```bash
|
||||
# CORS-Header prüfen
|
||||
curl -k -H "Origin: http://localhost:3000" \
|
||||
-H "Access-Control-Request-Method: GET" \
|
||||
-H "Access-Control-Request-Headers: Content-Type" \
|
||||
-X OPTIONS \
|
||||
https://192.168.0.105:443/api/printers
|
||||
```
|
||||
|
||||
**Lösung**: Backend-CORS-Konfiguration prüfen
|
||||
```python
|
||||
# Auf Backend-Server: app.py
|
||||
from flask_cors import CORS
|
||||
|
||||
app = Flask(__name__)
|
||||
CORS(app, origins=['http://localhost:3000', 'http://192.168.0.*'])
|
||||
```
|
||||
|
||||
### Backend-Service-Probleme
|
||||
|
||||
**Problem**: Backend antwortet nicht
|
||||
|
||||
**Diagnose**:
|
||||
```bash
|
||||
# Auf Backend-Server (192.168.0.105):
|
||||
sudo systemctl status myp-backend
|
||||
sudo journalctl -u myp-backend -f
|
||||
```
|
||||
|
||||
**Lösung**:
|
||||
```bash
|
||||
# Service neu starten
|
||||
sudo systemctl restart myp-backend
|
||||
|
||||
# Oder manuell starten
|
||||
cd /path/to/backend
|
||||
python app.py --host 0.0.0.0 --port 443
|
||||
```
|
||||
|
||||
## 📊 Monitoring
|
||||
|
||||
### Real-time Verbindungsüberwachung
|
||||
|
||||
```bash
|
||||
# Kontinuierlicher Health Check
|
||||
watch -n 5 'curl -k -s https://192.168.0.105:443/health | jq .'
|
||||
|
||||
# Netzwerk-Latenz überwachen
|
||||
ping -c 10 192.168.0.105
|
||||
|
||||
# Port-Monitoring
|
||||
nmap -p 443 192.168.0.105
|
||||
```
|
||||
|
||||
### Frontend-Logs überwachen
|
||||
|
||||
```bash
|
||||
# Frontend-Logs in Echtzeit
|
||||
cd frontend
|
||||
pnpm dev
|
||||
|
||||
# Browser-Konsole (F12) überwachen:
|
||||
console.log('Backend URL:', API_BASE_URL);
|
||||
```
|
||||
|
||||
### Backend-Logs überwachen
|
||||
|
||||
```bash
|
||||
# Auf Backend-Server:
|
||||
tail -f /var/log/myp-backend.log
|
||||
sudo journalctl -u myp-backend -f
|
||||
```
|
||||
|
||||
## 🧪 Automatisierte Tests
|
||||
|
||||
### Frontend-Test-Script erstellen
|
||||
|
||||
```javascript
|
||||
// test-backend-connection.js
|
||||
const API_BASE_URL = 'https://192.168.0.105:443';
|
||||
|
||||
async function testConnection() {
|
||||
try {
|
||||
// Health Check
|
||||
const health = await fetch(`${API_BASE_URL}/health`, {
|
||||
method: 'GET',
|
||||
});
|
||||
console.log('✅ Health Check:', await health.json());
|
||||
|
||||
// Printers API
|
||||
const printers = await fetch(`${API_BASE_URL}/api/printers`);
|
||||
console.log('✅ Printers API:', await printers.json());
|
||||
|
||||
// Jobs API
|
||||
const jobs = await fetch(`${API_BASE_URL}/api/jobs`);
|
||||
console.log('✅ Jobs API:', await jobs.json());
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Verbindungsfehler:', error);
|
||||
}
|
||||
}
|
||||
|
||||
testConnection();
|
||||
```
|
||||
|
||||
```bash
|
||||
# Test ausführen
|
||||
node test-backend-connection.js
|
||||
```
|
||||
|
||||
### Backend-Test-Script
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
# test-backend.sh
|
||||
|
||||
echo "🔍 Backend-Verbindungstest"
|
||||
echo "=========================="
|
||||
|
||||
# 1. Ping-Test
|
||||
echo "1. Ping-Test..."
|
||||
if ping -c 1 192.168.0.105 > /dev/null; then
|
||||
echo "✅ Server erreichbar"
|
||||
else
|
||||
echo "❌ Server nicht erreichbar"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# 2. Port-Test
|
||||
echo "2. Port 443 Test..."
|
||||
if nc -z 192.168.0.105 443; then
|
||||
echo "✅ Port 443 offen"
|
||||
else
|
||||
echo "❌ Port 443 nicht erreichbar"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# 3. SSL-Test
|
||||
echo "3. SSL-Verbindungstest..."
|
||||
if curl -k -s https://192.168.0.105:443/health > /dev/null; then
|
||||
echo "✅ SSL-Verbindung erfolgreich"
|
||||
else
|
||||
echo "❌ SSL-Verbindung fehlgeschlagen"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# 4. API-Tests
|
||||
echo "4. API-Endpunkt-Tests..."
|
||||
if curl -k -s https://192.168.0.105:443/api/printers > /dev/null; then
|
||||
echo "✅ Drucker-API verfügbar"
|
||||
else
|
||||
echo "❌ Drucker-API nicht verfügbar"
|
||||
fi
|
||||
|
||||
if curl -k -s https://192.168.0.105:443/api/jobs > /dev/null; then
|
||||
echo "✅ Jobs-API verfügbar"
|
||||
else
|
||||
echo "❌ Jobs-API nicht verfügbar"
|
||||
fi
|
||||
|
||||
echo ""
|
||||
echo "🎉 Verbindungstest abgeschlossen!"
|
||||
```
|
||||
|
||||
```bash
|
||||
# Test ausführen
|
||||
chmod +x test-backend.sh
|
||||
./test-backend.sh
|
||||
```
|
||||
|
||||
## 📋 Checkliste
|
||||
|
||||
### Vor dem ersten Start
|
||||
|
||||
- [ ] Backend-Server unter `192.168.0.105` läuft
|
||||
- [ ] Port 443 ist geöffnet und erreichbar
|
||||
- [ ] SSL-Zertifikat ist konfiguriert (selbstsigniert OK)
|
||||
- [ ] CORS ist für Frontend-Domain konfiguriert
|
||||
- [ ] API-Endpunkte sind verfügbar
|
||||
|
||||
### Bei Problemen prüfen
|
||||
|
||||
- [ ] Netzwerk-Konnektivität (`ping 192.168.0.105`)
|
||||
- [ ] Port-Verfügbarkeit (`telnet 192.168.0.105 443`)
|
||||
- [ ] SSL-Zertifikat manuell akzeptiert
|
||||
- [ ] Backend-Service läuft (`systemctl status myp-backend`)
|
||||
- [ ] Firewall-Regeln korrekt konfiguriert
|
||||
- [ ] Frontend-Konfiguration korrekt (`API_BASE_URL`)
|
||||
|
||||
### Bei erfolgreicher Verbindung
|
||||
|
||||
- [ ] Health Check gibt Status zurück
|
||||
- [ ] Drucker-API gibt Daten zurück
|
||||
- [ ] Jobs-API ist funktional
|
||||
- [ ] Frontend kann Backend-Daten anzeigen
|
||||
- [ ] Keine CORS-Fehler in Browser-Konsole
|
||||
|
||||
---
|
||||
|
||||
**Ziel**: Nahtlose Kommunikation zwischen Frontend (`localhost:3000`) und Backend (`https://192.168.0.105:443`)
|
||||
**Status**: Bereit für Integration
|
||||
**Support**: Siehe Browser-Konsole und Backend-Logs bei Problemen
|
||||
Reference in New Issue
Block a user