Projektarbeit-MYP/docs/SEPARATE_SERVERS_GUIDE.md

🏗️ 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)

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)

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

# 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

# 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

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

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:

# 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

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

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

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

Logs verfolgen

# 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

# 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

# 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

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

# Neue URLs in beiden Konfigurationen anpassen

🌐 Deployment

Produktions-Deployment

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