Projektarbeit-MYP/frontend/PRODUCTION_DEPLOYMENT.md

MYP Frontend Produktions-Deployment

Übersicht

Das Frontend läuft jetzt auf Port 80/443 mit selbstsigniertem Zertifikat über Caddy als Reverse Proxy. Port 3000 wurde komplett entfernt.

Architektur

Internet/LAN → Caddy (Port 80/443) → Next.js Frontend (Port 80) → Backend API (raspberrypi:443)

Deployment

Schnellstart

cd frontend
./deploy-production.sh

Manuelles Deployment

cd frontend

# Container stoppen
docker-compose -f docker-compose.production.yml down

# Neu bauen und starten
docker-compose -f docker-compose.production.yml up --build -d

# Status prüfen
docker-compose -f docker-compose.production.yml ps

# Logs anzeigen
docker-compose -f docker-compose.production.yml logs -f

Konfiguration

SSL-Zertifikate

• Automatisch generiert: Caddy generiert automatisch selbstsignierte Zertifikate
• Speicherort: ./certs/ (wird automatisch erstellt)
• Konfiguration: tls internal in der Caddyfile

Ports

• HTTP: Port 80
• HTTPS: Port 443
• Frontend intern: Port 80 (nicht nach außen exponiert)

Backend-Verbindung

• Backend URL: https://raspberrypi:443
• API Prefix: /api/* wird an Backend weitergeleitet
• Health Check: /health wird an Backend weitergeleitet

Dateien

Wichtige Konfigurationsdateien

• docker-compose.production.yml - Produktions-Docker-Konfiguration
• docker/caddy/Caddyfile - Caddy Reverse Proxy Konfiguration
• Dockerfile - Frontend Container (Port 80)
• next.config.js - Next.js Konfiguration (SSL entfernt)

Verzeichnisstruktur

frontend/
├── certs/                          # SSL-Zertifikate (automatisch generiert)
├── docker/
│   └── caddy/
│       └── Caddyfile              # Caddy Konfiguration
├── docker-compose.production.yml  # Produktions-Deployment
├── deploy-production.sh           # Deployment-Script
├── Dockerfile                     # Produktions-Container
└── next.config.js                # Next.js Konfiguration

Troubleshooting

Container Status prüfen

docker-compose -f docker-compose.production.yml ps

Logs anzeigen

# Alle Logs
docker-compose -f docker-compose.production.yml logs -f

# Nur Frontend
docker-compose -f docker-compose.production.yml logs -f frontend

# Nur Caddy
docker-compose -f docker-compose.production.yml logs -f caddy

SSL-Zertifikate neu generieren

# Container stoppen
docker-compose -f docker-compose.production.yml down

# Caddy Daten löschen
docker volume rm frontend_caddy_data frontend_caddy_config

# Neu starten
docker-compose -f docker-compose.production.yml up --build -d

Container neu bauen

# Alles stoppen und entfernen
docker-compose -f docker-compose.production.yml down --volumes --remove-orphans

# Images entfernen
docker rmi frontend_frontend frontend_caddy

# Neu bauen
docker-compose -f docker-compose.production.yml up --build -d

Sicherheit

HTTPS-Header

Caddy setzt automatisch sichere HTTP-Header:

• Strict-Transport-Security
• X-Content-Type-Options
• X-Frame-Options
• Referrer-Policy

Netzwerk-Isolation

• Frontend und Caddy laufen in eigenem Docker-Netzwerk
• Nur Ports 80 und 443 sind nach außen exponiert
• Backend-Verbindung über gesichertes HTTPS

Offline-Betrieb

Das Frontend ist für Offline-Betrieb konfiguriert:

• Keine externen Dependencies zur Laufzeit
• Alle Assets sind im Container enthalten
• Selbstsignierte Zertifikate benötigen keine externe CA