ドキュメント

Galleria写真ポートフォリオの展開と管理に関する完全なガイド。

はじめに

Galleriaは、React 19、TypeScript、Express 5、およびSQLiteで構築された現代的な写真ポートフォリオウェブサイトです。最適化された画像配信、管理パネル、分析トラッキング、レスポンシブデザインを特徴としています。

クイックリンク

Google OAuth SSO設定

Galleria管理パネルへの安全でパスワードなしの認証のためにGoogle OAuthシングルサインオンを有効にします。

ステップ1: Google Cloudプロジェクトを作成

  1. Google Cloud Consoleに移動
  2. 新しいプロジェクトを作成するか、既存のものを選択
  3. APIとサービス → 認証情報に移動
  4. 認証情報を作成 → OAuthクライアントIDをクリック
  5. プロンプトが表示された場合は、最初にOAuth同意画面を設定します

ステップ2: OAuthクライアントを設定

  1. アプリケーションタイプとしてWebアプリケーションを選択
  2. あなたのドメインを認可されたJavaScriptオリジンに追加:
    https://yourdomain.com
  3. コールバックURLを認可されたリダイレクトURIに追加:
    https://yourdomain.com/api/auth/google/callback
  4. 作成をクリックして認証情報を保存

ステップ3: Galleria設定で構成

  1. Galleria管理パネルにログイン
  2. 設定 → Google OAuthに移動
  3. GoogleクライアントIDを入力してください
  4. Googleクライアントシークレットを入力してください
  5. Google OAuth SSOを有効にするには、保存をクリックしてください

自動ユーザー変換: 一致するメールアドレスを持つ既存のユーザーは、自動的にGoogle OAuth認証に変換されます。OAuthが設定された後、すぐにGoogleでサインインできます。

セキュリティのヒント: 信頼できるメールアドレスのみを管理者ユーザーとして追加してください。初期設定後に管理パネルからユーザーアクセスを管理できます。

OpenObserve Analyticsのセットアップ

OpenObserveは、地理的な強化機能を備えたGalleriaウェブサイトのための強力なログ分析とリアルタイム監視を提供します。

ステップ1: DockerでOpenObserveをインストールする

Docker Composeを使用してOpenObserveを実行します:

ステップ2: サービスアカウントを作成する

  1. http://localhost:5080でOpenObserveにアクセスします
  2. 管理者の資格情報でログインします
  3. 設定 → サービスアカウントに移動します
  4. サービスアカウントを作成をクリックします
  5. 名前を付けます（例: "galleria-analytics"）そして適切な権限を割り当てます
  6. 生成されたAPIトークンをコピーして後で使用します

ステップ 7: Galleria を設定する

  1. Galleria 管理パネルにログインします
  2. 設定 → 分析に移動します
  3. OpenObserve URL を入力します (例: http://localhost:5080)
  4. 組織 ID を入力します
  5. ストリーム名 (ウェブサイト) を入力します
  6. ユーザー名 (ステップ 2 から) を入力します
  7. パスワード (ステップ 2 からのサービスアカウントトークン) を入力します
  8. 保存をクリックして OpenObserve 分析を有効にします

成功！ あなたの分析には、すべての訪問者の都市、地域、国、ISP、および座標を含む地理的に強化されたデータが含まれるようになります。

ハードウェアビデオエンコーディング

Galleria は、GPU を使用して 5-10 倍速いビデオ処理のためのハードウェアアクセラレーションビデオエンコーディングをサポートしています。

サポートされているハードウェア

NVIDIA GPU (NVENC)

Docker およびネイティブサポート

Intel Quick Sync (QSV)

ネイティブサポートのみ

AMD GPU（AMF）

ネイティブサポートのみ

Apple VideoToolbox

macOSネイティブのみ

ハードウェアエンコーディングを有効にする

  1. 管理パネル → 設定 → 動画品質に移動
  2. 「ハードウェアトランスコーディング」を有効に切り替える
  3. 動画処理は、利用可能な場合にGPUアクセラレーションを使用します

本番デプロイメント

PM2を使用する

Dockerなしでの本番デプロイメントの場合：

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

自動デプロイメント：マスターブランチにプッシュすると、GitHub Actionsが自動的に変更をデプロイします。

このドキュメントを改善する手助けをしてください

エラーを見つけた、またはドキュメントに貢献したいですか？貢献を歓迎します！

GitHubで貢献する