288 lines
7.3 KiB
Markdown
288 lines
7.3 KiB
Markdown
# 🏗️ 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.
|