# 🏗️ MYP - Separate Server Architektur

## Übersicht

Das MYP-System wurde in **zwei vollständig unabhängige Server** aufgeteilt:

- **🏭 Backend-Server** (Port 5000): Flask-API für Geschäftslogik und Datenmanagement
- **🎨 Frontend-Server** (Port 3000): Next.js-Anwendung für Benutzeroberfläche

## 🔗 Server-Kommunikation

```
┌─────────────────┐     HTTP/API     ┌─────────────────┐
│   Frontend      │◄───────────────►│   Backend       │
│   (Next.js)     │                 │   (Flask)       │
│   Port: 3000    │                 │   Port: 5000    │
└─────────────────┘                 └─────────────────┘
```

## 🚀 Separate Server starten

### Backend-Server (unabhängig)

```bash
cd backend
./start-backend-server.sh

# Alternative mit Logs
./start-backend-server.sh --logs

# Vollständige Neuinstallation
./start-backend-server.sh --clean
```

**Backend verfügbar unter:**

- 📡 Backend-API: http://localhost:5000
- 🔧 Health-Check: http://localhost:5000/health
- 📋 API-Docs: http://localhost:5000/swagger

### Frontend-Server (unabhängig)

```bash
cd frontend
./start-frontend-server.sh

# Alternative mit Logs
./start-frontend-server.sh --logs

# Vollständige Neuinstallation
./start-frontend-server.sh --clean
```

**Frontend verfügbar unter:**

- 🌐 Web-App: http://localhost:3000
- 🔧 Health-Check: http://localhost:3000/health
- 📦 CDN-Assets: http://localhost:8080

## ⚙️ Konfiguration

### Backend-Konfiguration

**Datei:** `backend/env.backend`

```bash
# Backend-Server
PORT=5000
BACKEND_URL=http://localhost:5000

# CORS für Frontend-Zugriff
CORS_ORIGINS=http://localhost:3000,https://frontend.myp.local

# Datenbank
DATABASE_PATH=instance/myp.db

# Cache
REDIS_HOST=localhost
REDIS_PORT=6379
```

### Frontend-Konfiguration

**Datei:** `frontend/env.frontend`

```bash
# Frontend-Server
PORT=3000
FRONTEND_URL=http://localhost:3000

# Backend-API Verbindung
BACKEND_API_URL=http://localhost:5000/api
NEXT_PUBLIC_API_URL=http://localhost:5000/api

# Cache
FRONTEND_REDIS_PORT=6380
```

## 🐋 Docker-Container

### Backend-Container

```bash
cd backend
docker-compose -f docker-compose.backend.yml up -d

# Services:
# - myp-backend-standalone (Port 5000)
# - myp-backend-db (PostgreSQL, Port 5432)
# - myp-backend-cache (Redis, Port 6379)
```

### Frontend-Container

```bash
cd frontend
docker-compose -f docker-compose.frontend.yml up -d

# Services:
# - myp-frontend-standalone (Port 3000)
# - myp-frontend-cache (Redis, Port 6380)
# - myp-frontend-cdn (Nginx, Port 8080)
```

## 🔒 Sicherheit

### CORS-Konfiguration

Das Backend ist für **explizite Frontend-Origins** konfiguriert:

```python
# Backend: app.py
CORS(app, 
     origins=['http://localhost:3000', 'https://frontend.myp.local'],
     supports_credentials=True,
     allow_headers=['Content-Type', 'Authorization', 'X-Requested-With'],
     methods=['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'])
```

### API-Authentifizierung

- **JWT-Tokens** für API-Zugriff
- **Session-basierte** Authentifizierung für Web-UI
- **Separate Secrets** für Frontend und Backend

## 📊 Monitoring

### Health-Checks

**Backend:** GET http://localhost:5000/health

```json
{
  "status": "healthy",
  "service": "myp-backend",
  "database": "connected",
  "timestamp": "2024-01-15T10:30:00Z"
}
```

**Frontend:** GET http://localhost:3000/health

```json
{
  "status": "healthy",
  "service": "myp-frontend",
  "backend": {
    "url": "http://localhost:5000",
    "status": "connected"
  },
  "timestamp": "2024-01-15T10:30:00Z"
}
```

### Logs verfolgen

```bash
# Backend-Logs
cd backend
docker-compose -f docker-compose.backend.yml logs -f

# Frontend-Logs
cd frontend
docker-compose -f docker-compose.frontend.yml logs -f
```

## 🔧 Troubleshooting

### Backend startet nicht

```bash
# 1. Prüfe Ports
netstat -an | grep 5000

# 2. Prüfe Backend-Logs
cd backend
docker-compose -f docker-compose.backend.yml logs backend

# 3. Datenbank-Migration
docker-compose -f docker-compose.backend.yml exec backend flask db upgrade
```

### Frontend kann Backend nicht erreichen

```bash
# 1. Prüfe Backend-Verfügbarkeit
curl http://localhost:5000/health

# 2. Prüfe CORS-Konfiguration
curl -H "Origin: http://localhost:3000" \
     -H "Access-Control-Request-Method: GET" \
     -H "Access-Control-Request-Headers: Content-Type" \
     -X OPTIONS http://localhost:5000/api/printers

# 3. Prüfe Frontend-Umgebungsvariablen
cd frontend
grep BACKEND env.frontend
```

### Port-Konflikte

```bash
# Standard-Ports ändern
# Backend: PORT=5001 in env.backend
# Frontend: PORT=3001 in env.frontend

# Neue URLs in beiden Konfigurationen anpassen
```

## 🌐 Deployment

### Produktions-Deployment

```bash
# Backend (Server 1)
cd backend
FLASK_ENV=production ./start-backend-server.sh

# Frontend (Server 2)
cd frontend
NODE_ENV=production BACKEND_API_URL=https://api.myp.de ./start-frontend-server.sh
```

### Reverse Proxy (Optional)

Für Produktion können beide Server hinter einem Reverse Proxy laufen:

```
┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Client    │────►│ Nginx/Caddy │────►│  Frontend   │
│             │     │             │  ┌─►│  :3000      │
└─────────────┘     │ /api/* ─────┤──┘  └─────────────┘
                    │             │  ┌─►┌─────────────┐
                    │ /api/* ─────┤──┘  │  Backend    │
                    └─────────────┘     │  :5000      │
                                        └─────────────┘
```

## 📁 Dateistruktur

```
Projektarbeit-MYP/
├── backend/                          # 🏭 Backend-Server
│   ├── docker-compose.backend.yml    # Docker-Konfiguration
│   ├── start-backend-server.sh       # Start-Skript
│   ├── env.backend                   # Umgebungsvariablen
│   └── app.py                        # Flask-Anwendung
├── frontend/                         # 🎨 Frontend-Server
│   ├── docker-compose.frontend.yml   # Docker-Konfiguration
│   ├── start-frontend-server.sh      # Start-Skript
│   ├── env.frontend                  # Umgebungsvariablen
│   └── src/                          # Next.js-Anwendung
└── SEPARATE_SERVERS_GUIDE.md         # Diese Dokumentation
```

## ✅ Vorteile der Trennung

1. **🔄 Unabhängige Skalierung** - Frontend und Backend können getrennt skaliert werden
2. **🚀 Separate Deployments** - Updates können unabhängig deployed werden
3. **🛡️ Verbesserte Sicherheit** - Klare API-Grenzen und CORS-Kontrolle
4. **🔧 Technologie-Flexibilität** - Frontend und Backend können verschiedene Technologien verwenden
5. **📊 Besseres Monitoring** - Separate Health-Checks und Logs
6. **🏗️ Microservice-Ready** - Vorbereitung für Microservice-Architektur

---

**Hinweis:** Die alte gekoppelte Konfiguration ist weiterhin in `docker-compose.yml` verfügbar, wird aber für neue Deployments nicht empfohlen.