site-slavic-pulse-com/docker-compose-example

Slavic Pulse - 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-slavic-pulse-com/
├── 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-slavic-pulse-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/tomasz-syn-grzegorza/Pulpit/cursor/site-slavic-pulse-com/
docker compose up -d --build
# Strona na http://localhost:${FRONTEND_PORT}  (domyślnie 8082)

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. slavic-pulse.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)