🌟 🎉 Major Update:
This commit is contained in:
168
docs/FRONTEND_API_KONFIGURATION.md
Normal file
168
docs/FRONTEND_API_KONFIGURATION.md
Normal file
@@ -0,0 +1,168 @@
|
||||
# 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
|
Reference in New Issue
Block a user