Clash Master : Un tableau de bord moderne pour la gestion du trafic OpenClash

"# Clash Master : Un tableau de bord moderne pour la gestion du trafic OpenClash\n\nOpenClash est une solution proxy/routeur populaire pour gérer le trafic VPN et le blocage publicitaire sur les routeurs. Bien que ses API backend fournissent des données brutes, elles n'offrent pas d'interface visuelle intuitive.\n\nEntrez Clash Master – un tableau de bord moderne et open‑source construit avec Next.js, React 19, TypeScript, Tailwind CSS, et un collecteur de données Node.js. Il vous offre :\n\n- Graphiques de trafic en temps réel (bande passante, latence, régions)\n- Statistiques de règles interactives et pagination\n- Aperçu des appareils, IP et domaines\n- Mises à jour en temps réel grâce à WebSocket\n- Déploiement compatible Docker\n- Images multi‑architectures (amd64 & arm64)\n- Persistance des données simple via SQLite\n\n## Pourquoi utiliser Clash Master ?\n\n| Fonctionnalité | Avantage |\n|----------------|----------|\n| Web UI + API | L'interface front‑end peut accéder aux données via le même domaine – aucun port supplémentaire requis |\n| WebSocket | Mises à jour instantanées pour les tableaux de bord sans interrogation |\n| Docker Compose | Déploiement sans configuration, plug‑and‑play |\n| Data collector | Fonctionne en tant que micro‑service séparé, gardant l'interface légère |\n| CLI scripts | setup.sh détecte automatiquement les conflits de ports et génère le docker-compose.yml requis |\n\n## Démarrage rapide avec Docker Compose (Recommandé)\n\n1. Créez un fichier docker-compose.yml contenant le contenu suivant\n\nyaml\nservices:\n clash-master:\n image: foru17/clash-master:latest\n container_name: clash-master\n restart: unless-stopped\n ports:\n - \"3000:3000\" # Web UI\n - \"3001:3001\" # API (optionnel)\n - \"3002:3002\" # WebSocket (optionnel)\n volumes:\n - ./data:/app/data\n environment:\n - NODE_ENV=production\n\n2. Exécutez\n\nbash\ndocker compose up -d\n\n3. Ouvrez http://localhost:3000 dans un navigateur.\n4. La première visite vous invitera à ajouter un backend OpenClash (IP, port, jeton optionnel). Après enregistrement, le collecteur commencera à recueillir les données.\n\n## Script « un‑clic »\n\nPour ceux qui préfèrent une seule commande :\n\ncurl -fsSL https://raw.githubusercontent.com/foru17/clash-master/main/setup.sh | bash\nLe script :\n\n1. Télécharge un fichier docker-compose.yml prêt.\n2. Vérifie les ports par défaut 3000/3001/3002 pour les conflits.\n3. Suggère des ports alternatifs si nécessaire.\n4. Crée un fichier de configuration et lance le conteneur.\n\n## Lancement depuis le code source (développement)\n\ngit clone https://github.com/foru17/clash-master.git\ncd clash-master\npnpm install\npnpm dev\n\nVisitez http://localhost:3000 – le serveur de développement surveillera les changements.\n\n## Résolution des conflits de port\n\nSi vous rencontrez des erreurs port already in use :\n1. Créez un fichier .env :\n\nWEB_EXTERNAL_PORT=8080 API_EXTERNAL_PORT=8081 WS_EXTERNAL_PORT=8082\n2. Redémarrez la pile :\nbash\ndocker compose down\ndocker compose up -d\n\n3. Accédez à http://localhost:8080.\n\n### Alternative : Modifier docker-compose.yml\nyaml\nports:\n - \"8080:3000\"\n - \"8081:3001\"\n - \"8082:3002\"\n\n\n## Persistance des données & sauvegarde\n\nLe collecteur stocke les statistiques dans ./data/stats.db. Pour sauvegarder :\nbash\ncp -r ./data ./data-backup-$(date +%Y%m%d)\n\nPour effacer l'historique, utilisez l'onglet “Database” de l'interface pour supprimer les entrées antérieures à un âge choisi.\n\n## Points forts de la FAQ\n\n- Conflit de port ? Ajustez .env ou docker-compose.yml.\n- Accès à l'API ? Exposez le port 3001 ou définissez l'environnement API_URL.\n- WebSocket ? Exposez le port 3002 ou définissez l'environnement WS_URL.\n- Connectivité vers OpenClash ? Assurez‑vous que le External Control du routeur est activé et que le jeton (le cas échéant) correspond.\n\n## Conclusion\n\nClash Master transforme les métriques brutes d'OpenClash en un tableau de bord interactif et convivial pour les développeurs. Que vous soyez administrateur réseau ou amateur, la combinaison d'outils modernes, d'un déploiement compatible Docker et d'une collecte de données robuste en fait la solution privilégiée pour visualiser le trafic VPN sur n'importe quelle plateforme.\n\n> Astuce : Étoilez le projet sur GitHub – c'est gratuit et aide à maintenir le développement actif."