Clash Master: Un panel moderno para la gestión del tráfico OpenClash

OpenClash es una solución popular de proxy/routers para gestionar el tráfico de VPN y bloqueo de anuncios en routers. Si bien sus APIs backend proporcionan datos sin procesar, carecen de una interfaz visual intuitiva.

Con Clash Master – un panel moderno de código abierto construido con Next.js, React 19, TypeScript, Tailwind CSS y un colector de datos Node.js. Te ofrece:

• Gráficos de tráfico en tiempo real (ancho de banda, latencia, regiones)
• Estadísticas de reglas interactivas y paginación
• Visión de dispositivos, IP y dominios
• Actualizaciones en tiempo real impulsadas por WebSocket
• Despliegue fácil con Docker
• Imágenes multi‑arquitectura (amd64 y arm64)
• Persistencia de datos sencilla mediante SQLite

Por qué usar Clash Master?

Función	Beneficio
UI Web + API	El front‑end puede acceder a los datos a través del mismo dominio sin necesidad de puertos adicionales
WebSocket	Actualizaciones instantáneas de los paneles sin polling
Docker Compose	Despliegue configuración cero, conconectar y listo
Colector de datos	Se ejecuta como un micro‑servicio separado, manteniendo la UI ligera
Scripts CLI	setup.sh detecta automáticamente conflictos de puertos y genera el docker-compose.yml necesario

Inicio rápido con Docker Compose (recomendado)

1. Crea un archivo docker-compose.yml con lo siguiente

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

1. Ejecuta

docker compose up -d

1. Abre http://localhost:3000 en un navegador.
2. La primera visita te pedirá que añadas un backend OpenClash (IP, puerto, token opcional). Tras guardarlo, el colector empezará a recopilar datos.

Script de un clic

Para quienes prefieren un solo comando:

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

El script:

1. Descarga un docker‑compose.yml listo.
2. Comprueba si los puertos predeterminados 3000/3001/3002 están en conflicto.
3. Sugiere puertos alternativos si es necesario.
4. Crea un archivo de configuración y inicia el contenedor.

Ejecución desde el código fuente (desarrollo)

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

Visita http://localhost:3000 – el servidor de desarrollo observará los cambios.

Resolución de conflictos de puertos

Si encuentras errores de puerto ya en uso:

1. Crea un archivo .env:

WEB_EXTERNAL_PORT=8080
API_EXTERNAL_PORT=8081
WS_EXTERNAL_PORT=8082

1. Reinicia la pila:

docker compose down
docker compose up -d

1. Navega a http://localhost:8080.

Alternativa: Editar docker-compose.yml

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

Persistencia y respaldo de datos

El colector guarda estadísticas en ./data/stats.db. Para respaldar:

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

Para borrar el historial, usa la pestaña “Database” de la UI para eliminar entradas más antiguas que la edad elegida.

Preguntas frecuentes destacadas

• ¿Conflicto de puertos? Ajusta .env o docker‑compose.yml.
• Acceso a la API? Expón el puerto 3001 o configura API_URL.
• WebSocket? Expón el puerto 3002 o configura WS_URL.
• Conectividad al OpenClash? Asegúrate de que el External Control del router esté habilitado y que el token (si se usa) coincida.

Conclusión

Clash Master convierte métricas brutas de OpenClash en un panel interactivo y amigable para desarrolladores. Ya sea que seas administrador de red o aficionado, la combinación de herramientas modernas, despliegue Docker‑friendly y colección robusta de datos lo convierte en la solución preferida para visualizar tráfico VPN en cualquier plataforma.

Consejo: Estrellas para el proyecto en GitHub – es gratuito y ayuda a mantener el desarrollo activo.