Add Docker setup for containerized deployment

- Dockerfile with nginx:alpine for minimal image size
- docker-compose.yml with container name "mischlabs" on port 8085
- nginx.conf with static asset caching and security headers
- Updated Brain.md with deployment documentation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kroonk
2026-04-12 22:06:00 +02:00
parent bebb6a3028
commit a1a170c1da
5 changed files with 70 additions and 15 deletions

1
.gitignore vendored
View File

@@ -4,3 +4,4 @@ Thumbs.db
*.swo
*~
.vscode/
.claude/

View File

@@ -1,13 +1,14 @@
# Brain.md - Projekt mischlabs.de Landing Page
## Projektziel
Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln mit direkten Verlinkungen anzeigt.
Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln mit direkten Verlinkungen anzeigt. Laeuft als Docker-Container und wird ueber Git auto-deployed.
## Status
- [x] Git-Repo initialisiert und Remote verbunden (https://git.mischlabs.de/MrDiderot/mischlabs.git)
- [x] Dienste-Liste vom Screenshot erfasst
- [x] Dienste-Liste vom Screenshot erfasst (8 Services)
- [x] Landing Page Design und Implementierung (index.html + style.css)
- [ ] Erster Commit + Push
- [x] Docker-Setup (Dockerfile, docker-compose.yml, nginx.conf)
- [ ] Erster Push zum Remote
## Dienste-Uebersicht (8 Stueck)
| # | Subdomain | Beschreibung | Farbe/Accent |
@@ -22,26 +23,43 @@ Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln m
| 8 | docs.mischlabs.de | Dokumentation | #06b6d4 (Cyan) |
## Technische Entscheidungen
- **Reines HTML + CSS** (kein Framework, kein JS noetig) - maximale Performance
- **Reines HTML + CSS** (kein Framework, kein JS) - maximale Performance, minimales Docker-Image
- **nginx:alpine** als Base-Image - extrem leichtgewichtig (~5MB)
- **Google Fonts (Inter)** fuer moderne Typografie
- **Inline SVG Icons** - keine externen Icon-Libraries noetig, kein zusaetzlicher HTTP-Request
- **Inline SVG Icons** - keine externen Dependencies
- **CSS Grid** mit `auto-fill` + `minmax(240px, 1fr)` fuer responsives Layout
- **Dark Theme** mit subtilen Glow-Effekten im Hintergrund
- **Card-Hover-Effekte**: translateY, Box-Shadow, radial-gradient Spotlight
- **Staggered Animations**: Kacheln faden nacheinander ein (fadeInUp)
- **Responsive Breakpoints**: 768px (2 Spalten), 480px (1 Spalte)
- **Dark Theme** mit subtilen Glow-Effekten
- **Staggered Animations**: Kacheln faden nacheinander ein
## Docker-Setup
- **Container-Name**: `mischlabs`
- **Base-Image**: `nginx:alpine`
- **Port-Mapping**: `8085:80` (anpassbar in docker-compose.yml)
- **Restart-Policy**: `unless-stopped`
- **Auto-Update**: Container wird ueber Git-Repo-Aenderungen neu gebaut
- **nginx.conf**: Caching fuer Static Assets (7 Tage), Security-Headers
## Dateistruktur
```
mischlabs/
index.html - Haupt-HTML mit allen 8 Service-Kacheln
style.css - Komplettes Styling (Dark Theme, Grid, Animationen)
Brain.md - Dieses Dokument
Dockerfile - nginx:alpine mit kopierten Static Files
docker-compose.yml - Container-Definition (Name: mischlabs, Port 8085)
nginx.conf - Server-Konfiguration, Caching, Security-Headers
.gitignore - Git-Ausschluesse
Brain.md - Dieses Dokument (KI-Uebergabe)
```
## Deployment-Workflow
1. Code aendern und committen
2. Push zu git.mischlabs.de
3. Auf dem Server: `git pull && docker compose up -d --build`
(oder per Webhook/CI automatisiert)
## Erkenntnisse & Notizen
- Daten stammen aus Caddy/Reverse-Proxy-Konfiguration (Screenshot)
- Alle Dienste laufen auf 192.168.178.88 mit verschiedenen Ports
- Oeffentlich erreichbar ueber *.mischlabs.de Subdomains
- Oeffentlich erreichbar ueber *.mischlabs.de Subdomains (Reverse Proxy)
- Port 8085 gewaehlt da gaengige Ports (80, 8080, 8090) bereits belegt
- Kein JavaScript noetig - pure CSS reicht fuer alle Effekte
- `color-mix()` CSS-Funktion fuer dynamische Icon-Hintergruende basierend auf Accent-Farbe
- `color-mix()` CSS-Funktion fuer dynamische Icon-Hintergruende

7
Dockerfile Normal file
View File

@@ -0,0 +1,7 @@
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY index.html /usr/share/nginx/html/
COPY style.css /usr/share/nginx/html/
EXPOSE 80

7
docker-compose.yml Normal file
View File

@@ -0,0 +1,7 @@
services:
mischlabs:
build: .
container_name: mischlabs
restart: unless-stopped
ports:
- "8085:80"

22
nginx.conf Normal file
View File

@@ -0,0 +1,22 @@
server {
listen 80;
server_name _;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
# Cache static assets
location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
expires 7d;
add_header Cache-Control "public, immutable";
}
# Security headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
}