init: static frontend for agency-ai.dev — nginx + YouTube intro video

Static landing page served via nginx 1.27 Alpine container. Features: - Fullscreen background image visible from first paint - YouTube intro video overlay (iframe API, lazy loaded) - PWA manifest with favicons (48x48, 180x180, 512x512) - SEO meta tags (OG, Twitter Cards, canonical URL) - Safety timeout: falls back to static image if YouTube fails Infrastructure: - Dockerfile: nginx 1.27 Alpine with custom default.conf (gzip, cache headers, security headers X-Frame-Options/nosniff) - docker-compose.yml: local dev on FRONTEND_PORT (default 8080) - docker-compose-example/: Dokploy deployment via runtime git clone from Gitea, resource limits (256M RAM, 0.5 CPU) Files: - index.html: main page with inline CSS + JS (YouTube iframe API) - default.conf: nginx config (gzip, caching, security headers) - site.webmanifest: PWA manifest - assets/imgs/: background image + favicons - .env.example: FRONTEND_PORT template
2026-06-26 08:55:39 +00:00
commit d565f83490
15 changed files with 495 additions and 0 deletions
@@ -0,0 +1,9 @@
+# Agencja AI — Environment Configuration (Dokploy)
+# Copy to .env before deploy if needed.
+# Never commit .env with real credentials to version control.
+
+# --- Frontend Server ---
+# Port publikowany na hoście. W kontenerze nginx zawsze nasłuchuje na 80.
+# Mapowanie w docker-compose.yml: ${FRONTEND_PORT}:80
+# Dokploy/Traefik dodatkowo routuje po FQDN do wewnętrznego portu 80 kontenera.
+FRONTEND_PORT=8080
@@ -0,0 +1,59 @@
+# Agencja AI - Frontend (Dokploy Deployment)
+
+Strona internetowa ze statycznym obrazem tła od pierwszej klatki i krótkim intro wideo streamowanym z YouTube (bez widocznych ramek playera) po załadowaniu.
+
+## Struktura projektu
+
+```
+site-agency-ai-dev/
+├── docker-compose.yml                    # Lokalny dev (build: context .)
+├── Dockerfile                            # Kontener nginx 1.27 Alpine
+├── default.conf                          # Konfiguracja nginx
+├── index.html                            # Strona ze streamem YouTube
+├── assets/imgs/www-bg-agencja-ai-com-001.jpg  # Obraz tła (367 KB)
+├── assets/imgs/favico/                   # Favicony (48, 180, 512 px)
+├── site.webmanifest                      # Manifest PWA / Android
+├── .dockerignore                         # Ignorowane pliki przy budowie
+├── .gitignore                            # Git ignore
+└── docker-compose-example/               # Pliki deploymentowe Dokploy
+    ├── docker-compose.yml                # Dokploy: image + git clone
+    ├── .env                              # Wymagany przez Dokploy (pusty)
+    └── README.md                         # Ten plik
+```
+
+## Dwa podejścia do deployu
+
+### 1. Lokalny development (docker-compose.yml w root)
+
+Używa `build:` z Dockerfile — buduje obraz lokalnie. Port hosta ustawiasz w `.env`:
+
+```bash
+cp .env.example .env   # opcjonalnie zmień FRONTEND_PORT
+cd /home/m3gan/.hermes/agencja-ai-com/site-agency-ai-dev/
+docker compose up -d --build
+# Strona na http://localhost:${FRONTEND_PORT}  (domyślnie 8080)
+```
+
+### 2. Dokploy deployment (docker-compose-example/)
+
+Używa `image:` + runtime git clone — nie wymaga lokalnego build contextu, bo Dokploy kopiuje tylko `docker-compose.yml` i `.env` na serwer.
+
+**Kroki w Dokploy UI:**
+1. Nowa aplikacja → wklej zawartość `docker-compose-example/docker-compose.yml`
+2. Wklej `.env` z tego samego katalogu (ustaw `FRONTEND_PORT` jeśli potrzebny)
+3. Ustaw FQDN w UI (np. `agencja-ai.com`)
+4. Deploy
+
+**Porty:** `FRONTEND_PORT` z `.env` mapuje port hosta na nginx w kontenerze (`${FRONTEND_PORT}:80`). Wewnątrz kontenera nginx zawsze nasłuchuje na porcie 80 (`default.conf`). Dokploy/Traefik routuje po FQDN do tego samego wewnętrznego portu 80.
+
+## Jak to działa
+
+1. **Obraz tła od startu** - Lokalny JPG widoczny od pierwszej klatki; loader znika po załadowaniu obrazka
+2. **Intro wideo YouTube** - Standardowy embed YouTube (`kujXXtoHUbc`) jako nakładka po załadowaniu playera
+3. **Po zakończeniu filmu** - Warstwa wideo znika, obraz JPG zostaje
+4. **Safety timeout 15s** - Jeśli YouTube nie załaduje się w czasie → strona zostaje na obrazku tła
+
+## Modyfikacja
+
+- **Inny film:** zmień `VIDEO_ID` w `index.html`
+- **Inny port hosta:** zmień `FRONTEND_PORT` w `.env` (nginx w kontenerze zostaje na porcie 80)
@@ -0,0 +1,47 @@
+# ============================================================
+# Agencja AI - Docker Compose (Dokploy / manual)
+# ============================================================
+# Dokploy-compatible pattern: uses pre-built image + runtime git clone.
+# Dokploy only copies docker-compose.yml + .env to the server, so local
+# build context with a Dockerfile does not work. This approach matches
+# other working apps on our servers (e.g. wdj-hermes-frontend-matrix).
+#
+# Port hosta: FRONTEND_PORT z .env (domyślnie 8080) → nginx w kontenerze na porcie 80.
+# Dokploy/Traefik routuje po FQDN do wewnętrznego portu 80 kontenera.
+# ============================================================
+
+services:
+  frontend:
+    image: nginx:1.27-alpine
+    container_name: agencja-ai-frontend
+    restart: unless-stopped
+    ports:
+      - "${FRONTEND_PORT:-8080}:80"
+
+    command: >
+      sh -c "
+        apk add --no-cache git &&
+        rm -rf /app &&
+        git clone https://gitea.expert-it.agency-ai.dev/tomasz-syn-grzegorza/site-agency-ai-dev.git /app &&
+        cp /app/index.html /usr/share/nginx/html/index.html &&
+        cp /app/site.webmanifest /usr/share/nginx/html/site.webmanifest &&
+        cp -r /app/assets /usr/share/nginx/html/assets &&
+        rm /etc/nginx/conf.d/default.conf &&
+        cp /app/default.conf /etc/nginx/conf.d/default.conf &&
+        nginx -g 'daemon off;'
+      "
+
+    healthcheck:
+      test: ["CMD", "wget", "-qO-", "http://127.0.0.1:80/"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 45s
+
+    deploy:
+      resources:
+        limits:
+          memory: 256M
+          cpus: "0.5"
+        reservations:
+          memory: 64M