# Frontend-API-Konfiguration für separates Backend ## Übersicht Das Frontend wurde konfiguriert, um mit einem Backend auf einem separaten Server unter `https://192.168.0.105:443` zu kommunizieren. ## Durchgeführte Änderungen ### 1. API-Basis-URL-Konfiguration (`frontend/src/utils/api-config.ts`) **Primäre Backend-URL**: `https://192.168.0.105:443` **Fallback-URLs**: - `https://192.168.0.105` (ohne expliziten Port) - `https://raspberrypi` (lokaler Raspberry Pi Fallback) ### 2. SSL-Zertifikat-Handling - Selbstsignierte Zertifikate werden automatisch akzeptiert - `NODE_TLS_REJECT_UNAUTHORIZED = '0'` für Development ### 3. API-Endpunkt-Konfiguration Alle API-Endpunkte wurden angepasst: ```typescript export const API_ENDPOINTS = { PRINTERS: 'https://192.168.0.105:443/api/printers', JOBS: 'https://192.168.0.105:443/api/jobs', USERS: 'https://192.168.0.105:443/api/users', HEALTH: 'https://192.168.0.105:443/health', AUTH: { LOGIN: 'https://192.168.0.105:443/api/auth/login', CALLBACK: 'https://192.168.0.105:443/api/auth/callback', } }; ``` ### 4. Fallback-Mechanismus Das Frontend verfügt über einen robusten Fallback-Mechanismus: 1. **Primäre Verbindung**: `https://192.168.0.105:443` 2. **Fallback 1**: `https://192.168.0.105` (Port 443 automatisch) 3. **Fallback 2**: `https://raspberrypi` (lokaler Pi) ### 5. Health Check Integration Der Health Check wurde angepasst, um die Backend-Konnektivität zu überwachen: ```typescript // Health Check prüft Backend unter https://192.168.0.105:443/health const backendStatus = await fetch(`${backendUrl}/health`); ``` ## Environment-Variablen (optional) Falls gewünscht, kann die Backend-URL über Environment-Variablen überschrieben werden: ```bash # .env.local NEXT_PUBLIC_API_URL=https://192.168.0.105:443 NODE_TLS_REJECT_UNAUTHORIZED=0 ``` ## Netzwerk-Konfiguration ### Backend-Server-Anforderungen 1. **HTTPS aktiviert** auf Port 443 2. **CORS konfiguriert** für Frontend-Domain 3. **SSL-Zertifikat** (selbstsigniert oder gültig) 4. **API-Endpunkte** verfügbar unter `/api/*` 5. **Health Check** verfügbar unter `/health` ### Firewall-Regeln ```bash # Backend-Server (192.168.0.105) sudo ufw allow 443/tcp sudo ufw allow from 192.168.0.0/24 to any port 443 ``` ## Entwicklung und Testing ### Backend-Verbindung testen ```bash # SSL-Verbindung testen curl -k https://192.168.0.105:443/health # API-Endpunkte testen curl -k https://192.168.0.105:443/api/printers curl -k https://192.168.0.105:443/api/jobs ``` ### Frontend-Server starten ```bash cd frontend pnpm install pnpm dev ``` Das Frontend läuft auf `http://localhost:3000` und verbindet sich automatisch mit dem Backend unter `https://192.168.0.105:443`. ## Fehlerbehebung ### SSL-Zertifikat-Probleme Falls SSL-Zertifikat-Fehler auftreten: 1. **Browser**: Besuche `https://192.168.0.105:443` und akzeptiere das Zertifikat manuell 2. **curl**: Verwende `-k` Flag für unsichere Verbindungen 3. **fetch**: `NODE_TLS_REJECT_UNAUTHORIZED=0` ist bereits gesetzt ### Verbindungsprobleme 1. **Netzwerk**: Prüfe ob `192.168.0.105` erreichbar ist 2. **Port**: Stelle sicher, dass Port 443 geöffnet ist 3. **Backend**: Prüfe ob Backend-Service läuft 4. **Logs**: Prüfe Browser-Konsole und Backend-Logs ### Fallback-Testing Das Frontend versucht automatisch Fallback-URLs: ```javascript // In Browser-Konsole testen console.log('API_BASE_URL:', API_BASE_URL); fetch('/api/health').then(r => r.json()).then(console.log); ``` ## Produktions-Deployment ### Umgebungsspezifische Konfiguration ```bash # Production NEXT_PUBLIC_API_URL=https://192.168.0.105:443 # Staging NEXT_PUBLIC_API_URL=https://staging-backend:443 # Development NEXT_PUBLIC_API_URL=https://localhost:5000 ``` ### Docker-Deployment ```yaml # docker-compose.yml services: frontend: build: ./frontend environment: - NEXT_PUBLIC_API_URL=https://192.168.0.105:443 ports: - "3000:3000" ``` --- **Status**: ✅ Konfiguration abgeschlossen **Backend-URL**: `https://192.168.0.105:443` **Fallback-Support**: Aktiviert **SSL-Handling**: Selbstsignierte Zertifikate akzeptiert **Getestet**: Bereit für Integration