Projektarbeit-MYP/SEPARATE_SERVERS_GUIDE.md
2025-05-23 10:26:12 +02:00

9.8 KiB

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

Windows (PowerShell)

cd backend
.\install.ps1 -Production                    # Installation
.\start-backend-server.ps1 -Development     # Entwicklung
.\start-backend-server.ps1 -Production      # Produktion
.\start-backend-server.ps1 -Development -Logs  # Mit Live-Logs

Linux/macOS (Bash)

cd backend
./install.sh --production                   # Installation
./start-backend-server.sh --development     # Entwicklung
./start-backend-server.sh --production      # Produktion
./start-backend-server.sh --development --logs  # Mit Live-Logs

Frontend-Server (unabhängig)

cd frontend
npm install                                  # Dependencies installieren
npm run dev                                  # Entwicklungsserver
npm run build && npm start                  # Produktionsserver

📋 Konfiguration

Backend-Konfiguration (backend/env.backend)

# === FLASK KONFIGURATION ===
FLASK_APP=app.py
FLASK_ENV=production
PYTHONUNBUFFERED=1

# === DATENBANK ===
DATABASE_PATH=instance/myp.db

# === SICHERHEIT ===
SECRET_KEY=7445630171969DFAC92C53CEC92E67A9CB2E00B3CB2F
JWT_SECRET=secure-jwt-secret-backend-2024

# === CORS KONFIGURATION ===
CORS_ORIGINS=http://localhost:3000,https://frontend.myp.local

# === DRUCKER KONFIGURATION ===
PRINTERS={"Drucker 1": {"ip": "192.168.0.100"}, "Drucker 2": {"ip": "192.168.0.101"}}

# === TAPO SMART PLUG ===
TAPO_USERNAME=your.email@company.com
TAPO_PASSWORD=your_password

# === NETZWERK ===
HOST=0.0.0.0
PORT=5000
BACKEND_URL=http://localhost:5000

Frontend-Konfiguration (frontend/env.frontend)

# === NODE.JS KONFIGURATION ===
NODE_ENV=production
NEXT_TELEMETRY_DISABLED=1

# === FRONTEND SERVER ===
PORT=3000
HOSTNAME=0.0.0.0
FRONTEND_URL=http://localhost:3000

# === BACKEND API KONFIGURATION ===
BACKEND_API_URL=http://localhost:5000/api
BACKEND_HOST=localhost:5000
NEXT_PUBLIC_API_URL=http://localhost:5000/api
NEXT_PUBLIC_BACKEND_HOST=localhost:5000

# === AUTHENTIFIZIERUNG ===
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=frontend-auth-secret-2024

🔧 Entwicklung

Beide Server parallel starten

Windows

# Terminal 1: Backend
cd backend
.\start-backend-server.ps1 -Development -Logs

# Terminal 2: Frontend
cd frontend
npm run dev

Linux/macOS

# Terminal 1: Backend
cd backend
./start-backend-server.sh --development --logs

# Terminal 2: Frontend
cd frontend
npm run dev

API-Endpoints testen

# Backend Health-Check
curl http://localhost:5000/monitoring/health/simple

# Backend API Test
curl http://localhost:5000/api/test

# Frontend Health-Check
curl http://localhost:3000/health

🏭 Produktion

Docker-Deployment

Backend-Container

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

Frontend-Container

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

Native Deployment

Backend (Linux/Ubuntu)

cd backend
./install.sh --production

# Systemd-Service
sudo systemctl start myp-backend
sudo systemctl enable myp-backend
sudo systemctl status myp-backend

Frontend (mit PM2)

cd frontend
npm install -g pm2
npm run build
pm2 start npm --name "myp-frontend" -- start
pm2 save
pm2 startup

🔒 Sicherheit

CORS-Konfiguration

Das Backend ist konfiguriert, um nur Anfragen von autorisierten Frontend-Domains zu akzeptieren:

# 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'])

Umgebungsvariablen

  • Verwenden Sie sichere, zufällige Secret Keys
  • Lagern Sie Passwörter nie im Code
  • Nutzen Sie unterschiedliche Secrets für verschiedene Umgebungen

📊 Monitoring

Health-Checks

Service Endpoint Port Beschreibung
Backend /monitoring/health/simple 5000 Einfacher Health-Check
Backend /monitoring/health 5000 Detaillierter Health-Check
Frontend /health 3000 Frontend-Health-Check

Logs

Backend-Logs

# Windows
Get-Content backend\logs\myp.log -Wait

# Linux/macOS
tail -f backend/logs/myp.log

Frontend-Logs

# Development
npm run dev   # Logs in der Konsole

# Production mit PM2
pm2 logs myp-frontend

🔍 Troubleshooting

Häufige Probleme

Backend startet nicht

# 1. Python-Version prüfen
python --version   # Mindestens 3.8 erforderlich

# 2. Dependencies prüfen
cd backend
pip install -r requirements.txt

# 3. Test-Skript ausführen
python test-backend-setup.py

Frontend startet nicht

# 1. Node-Version prüfen
node --version     # Mindestens 18 erforderlich

# 2. Dependencies installieren
cd frontend
rm -rf node_modules package-lock.json
npm install

# 3. Build-Fehler beheben
npm run build

CORS-Fehler

# Backend CORS-Origins in env.backend prüfen
CORS_ORIGINS=http://localhost:3000,https://your-frontend-domain.com

# Frontend API-URL in env.frontend prüfen
NEXT_PUBLIC_API_URL=http://localhost:5000/api

Debug-Modus

Backend Debug

# Windows
.\start-backend-server.ps1 -Development -Logs

# Linux/macOS
./start-backend-server.sh --development --logs

Frontend Debug

cd frontend
npm run dev      # Automatisches Reload bei Änderungen

🌐 Reverse Proxy (Produktionsempfehlung)

Nginx-Konfiguration

# /etc/nginx/sites-available/myp
server {
    listen 80;
    server_name your-domain.com;

    # Frontend
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    # Backend API
    location /api {
        proxy_pass http://localhost:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Backend Health-Check
    location /monitoring {
        proxy_pass http://localhost:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

SSL-Konfiguration mit Certbot

# SSL-Zertifikat installieren
sudo certbot --nginx -d your-domain.com

# Automatische Erneuerung
sudo crontab -e
# Füge hinzu: 0 12 * * * /usr/bin/certbot renew --quiet

📈 Performance-Optimierung

Backend-Optimierung

# Gunicorn-Worker anpassen (env.backend)
WORKERS=4                    # CPU-Kerne * 2
TIMEOUT=30                   # Request-Timeout
MAX_REQUESTS=1000           # Requests pro Worker

Frontend-Optimierung

# Build-Optimierung
cd frontend
npm run build               # Produktions-Build
npm run analyze            # Bundle-Analyse

🔄 CI/CD Pipeline

GitHub Actions Beispiel

# .github/workflows/deploy.yml
name: Deploy MYP

on:
  push:
    branches: [main]

jobs:
  deploy-backend:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Deploy Backend
        run: |
          cd backend
          ./install.sh --production
          sudo systemctl restart myp-backend

  deploy-frontend:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Deploy Frontend
        run: |
          cd frontend
          npm install
          npm run build
          pm2 restart myp-frontend

📝 Wartung

Regelmäßige Aufgaben

# Logs rotieren
sudo logrotate -f /etc/logrotate.d/myp

# Dependencies aktualisieren
cd backend && pip install -r requirements.txt --upgrade
cd frontend && npm update

# Datenbank-Backup
cd backend && cp instance/myp.db backups/myp-$(date +%Y%m%d).db

# Health-Check-Monitoring
curl -f http://localhost:5000/monitoring/health/simple || echo "Backend down"
curl -f http://localhost:3000/health || echo "Frontend down"

📞 Support

Kontakt

Dokumentation

  • Backend-API: http://localhost:5000/docs (falls Swagger aktiviert)
  • Frontend-Dokumentation: Siehe frontend/README.md
  • System-Architektur: Siehe docs/ARCHITECTURE.md

Hinweis: Diese Dokumentation beschreibt die neue separate Server-Architektur. Die alte gekoppelte Architektur wird nicht mehr unterstützt.