Projektarbeit-MYP/docs/VERBINDUNGSTEST.md

298 lines
6.2 KiB
Markdown

# 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