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を使うのか？

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

1. 以下の内容で 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
   

2. 実行してください。

   docker compose up -d
   

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

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

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

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

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

ポート競合の解決

ポートは既に使用中のエラーが発生した場合： 1. .env ファイルを作成します。

WEB_EXTERNAL_PORT=8080
API_EXTERNAL_PORT=8081
WS_EXTERNAL_PORT=8082

docker compose down
docker compose up -d

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

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

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

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

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

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

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

結論

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

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