Dokumentasyon

Kumpletong gabay sa pag-deploy at pamamahala ng iyong Galleria photography portfolio.

Pagsisimula

Ang Galleria ay isang modernong photography portfolio website na itinayo gamit ang React 19, TypeScript, Express 5, at SQLite. Ito ay nagtatampok ng optimized na paghahatid ng larawan, admin panel, analytics tracking, at responsive na disenyo.

Mabilis na Mga Link

Google OAuth SSO Setup

I-enable ang Google OAuth Single Sign-On para sa ligtas, walang password na pagpapatotoo sa iyong Galleria admin panel.

Hakbang 1: Lumikha ng Google Cloud Project

  1. Pumunta sa Google Cloud Console
  2. Lumikha ng bagong proyekto o pumili ng umiiral na isa
  3. Pumunta sa APIs & Services → Credentials
  4. I-click ang Lumikha ng Credentials → OAuth client ID
  5. Kung hinihiling, i-configure muna ang OAuth consent screen

Hakbang 2: I-configure ang OAuth Client

  1. Pumili ng Web application bilang uri ng aplikasyon
  2. Idagdag ang iyong domain sa Authorized JavaScript origins:
    https://yourdomain.com
  3. Idagdag ang callback URL sa Authorized redirect URIs:
    https://yourdomain.com/api/auth/google/callback
  4. I-click ang Lumikha at i-save ang iyong credentials

Hakbang 3: I-configure sa Galleria Settings

  1. Mag-log in sa iyong Galleria admin panel
  2. Pumunta sa Settings → Google OAuth
  3. Ilagay ang iyong Google Client ID
  4. Ilagay ang iyong Google Client Secret
  5. I-click ang I-save upang paganahin ang Google OAuth SSO

Awtomatikong Pag-convert ng User: Ang mga umiiral na user na may katugmang email address ay awtomatikong iko-convert sa Google OAuth authentication. Maaari silang mag-sign in gamit ang Google kaagad pagkatapos ma-configure ang OAuth.

Tip sa Seguridad: Magdagdag lamang ng mga pinagkakatiwalaang email address bilang mga admin user. Maaari mong pamahalaan ang access ng user mula sa admin panel pagkatapos ng paunang setup.

Setup ng OpenObserve Analytics

Nagbibigay ang OpenObserve ng makapangyarihang log analytics at real-time monitoring para sa iyong Galleria website na may kakayahang geo-enrichment.

Hakbang 1: I-install ang OpenObserve gamit ang Docker

Patakbuhin ang OpenObserve gamit ang Docker Compose:

Hakbang 2: Lumikha ng Service Account

  1. Access OpenObserve sa http://localhost:5080
  2. Mag-log in gamit ang iyong admin credentials
  3. Pumunta sa Settings → Service Accounts
  4. I-click ang Lumikha ng Service Account
  5. Bigyan ito ng pangalan (hal., "galleria-analytics") at magtalaga ng angkop na mga pahintulot
  6. Kopyahin ang nabuo na API token para sa susunod na paggamit

Hakbang 7: I-configure ang Galleria

  1. Mag-log in sa iyong Galleria admin panel
  2. Pumunta sa Mga Setting → Analytics
  3. Ilagay ang iyong OpenObserve URL (hal., http://localhost:5080)
  4. Ilagay ang iyong Organization ID
  5. Ilagay ang iyong Stream Name (website)
  6. Ilagay ang iyong Username (mula sa Hakbang 2)
  7. Ilagay ang iyong Password (ang service account token mula sa Hakbang 2)
  8. I-click ang I-save upang paganahin ang OpenObserve analytics

Tagumpay! Ang iyong analytics ay ngayon isasama ang geo-enriched data na may lungsod, rehiyon, bansa, ISP, at mga coordinate para sa lahat ng bisita.

Hardware Video Encoding

Sinusuportahan ng Galleria ang hardware-accelerated video encoding para sa 5-10x na mas mabilis na pagproseso ng video gamit ang iyong GPU.

Sinusuportahang Hardware

NVIDIA GPUs (NVENC)

Docker at katutubong suporta

Intel Quick Sync (QSV)

Katutubong suporta lamang

AMD GPUs (AMF)

Tanging katutubong suporta

Apple VideoToolbox

Tanging katutubong macOS

I-enable ang Hardware Encoding

  1. Pumunta sa Admin Panel → Mga Setting → Kalidad ng Video
  2. I-toggle ang "Hardware Transcoding" sa enabled
  3. Gagamitin na ngayon ng pagproseso ng video ang GPU acceleration kapag available

Deployment ng Produksyon

Gamit ang PM2

Para sa deployment ng produksyon nang walang Docker:

npm run build
npm install -g pm2
pm2 start ecosystem.config.cjs
pm2 save
pm2 startup

Automated Deployment: Itulak sa master branch at awtomatikong ide-deploy ng GitHub Actions ang iyong mga pagbabago.

Tumulong na Pagbutihin ang Dokumentasyong Ito

Nakatagpo ng error o nais makapag-ambag sa dokumentasyon? Tinatanggap namin ang mga kontribusyon!

Mag-ambag sa GitHub