Projektarbeit-MYP/docs/VERBINDUNGSTEST.md

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

# 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

# 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

# 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:

# curl mit ignoriertem SSL
curl -k https://192.168.0.105:443/health

Netzwerk-Verbindungsprobleme

Problem: Connection refused oder Network unreachable

Diagnose:

# 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:

# 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:

# 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

# 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:

# Auf Backend-Server (192.168.0.105):
sudo systemctl status myp-backend
sudo journalctl -u myp-backend -f

Lösung:

# 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

# 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

# Frontend-Logs in Echtzeit
cd frontend
pnpm dev

# Browser-Konsole (F12) überwachen:
console.log('Backend URL:', API_BASE_URL);

Backend-Logs überwachen

# Auf Backend-Server:
tail -f /var/log/myp-backend.log
sudo journalctl -u myp-backend -f

🧪 Automatisierte Tests

Frontend-Test-Script erstellen

// 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();

# Test ausführen
node test-backend-connection.js

Backend-Test-Script

#!/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!"

# 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