From a1a170c1da32a46d7d5c5667945cc21c5a016d71 Mon Sep 17 00:00:00 2001 From: Kroonk Date: Sun, 12 Apr 2026 22:06:00 +0200 Subject: [PATCH] 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 --- .gitignore | 1 + Brain.md | 48 +++++++++++++++++++++++++++++++--------------- Dockerfile | 7 +++++++ docker-compose.yml | 7 +++++++ nginx.conf | 22 +++++++++++++++++++++ 5 files changed, 70 insertions(+), 15 deletions(-) create mode 100644 Dockerfile create mode 100644 docker-compose.yml create mode 100644 nginx.conf diff --git a/.gitignore b/.gitignore index 42d6a8a..4e8a65e 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ Thumbs.db *.swo *~ .vscode/ +.claude/ diff --git a/Brain.md b/Brain.md index 7c97cc6..5e6b081 100644 --- a/Brain.md +++ b/Brain.md @@ -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 + index.html - Haupt-HTML mit allen 8 Service-Kacheln + style.css - Komplettes Styling (Dark Theme, Grid, Animationen) + 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 diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..d28f5e8 --- /dev/null +++ b/Dockerfile @@ -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 diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..1cc60a0 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,7 @@ +services: + mischlabs: + build: . + container_name: mischlabs + restart: unless-stopped + ports: + - "8085:80" diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..af61719 --- /dev/null +++ b/nginx.conf @@ -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; +}