🔧 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:
@@ -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