168 lines
4.1 KiB
Markdown
168 lines
4.1 KiB
Markdown
# 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 |