298 lines
6.2 KiB
Markdown
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 |