tomasz-syn-grzegorza
d565f83490
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
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:
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:
- Nowa aplikacja → wklej zawartość
docker-compose-example/docker-compose.yml - Wklej
.envz tego samego katalogu (ustawFRONTEND_PORTjeśli potrzebny) - Ustaw FQDN w UI (np.
agencja-ai.com) - 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
- Obraz tła od startu - Lokalny JPG widoczny od pierwszej klatki; loader znika po załadowaniu obrazka
- Intro wideo YouTube - Standardowy embed YouTube (
kujXXtoHUbc) jako nakładka po załadowaniu playera - Po zakończeniu filmu - Warstwa wideo znika, obraz JPG zostaje
- Safety timeout 15s - Jeśli YouTube nie załaduje się w czasie → strona zostaje na obrazku tła
Modyfikacja
- Inny film: zmień
VIDEO_IDwindex.html - Inny port hosta: zmień
FRONTEND_PORTw.env(nginx w kontenerze zostaje na porcie 80)