tomasz-syn-grzegorza
808c39d838
Separate container name and port 8081 for parallel dev, add docker-compose.dev.yml with volume mounts, and point Dokploy example to site-agencja-ai-com Gitea repo. Co-authored-by: Cursor <cursoragent@cursor.com>
60 lines
2.8 KiB
Markdown
60 lines
2.8 KiB
Markdown
# 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-agencja-ai-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-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/tomasz-syn-grzegorza/Pulpit/cursor/site-agencja-ai-com/
|
|
docker compose up -d --build
|
|
# Strona na http://localhost:${FRONTEND_PORT} (domyślnie 8081)
|
|
```
|
|
|
|
### 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)
|