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:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -4,3 +4,4 @@ Thumbs.db
|
||||
*.swo
|
||||
*~
|
||||
.vscode/
|
||||
.claude/
|
||||
|
||||
44
Brain.md
44
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
|
||||
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
7
Dockerfile
Normal 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
7
docker-compose.yml
Normal file
@@ -0,0 +1,7 @@
|
||||
services:
|
||||
mischlabs:
|
||||
build: .
|
||||
container_name: mischlabs
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "8085:80"
|
||||
22
nginx.conf
Normal file
22
nginx.conf
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user