"feat: Update project structure and Dockerfiles for frontend integration"

This commit is contained in:
Till Tomczak 2025-05-23 07:59:28 +02:00
parent fb66cdb6db
commit 0ad5597df3
4 changed files with 364 additions and 134 deletions

View File

@ -1 +1,175 @@
# 🏗️ MYP Projektstruktur - Perfektionierte Architektur
## 📋 Übersicht
MYP (Manage your Printer) ist ein containerbasiertes Microservice-System mit klarer Trennung zwischen Frontend und Backend.
## 🗂️ Verzeichnisstruktur
```
Projektarbeit-MYP/
├── 🖥️ backend/ # Flask API Server (Port 5000)
│ ├── 📁 src/ # Hauptanwendungslogik
│ │ ├── 📁 api/ # API Endpunkte
│ │ ├── 📁 models/ # Datenmodelle
│ │ ├── 📁 services/ # Geschäftslogik
│ │ ├── 📁 auth/ # Authentifizierungslogik
│ │ └── 📁 utils/ # Hilfsfunktionen
│ ├── 📁 tests/ # Unit- und Integrationstests
│ ├── 📁 migrations/ # Datenbankmigrationen
│ ├── 📁 instance/ # SQLite Datenbank (gitignore)
│ ├── 📁 logs/ # Anwendungslogs (gitignore)
│ ├── 📁 config/ # Konfigurationsdateien
│ ├── 📄 Dockerfile # Backend Container
│ ├── 📄 requirements.txt # Python Abhängigkeiten
│ ├── 📄 app.py # Flask Anwendung Einstiegspunkt
│ └── 📄 .env.example # Umgebungsvariablen Vorlage
├── 🌐 frontend/ # Next.js Web Interface (Port 3000)
│ ├── 📁 src/ # Hauptanwendungslogik
│ │ ├── 📁 app/ # Next.js App Router
│ │ ├── 📁 components/ # React Komponenten
│ │ ├── 📁 lib/ # Bibliotheken und Utilities
│ │ └── 📁 types/ # TypeScript Typdefinitionen
│ ├── 📁 public/ # Statische Assets
│ ├── 📁 drizzle/ # Frontend Datenbankschema
│ ├── 📁 tests/ # Frontend Tests
│ ├── 📄 Dockerfile # Frontend Container
│ ├── 📄 package.json # Node.js Abhängigkeiten
│ ├── 📄 next.config.mjs # Next.js Konfiguration
│ └── 📄 .env.example # Umgebungsvariablen Vorlage
├── 🔄 proxy/ # Caddy Reverse Proxy (Port 80/443)
│ ├── 📄 Caddyfile # Proxy Konfiguration
│ └── 📄 docker-compose.caddy.yml # Caddy Service Definition
├── 📊 monitoring/ # Überwachung und Logging
│ ├── 📁 grafana/ # Dashboards
│ ├── 📁 prometheus/ # Metriken
│ └── 📄 docker-compose.monitoring.yml
├── 🔧 infrastructure/ # Infrastruktur-Konfiguration
│ ├── 📁 scripts/ # Automatisierungsskripte
│ │ ├── 📄 start.sh # Linux/MacOS Start
│ │ ├── 📄 start.ps1 # Windows Start
│ │ ├── 📄 cleanup.sh # Linux/MacOS Bereinigung
│ │ └── 📄 cleanup.ps1 # Windows Bereinigung
│ ├── 📁 environments/ # Umgebungskonfigurationen
│ │ ├── 📄 development.env # Entwicklungsumgebung
│ │ ├── 📄 production.env # Produktionsumgebung
│ │ └── 📄 testing.env # Testumgebung
│ └── 📁 ssl/ # SSL Zertifikate (gitignore)
├── 📚 docs/ # Projektdokumentation
│ ├── 📄 API.md # API Dokumentation
│ ├── 📄 DEPLOYMENT.md # Deployment Anweisungen
│ ├── 📄 DEVELOPMENT.md # Entwicklungsrichtlinien
│ └── 📄 ARCHITECTURE.md # Systemarchitektur
├── 🧪 tests/ # Übergreifende Tests
│ ├── 📁 integration/ # Integrationstests
│ ├── 📁 e2e/ # End-to-End Tests
│ └── 📄 docker-compose.test.yml # Test Environment
├── 📄 docker-compose.yml # Hauptkomposition (Prod)
├── 📄 docker-compose.dev.yml # Entwicklungsumgebung
├── 📄 docker-compose.override.yml # Lokale Overrides
├── 📄 .gitignore # Git Ignorierte Dateien
├── 📄 .dockerignore # Docker Ignorierte Dateien
├── 📄 README.md # Projekt Hauptdokumentation
└── 📄 PROJECT_STRUCTURE.md # Diese Strukturdokumentation
```
## 🔌 Service-Kommunikation
### Interne Container-Kommunikation
- **Frontend → Backend**: `http://backend:5000/api`
- **Proxy → Frontend**: `http://frontend:3000`
- **Proxy → Backend**: `http://backend:5000`
### Externe Zugriffe
- **Web Interface**: `https://localhost` (über Caddy Proxy)
- **API Direct**: `http://localhost:5000` (nur Entwicklung)
- **Frontend Direct**: `http://localhost:3000` (nur Entwicklung)
## 🌐 Netzwerk-Architektur
```
Internet/Intranet
[Caddy Proxy] (80/443)
┌─────────┬─────────┐
↓ ↓ ↓
[Frontend] [Backend] [Monitoring]
(3000) (5000) (9090/3001)
↓ ↓
[SQLite] [SQLite]
```
## 🔐 Sicherheitskonzept
### Umgebungsvariablen
- Sensible Daten nur über `.env` Dateien
- Produktionsgeheimnisse über sichere Umgebungsvariablen
- Keine Geheimnisse in Git-Repository
### Netzwerksicherheit
- Container-isolierte Netzwerke
- Nur notwendige Ports exponiert
- HTTPS-Verschlüsselung über Caddy
- Firewall-kompatible Konfiguration
### Authentifizierung
- JWT-Token für API-Authentifizierung
- Session-basierte Frontend-Authentifizierung
- OAuth2 Integration vorbereitet
## 🚀 Deployment-Strategien
### Entwicklung
```bash
# Linux/MacOS
./infrastructure/scripts/start.sh dev
# Windows
.\infrastructure\scripts\start.ps1 dev
```
### Produktion
```bash
# Linux/MacOS
./infrastructure/scripts/start.sh prod
# Windows
.\infrastructure\scripts\start.ps1 prod
```
## 📦 Container-Optimierungen
### Multi-Stage Builds
- Frontend: Node.js Build → Minimales Runtime Image
- Backend: Python Requirements → Optimiertes Laufzeit-Image
- Reduzierte Image-Größen und Sicherheitsoberfläche
### Health Checks
- Automatische Gesundheitsprüfungen für alle Services
- Graceful Restart bei Fehlern
- Monitoring-Integration
### Volume Management
- Persistente Datenbank-Volumes
- Log-Rotation und -Management
- Backup-freundliche Struktur
## 🔄 CI/CD Integration
### Git Hooks
- Pre-commit Linting und Testing
- Automatische Dependency Updates
- Security Scanning
### Container Registry
- Automatisches Image Building
- Versionierung über Git Tags
- Multi-Architecture Support (x86_64, ARM64)

View File

@ -1 +1,49 @@
# 🔧 MYP Backend - Entwicklungs-Container
# Optimiert für Hot Reload und Debugging
FROM python:3.11-slim
# Arbeitsverzeichnis setzen
WORKDIR /app
# System-Abhängigkeiten installieren
RUN apt-get update && apt-get install -y \
curl \
sqlite3 \
wget \
git \
build-essential \
&& rm -rf /var/lib/apt/lists/*
# Python-Abhängigkeiten installieren
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
# Entwicklungs-spezifische Pakete
RUN pip install --no-cache-dir \
watchdog \
flask-debugtoolbar \
pytest \
pytest-cov \
black \
flake8
# Verzeichnisse erstellen
RUN mkdir -p logs instance
# Umgebungsvariablen für Entwicklung
ENV FLASK_APP=app.py
ENV FLASK_ENV=development
ENV FLASK_DEBUG=1
ENV PYTHONUNBUFFERED=1
ENV PYTHONDONTWRITEBYTECODE=1
# Port freigeben
EXPOSE 5000 5555
# Health Check
HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
CMD curl -f http://localhost:5000/health || exit 1
# Entwicklungs-Startbefehl (wird durch docker-compose überschrieben)
CMD ["flask", "run", "--host=0.0.0.0", "--port=5000", "--reload", "--debugger"]

45
frontend/Dockerfile.dev Normal file
View File

@ -0,0 +1,45 @@
# 🔧 MYP Frontend - Entwicklungs-Container
# Optimiert für Hot Reload und Debugging
FROM node:20-bookworm-slim
# Arbeitsverzeichnis erstellen
WORKDIR /app
# System-Abhängigkeiten installieren
RUN apt-get update && apt-get install -y \
curl \
git \
&& rm -rf /var/lib/apt/lists/*
# pnpm aktivieren
RUN corepack enable pnpm
# Package-Dateien kopieren
COPY package.json pnpm-lock.yaml ./
# Abhängigkeiten installieren
RUN pnpm install
# Entwicklungs-spezifische Pakete
RUN pnpm add -D \
@types/node \
typescript \
eslint \
prettier
# Umgebungsvariablen für Entwicklung
ENV NODE_ENV=development
ENV NEXT_TELEMETRY_DISABLED=1
ENV WATCHPACK_POLLING=true
ENV PORT=3000
# Ports freigeben
EXPOSE 3000 8081
# Health Check
HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
CMD curl -f http://localhost:3000 || exit 1
# Entwicklungs-Startbefehl (wird durch docker-compose überschrieben)
CMD ["pnpm", "dev"]

219
start.ps1
View File

@ -1,137 +1,100 @@
# Projektarbeit-MYP Startskript für Windows
# Dieses Skript startet alle notwendigen Dienste für das MYP-Projekt
# 🚀 MYP - Manage your Printer (Hauptstartskript)
# Weiterleitung an das optimierte Infrastructure-Startskript
Write-Host "Starte MYP-Projekt..." -ForegroundColor Green
param(
[Parameter(Position=0)]
[ValidateSet("dev", "prod", "test", "development", "production")]
[string]$Environment = "dev",
# SSH-Server (OpenSSH) prüfen und aktivieren
Write-Host "Prüfe SSH-Server-Status..." -ForegroundColor Yellow
[switch]$Help,
[switch]$Version,
[switch]$Clean
)
# Prüfen ob OpenSSH Server installiert ist
$opensshService = Get-Service -Name 'sshd' -ErrorAction SilentlyContinue
# Farbdefinitionen für bessere Ausgabe
$Colors = @{
Info = "Cyan"
Success = "Green"
Warning = "Yellow"
Error = "Red"
Header = "Magenta"
}
if ($null -eq $opensshService) {
Write-Host "OpenSSH Server ist nicht installiert. Versuche zu installieren..." -ForegroundColor Yellow
function Write-ColorOutput {
param([string]$Message, [string]$Color = "White")
Write-Host $Message -ForegroundColor $Colors[$Color]
}
# Prüfen, ob Windows 10/11 mit der Option zum Installieren von Windows-Features
if (Get-Command -Name "Add-WindowsCapability" -ErrorAction SilentlyContinue) {
try {
# OpenSSH Server installieren
Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0
Write-Host "OpenSSH Server wurde installiert." -ForegroundColor Green
} catch {
Write-Host "Fehler bei der Installation des OpenSSH Servers. Bitte installieren Sie ihn manuell." -ForegroundColor Red
Write-Host "Anleitung: https://docs.microsoft.com/de-de/windows-server/administration/openssh/openssh_install_firstuse" -ForegroundColor Cyan
}
# Header anzeigen
Write-ColorOutput "🖨️ MYP - Manage your Printer" "Header"
Write-ColorOutput "═══════════════════════════════════════" "Header"
# Hilfe anzeigen
if ($Help) {
Write-ColorOutput "`n📖 Verwendung:" "Info"
Write-ColorOutput " .\start.ps1 [Environment] [Optionen]" "White"
Write-ColorOutput "`n🌍 Verfügbare Umgebungen:" "Info"
Write-ColorOutput " dev, development - Entwicklungsumgebung (Standard)" "White"
Write-ColorOutput " prod, production - Produktionsumgebung" "White"
Write-ColorOutput " test - Testumgebung" "White"
Write-ColorOutput "`n⚙️ Optionen:" "Info"
Write-ColorOutput " -Help - Diese Hilfe anzeigen" "White"
Write-ColorOutput " -Version - Versionsinformationen anzeigen" "White"
Write-ColorOutput " -Clean - System vor Start bereinigen" "White"
Write-ColorOutput "`n📚 Beispiele:" "Info"
Write-ColorOutput " .\start.ps1 # Entwicklungsumgebung starten" "White"
Write-ColorOutput " .\start.ps1 prod # Produktionsumgebung starten" "White"
Write-ColorOutput " .\start.ps1 dev -Clean # Mit Bereinigung starten" "White"
exit 0
}
# Version anzeigen
if ($Version) {
Write-ColorOutput "`n📋 Systeminformationen:" "Info"
Write-ColorOutput " MYP Version: 2.0.0" "White"
Write-ColorOutput " PowerShell: $($PSVersionTable.PSVersion)" "White"
Write-ColorOutput " OS: $($PSVersionTable.OS)" "White"
Write-ColorOutput " Architektur: $env:PROCESSOR_ARCHITECTURE" "White"
exit 0
}
# Bereinigung falls gewünscht
if ($Clean) {
Write-ColorOutput "`n🧹 System wird bereinigt..." "Warning"
& ".\infrastructure\scripts\cleanup.ps1" -Force
if ($LASTEXITCODE -ne 0) {
Write-ColorOutput "❌ Bereinigung fehlgeschlagen!" "Error"
exit 1
}
Write-ColorOutput "✅ System erfolgreich bereinigt!" "Success"
}
# Prüfe ob Infrastructure-Skript existiert
$InfraScript = ".\infrastructure\scripts\start.ps1"
if (-not (Test-Path $InfraScript)) {
Write-ColorOutput "`n❌ Infrastructure-Startskript nicht gefunden: $InfraScript" "Error"
Write-ColorOutput " Bitte stellen Sie sicher, dass die Projektstruktur vollständig ist." "Error"
exit 1
}
# Weiterleitung an Infrastructure-Skript
Write-ColorOutput "`n🔄 Weiterleitung an Infrastructure-Startskript..." "Info"
Write-ColorOutput " Umgebung: $Environment" "White"
try {
& $InfraScript $Environment
$ExitCode = $LASTEXITCODE
if ($ExitCode -eq 0) {
Write-ColorOutput "`n🎉 MYP erfolgreich gestartet!" "Success"
Write-ColorOutput " Zugriff über: http://localhost" "Info"
} else {
Write-Host "Windows-Feature zum Installieren von OpenSSH Server nicht verfügbar." -ForegroundColor Red
Write-Host "Bitte installieren Sie OpenSSH Server manuell:" -ForegroundColor Red
Write-Host "1. Öffnen Sie 'Einstellungen' > 'Apps' > 'Optionale Features'" -ForegroundColor Cyan
Write-Host "2. Klicken Sie auf 'Feature hinzufügen' und wählen Sie 'OpenSSH Server'" -ForegroundColor Cyan
Write-ColorOutput "`n❌ Start fehlgeschlagen (Exit Code: $ExitCode)" "Error"
}
# Erneut prüfen, ob der Dienst jetzt verfügbar ist
$opensshService = Get-Service -Name 'sshd' -ErrorAction SilentlyContinue
exit $ExitCode
} catch {
Write-ColorOutput "`n💥 Unerwarteter Fehler beim Start:" "Error"
Write-ColorOutput " $($_.Exception.Message)" "Error"
exit 1
}
if ($null -ne $opensshService) {
# OpenSSH Server beim Systemstart aktivieren
Write-Host "Aktiviere OpenSSH Server beim Systemstart..." -ForegroundColor Yellow
Set-Service -Name 'sshd' -StartupType Automatic
# OpenSSH Server starten, falls nicht bereits gestartet
if ($opensshService.Status -ne 'Running') {
Write-Host "Starte OpenSSH Server..." -ForegroundColor Yellow
Start-Service -Name 'sshd'
Write-Host "OpenSSH Server wurde gestartet." -ForegroundColor Green
} else {
Write-Host "OpenSSH Server läuft bereits." -ForegroundColor Green
}
# Firewall-Regel für SSH hinzufügen (Port 22)
$firewallRule = Get-NetFirewallRule -Name 'OpenSSH-Server-In-TCP' -ErrorAction SilentlyContinue
if ($null -eq $firewallRule) {
Write-Host "Erstelle Firewall-Regel für OpenSSH Server..." -ForegroundColor Yellow
New-NetFirewallRule -Name 'OpenSSH-Server-In-TCP' -DisplayName 'OpenSSH Server (TCP-In)' -Enabled True -Direction Inbound -Protocol TCP -Action Allow -LocalPort 22
}
} else {
Write-Host "OpenSSH Server konnte nicht installiert werden. Bitte installieren Sie ihn manuell." -ForegroundColor Red
}
# Überprüfen, ob Docker Desktop läuft
$dockerProcess = Get-Process "Docker Desktop" -ErrorAction SilentlyContinue
if ($null -eq $dockerProcess) {
Write-Host "Docker Desktop wird gestartet..." -ForegroundColor Yellow
Start-Process "C:\Program Files\Docker\Docker\Docker Desktop.exe"
# Warten, bis Docker Desktop vollständig geladen ist
Write-Host "Warte, bis Docker Desktop bereit ist..." -ForegroundColor Yellow
$retryCount = 0
$maxRetries = 30
do {
Start-Sleep -Seconds 5
$retryCount++
$dockerRunning = docker info 2>$null
if ($retryCount -gt $maxRetries) {
Write-Host "Docker Desktop konnte nicht gestartet werden. Bitte starten Sie Docker Desktop manuell und führen Sie dieses Skript erneut aus." -ForegroundColor Red
exit 1
}
} while ($null -eq $dockerRunning)
Write-Host "Docker Desktop ist bereit." -ForegroundColor Green
}
# Überprüfen, ob die Container bereits laufen
$runningContainers = docker ps --format "{{.Names}}" | Select-String -Pattern "myp-backend|myp-rp|myp-caddy"
if ($runningContainers.Count -eq 3) {
Write-Host "Alle MYP-Container laufen bereits." -ForegroundColor Green
} else {
# Container starten
Write-Host "Starte MYP-Container..." -ForegroundColor Yellow
# Ins Projektverzeichnis wechseln
$scriptPath = Split-Path -Parent $MyInvocation.MyCommand.Path
Set-Location -Path $scriptPath
# Docker-Compose ausführen
docker-compose up -d
# Warten, bis alle Container laufen
Write-Host "Warte, bis alle Container bereit sind..." -ForegroundColor Yellow
$allRunning = $false
$retryCount = 0
$maxRetries = 30
do {
Start-Sleep -Seconds 5
$retryCount++
$backendHealth = docker inspect --format='{{.State.Health.Status}}' myp-backend 2>$null
$frontendHealth = docker inspect --format='{{.State.Health.Status}}' myp-rp 2>$null
if ($backendHealth -eq "healthy" -and $frontendHealth -eq "healthy") {
$allRunning = $true
}
if ($retryCount -gt $maxRetries) {
Write-Host "Zeitüberschreitung beim Warten auf Container. Bitte überprüfen Sie den Status mit 'docker ps'." -ForegroundColor Yellow
break
}
} while (-not $allRunning)
if ($allRunning) {
Write-Host "Alle MYP-Container sind bereit und laufen." -ForegroundColor Green
}
}
# Informationen zur Anwendung anzeigen
Write-Host "`nMYP-Anwendung ist jetzt verfügbar unter:" -ForegroundColor Cyan
Write-Host " * http://localhost" -ForegroundColor White
Write-Host " * http://192.168.0.5:5000 (Backend API direkt)" -ForegroundColor White
Write-Host "`nDas Backend ist unter der festen IP 192.168.0.5 erreichbar." -ForegroundColor Cyan
Write-Host "Die API kann über http://localhost/api/ angesprochen werden." -ForegroundColor Cyan
Write-Host "`nOpenSSH Server ist aktiviert und wird beim Systemstart automatisch gestartet." -ForegroundColor Cyan
Write-Host "`nZum Beenden der Anwendung verwenden Sie: docker-compose down" -ForegroundColor Yellow