Clash Master: OpenClashトラフィック管理のためのモダンなダッシュボード

OpenClashは、ルーター上でVPNや広告ブロックトラフィックを管理するための人気のプロキシ/ルーターソリューションです。バックエンドAPIは生データを提供しますが、直感的なビジュアルインターフェースがありません。

Clash Masterにようこそ – Next.js、React 19、TypeScript、Tailwind CSS、そして Node.js データコレクタで構築されたモダンなオープンソースダッシュボードです。以下の機能を提供します：

リアルタイムトラフィックチャート（帯域幅、レイテンシ、地域）
インタラクティブなルール統計とページネーション
デバイス、IP、ドメインの洞察
WebSocket駆動のリアルタイム更新
Dockerフレンドリーなデプロイ
マルチアーキテクチャイメージ（amd64 & arm64）
SQLiteによる簡単なデータ永続化

なぜClash Masterを使うのか？

機能	メリット
Web UI + API	フロントエンドは同じドメインでデータにアクセスできる – 追加ポート不要
WebSocket	ポーリングなしでダッシュボードを即時更新
Docker Compose	ゼロ設定、プラグアンドプレイデプロイ
データコレクタ	別のマイクロサービスとして稼働し、UIを軽量に保つ
CLIスクリプト	`setup.sh` がポート競合を自動検出し、必要な `docker-compose.yml` を生成します

Docker Composeでのクイックスタート（推奨）

以下の内容で docker-compose.yml ファイルを作成してください。

services:
  clash-master:
    image: foru17/clash-master:latest
    container_name: clash-master
    restart: unless-stopped
    ports:
      - "3000:3000"  # Web UI
      - "3001:3001"  # API (optional)
      - "3002:3002"  # WebSocket (optional)
    volumes:
      - ./data:/app/data
    environment:
      - NODE_ENV=production

実行してください。

docker compose up -d

ブラウザで http://localhost:3000 を開きます。
最初の訪問時に、OpenClashのバックエンド（IP、ポート、オプションのトークン）を追加するように求められます。保存後、コレクタがデータ収集を開始します。

1クリックで実行できるスクリプト（単一コマンド）

curl -fsSL https://raw.githubusercontent.com/foru17/clash-master/main/setup.sh | bash

スクリプトは以下の動作を行います：

用意された docker-compose.yml をダウンロードします。
デフォルトポート3000/3001/3002の競合をチェックします。
必要に応じて代替ポートを提案します。
設定ファイルを作成し、コンテナを起動します。

ソースからの実行（開発）

git clone https://github.com/foru17/clash-master.git
cd clash-master
pnpm install
pnpm dev

ブラウザで http://localhost:3000 を開きます – 開発サーバが変更を監視します。

ポート競合の解決

ポートは既に使用中のエラーが発生した場合：

.env ファイルを作成します。

WEB_EXTERNAL_PORT=8080
API_EXTERNAL_PORT=8081
WS_EXTERNAL_PORT=8082

スタックを再起動します。

docker compose down
docker compose up -d

http://localhost:8080 をブラウズします。

代替案：`docker-compose.yml` を編集

ports:
  - "8080:3000"
  - "8081:3001"
  - "8082:3002"

データ永続化およびバックアップ

コレクタは ./data/stats.db に統計を保存します。バックアップするには：

cp -r ./data ./data-backup-$(date +%Y%m%d)

履歴をクリアするには、UIの「データベース」タブを使って指定された日付以前のエントリを削除します。

FAQ：よくある質問のハイライト

ポート競合？ .env または docker-compose.yml を調整してください。
APIアクセス？ ポート3001を公開するか、API_URL 環境変数を設定します。
WebSocket？ ポート3002を公開するか、WS_URL 環境変数を設定します。
OpenClashへの接続？ ルーターの External Control が有効になっていることと、トークン（使用する場合）が一致していることを確認してください。

結論

Clash Masterは、生のOpenClashメトリクスをインタラクティブで開発者向けのダッシュボードに変換します。ネットワーク管理者でもホビイストでも、最新ツール、高いDocker互換性、堅牢なデータ収集機能の組み合わせにより、どのプラットフォームでもVPNトラフィックを視覚化するための最適解となります。

Tip: GitHubでプロジェクトにスターを付けてください – 無料で、アクティブな開発維持に役立ちます。