2026年5月5日

【第3回】プライバシー重視のセルフホスト：UmamiとCusdisで作るアクセス解析＆コメント基盤

このHPはアフィリエイトプログラムでの収益を得ています。

ブログを運営する上で欠かせない「アクセス解析」と「コメント機能」。便利ですが、外部サービスを利用すると読者のデータが第三者に渡ってしまう懸念があります [cite: 31]。

今回は、プライバシーを最優先し、全てのデータを自宅サーバー内で管理するためのセルフホスト構成をご紹介します [cite: 31, 353]。

1. アクセス解析：Umamiの構築

Google Analyticsの代替として、軽量でプライバシー重視の「Umami」を採用しました [cite: 31]。データベースにはPostgreSQLを使用します [cite: 50]。

Docker Compose設定

docker-compose.yml で解析アプリとDBを定義します [cite: 50]。解析対象のサイトとDBは専用の内部ネットワークで隔離し、セキュリティを確保しています [cite: 50]。

services:
  umami-app:
    image: ghcr.io/umami-software/umami:postgresql-latest [cite: 50]
    container_name: umami-app [cite: 50]
    environment:
      - DATABASE_URL=postgresql://user:pass@umami-db:5432/umami [cite: 49]
      - APP_SECRET=dummy_secret_string [cite: 49]
    networks:
      - proxy_net [cite: 50]
      - umami_db_net [cite: 50]
    restart: always [cite: 50]

  umami-db:
    image: postgres:15-alpine [cite: 50]
    container_name: umami-db [cite: 50]
    environment:
      - POSTGRES_USER=user [cite: 61]
      - POSTGRES_PASSWORD=pass [cite: 61]
    volumes:
      - ./db-data:/var/lib/postgresql/data [cite: 50]
    networks:
      - umami_db_net [cite: 50]
    restart: always [cite: 50]

2. コメントシステム：Cusdisの構築

コメント機能も「Cusdis」を使ってセルフホストします [cite: 353]。GitHub等の外部アカウントに依存せず、自分のサイト内だけでコメントを表示・管理できるのがメリットです [cite: 352, 353]。

環境変数のポイント

CusdisはNext.jsベースのため、リバースプロキシ環境下では認証URLの設定が重要です [cite: 360, 376]。

environment:
  - DB_TYPE=pgsql [cite: 371]
  - DB_URL=postgresql://user:pass@cusdis-db:5432/cusdis [cite: 360]
  - NEXTAUTH_URL=[https://comments.example.com](https://comments.example.com) [cite: 360]
  - USERNAME=admin [cite: 360]
  - PASSWORD=dummy_password [cite: 360]

3. Nginxでのルーティング

各サービスをサブドメインで運用するため、Nginxでリバースプロキシ設定を行います [cite: 89, 505]。特にモダンなWebアプリをCloudflare Tunnel経由で公開する場合、プロトコルを https に固定することでリダイレクトループを防げます [cite: 85, 510]。

# comments.example.com の設定例
location / {
    proxy_pass http://cusdis-app:3000; [cite: 509]
    proxy_set_header Host $host; [cite: 510]
    proxy_set_header X-Forwarded-Proto https; [cite: 510]
}

4. Astro.jsへの統合

構築した各サービスをAstroブログに組み込みます。全ページ共通の <head> コンポーネントにトラッキングコードやスクリプトを挿入します [cite: 380, 521]。

解析コードの埋め込み

<script defer src="[https://analytics.example.com/script.js](https://analytics.example.com/script.js)" data-website-id="your-uuid"></script> [cite: 380]

コメントウィジェット

記事詳細ページ（BlogPost.astro）の最下部に設置します [cite: 458]。ダークモードに対応させるため、data-theme="auto" を付与し、Astro側のテーマ切り替えと連動するスクリプトを記述しました [cite: 521, 522]。

まとめ

セルフホスト構成にすることで、以下のような理想的な環境が手に入りました。

データの完全所有: アクセスログも読者のコメントも、全て自分のサーバー内に保存されます [cite: 31, 353]。
広告なし・軽量: 外部ウィジェットによる不要なスクリプト読み込みを抑え、パフォーマンスを維持できます [cite: 31]。
インフラSEの醍醐味: Dockerネットワークやリバースプロキシの高度な制御を実践的に学べます [cite: 30, 122]。

自前の「城」をさらに強固にカスタマイズしていく過程は、エンジニアとして非常に楽しいものです。皆さんもぜひ挑戦してみてください。

🏷️ タグ:

#Ubuntu #Docker #Umami #Cusdis #PostgreSQL #Nginx #インフラ