TDvorak/Reklik
1
0
Fork 0
mirror of https://github.com/Dvorinka/reklik.git synced 2026-06-03 20:02:57 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
608cd35278198d7dc69a4cfd6855288ecc06d3a6
Reklik/overiew.md
T
Your Name 608cd35278 monitoring
2026-04-13 21:24:49 +02:00

8.2 KiB
Raw Blame History

Maturitní projekt — Web pro Reklik

Název projektu: Reklik (firemní web + self‑hosted galerie)

Autor: Tomáš Dvořák

Repozitář: https://github.com/Dvorinka/reklik

Live demo / doména galerie: https://foto.reklik.net (self‑hosted galerie běžící na serveru s io200)

1. Přehled (Overview)

Cílem maturitního projektu je vytvořit moderní, responzivní web pro fotografické studio Reklik s vlastním řešením galerie hostovaným na interním serveru. Projekt obsahuje:

  • statický / dynamický frontend (HTML, CSS, JavaScript) pro prezentaci firmy, portfolia a kontaktů;
  • self‑hosted galerii (io200) běžící na Ubuntu/Proxmox serveru a dostupnou přes zabezpečený Cloudflare tunnel (cloudflared) bez potřeby port‑forwardingu;
  • backend / server konfiguraci (Apache2, PHP, MariaDB) pro případné CMS nebo dynamický obsah;
  • konfigurace domén a reverzního tunelu (cloudflared) pro bezpečné vystavení interní služby ven.

Tento dokument slouží jako technická dokumentace: popis architektury, nasazení, konfigurace serveru, závislosti a doporučení pro další rozvoj.

2. Technologie a stack

  • Frontend: HTML5, CSS3 (v projektu může být použit Tailwind / vlastní CSS podle repozitáře), Vanilla JavaScript
  • Galerie: io200 (self‑hosted), viz https://www.io200.com/
  • Web server: Apache2
  • PHP: pro případné malé CMS nebo API integrace
  • Databáze: MariaDB (pokud bude potřeba ukládat metadata)
  • Tunelování: Cloudflare Tunnel (cloudflared) — origin tunnel, žádné port‑forwarding
  • Host: vlastní server ve vnitřní síti (Proxmox VM / Ubuntu)

3. Architektura / komponenty

  1. Frontend repository — https://github.com/Dvorinka/reklik

    • statické soubory v /var/www/html (nebo podle DocumentRoot v konfiguraci Apache)
    • struktura složek: css/, js/, img/, assets/, pages/ atd. (podrobnosti viz repozitář)

  2. Galerie (io200)

    • běží v Ubuntu VM (Proxmox)
    • nainstalováno podle oficiálního instalačního manuálu io200: https://www.io200.com/documentation#installation-manual
    • nasazeno na lokální IP 192.168.0.185 (v uvedeném příkladu)

  3. Cloudflared tunneling

    • tunel vytváří zabezpečené spojení mezi Cloudflare a lokálním serverem, takže není třeba otevírat porty směrem z internetu
    • konfigurace tunelu je uložena v /etc/cloudflared/config.yml

  4. Apache virtual host

    • nastavení ServerName a DocumentRoot + AllowOverride All pro běh webu a .htaccess

4. Serverové konfigurace (ukázky)

Apache (příklad /etc/apache2/sites-available/000-default.conf)

<VirtualHost *:80>
    ServerName foto.reklik.net
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    <Directory /var/www/html>
        AllowOverride All
    </Directory>

</VirtualHost>

Poznámka: AllowOverride All umožní použít .htaccess soubory — používejte opatrně a zabezpečte, co je třeba.

cloudflared config (/etc/cloudflared/config.yml)

tunnel: 252cbbd8-f381-44d5-b201-0c50aea274b9
credentials-file: /root/.cloudflared/252cbbd8-f381-44d5-b201-0c50aea274b9.json

ingress:
  - hostname: foto.reklik.net
    service: http://localhost:80
    originRequest:
      noTLSVerify: true
      headers:
        Host: foto.reklik.net
        X-Forwarded-Proto: https
  - service: http_status:404

Poznámka: noTLSVerify: true znamená, že cloudflared nebude validovat certifikát backendu. To bývá užitečné pro lokální interní služby, ale pokud je možné, doporučuji nasadit správný TLS certifikát v Apache a vypnout noTLSVerify.

5. Instalace a nasazení — krok za krokem (dodatek pro správce)

Předpoklady (server)

  • Ubuntu (na VM nebo fyzickém stroji)
  • Sudo/root přístup
  • Proxmox (pokud používáte VM)
  • Cloudflare konto a doména s přidaným DNS záznamem (CNAME/Hostname pro tunel)

1) Apache + PHP + MariaDB

sudo apt update && sudo apt upgrade -y
sudo apt install apache2 php libapache2-mod-php mariadb-server php-mysql -y
sudo systemctl enable --now apache2
sudo systemctl enable --now mariadb

Konfigurujte databázi podle potřeby (pokud je potřeba metadata galerie):

sudo mysql_secure_installation
# vytvoření DB a uživatele
mysql -u root -p
CREATE DATABASE reklik_db;
CREATE USER 'reklik'@'localhost' IDENTIFIED BY 'sileheslo';
GRANT ALL PRIVILEGES ON reklik_db.* TO 'reklik'@'localhost';
FLUSH PRIVILEGES;
EXIT;

2) Deploy frontendu

  • Klonujte repozitář do /var/www/html nebo jiného DocumentRoot
cd /var/www
sudo rm -rf html/*
sudo git clone https://github.com/Dvorinka/reklik.git html
sudo chown -R www-data:www-data /var/www/html
  • Pokud používáte build step (npm, webpack), proveďte build lokálně nebo na serveru podle README v repozitáři.

3) Instalace a konfigurace cloudflared

Postup (shrnutí):

  • Stáhnout a nainstalovat cloudflared podle oficiálního návodu.
  • Přihlásit tunel k Cloudflare: cloudflared tunnel login a následně cloudflared tunnel create <name>.
  • Vygenerovat config.yml jako výše a spustit službu jako systemd nebo pomocí cloudflared service install.

Po instalaci ověřte status:

sudo systemctl status cloudflared

4) io200 galerie — instalační shrnutí

  • Postupujte podle oficiální dokumentace: https://www.io200.com/documentation#installation-manual
  • Doporučené nastavení: nasadit io200 do samostatného adresáře v /var/www/io200 nebo jako samostatný virtuální host.
  • Ujistěte se, že galerií vytvořená metadata a obrázky mají správná práva (www-data).

6. Bezpečnostní doporučení

  • Používejte HTTPS: i když Cloudflare poskytuje TLS mezi klientem a Cloudflare, zvažte povolení TLS mezi cloudflared a backend (vypnout noTLSVerify po nasazení certifikátu na Apache).
  • Pravidelné zálohy: zálohujte soubory /var/www, DB (pokud existuje) a složku s obrázky (galerie).
  • Omezit přístup k administraci galerie pomocí základní autentizace nebo IP‑whitelistu.
  • Aktualizace systému a balíčků (security updates).
  • Pokud používáte .htaccess, zkontrolujte pravidla, aby neumožňovala nahrávání škodlivých souborů.

7. Testování a nasazení (kontrola)

  • Po nasazení frontend projektu ověřit:

    • responzivitu (mobil / tablet / desktop)
    • rychlost načítání (optimalizace obrázků)
    • funkčnost galerie (nahrávání, prohlížení, kategorizace)

  • Ověřit logs: /var/log/apache2/error.log a access.log a logy cloudflared (journalctl -u cloudflared)

8. Známé chyby / omezení

  • cloudflared noTLSVerify: true — bezpečnostní riziko v případě MITM v síti; doporučeno robustnější TLS nastavení.
  • Omezené systémové zdroje (4GB RAM, 2 vCPU) — při velkém provozu může být potřeba zvýšit kapacity.
  • Pokud se galerie nebo web stane náročným (mnoho současných uživatelů a vysoké I/O), zvažte oddělení galerie na vlastní VM a použití CDN pro statické assety.

9. Možné rozšíření (Future work)

  • Přidat administrátorské rozhraní pro nahrávání a správu galerií (pokud io200 nepokrývá požadavky)
  • Optimalizace obrázků (generování více rozlišení, lazy loading)
  • Integrace jednoduchého CMS pro správu textů na stránce
  • Monitoring a alerting (Prometheus, Grafana nebo jednoduché health checks)
  • CI/CD pipeline pro automatické nasazení při push na GitHub

10. Kontakty a další zdroje

  • Repo: https://github.com/Dvorinka/reklik
  • Oficiální dokumentace io200: https://www.io200.com/documentation#installation-manual
  • Cloudflared docs: viz dokumentace Cloudflare Tunnel

Pokud chceš, mohu do dokumentace přidat konkrétní části z repozitáře (stručný popis struktury složek, použitých knihoven, nebo příklady kódu), nebo vytvořit README.md přímo v repozitáři připravený k nasazení. Stačí poslat další podklady a doplním to.

Reference in New Issue View Git Blame Copy Permalink