Projektarbeit-MYP/docs/FRONTEND_API_KONFIGURATION.md

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:

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:

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

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

# 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

# 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

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:

// 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

# 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

# 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