chandanbhagat/ezkafka-visualizer

EZ Kafka Visualizer

一款现代、用户友好的Web应用，用于可视化和管理Apache Kafka集群。基于Next.js、TypeScript和Tailwind CSS构建，支持多服务器同时连接。

!Docker Pulls !Docker Image Size !GitHub

核心功能与特性

• 多服务器支持：同时连接多个Kafka集群
• 实时主题管理：查看、创建和删除Kafka主题
• 消息生产与消费：发送和消费带有自定义键和头信息的消息
• 消费者组监控：监控消费者组成员和订阅情况
• 集群信息：监控 broker 状态和集群健康状况
• 现代UI：简洁、响应式界面，支持深色模式
• Docker就绪：预构建Docker镜像，支持端口配置
• TypeScript支持：全应用类型安全

使用场景与适用范围

适用于Kafka开发人员、运维人员和数据工程师，可用于：

• 开发环境中快速查看和管理Kafka集群
• 监控生产环境中Kafka集群健康状态
• 测试消息生产和消费流程
• 管理多Kafka集群环境

使用方法与配置说明

快速开始

选项1：NPM包（最简单 - 全局安装）

全局安装：

bash
npm install -g ezkafka-visualizer

默认设置运行（端口3700）：

bash
ezkafka-visualizer

自定义端口运行：

bash
ezkafka-visualizer --port 8080
# 或
PORT=8080 ezkafka-visualizer

连接自定义Kafka broker：

bash
ezkafka-visualizer --port 3700 --kafka-brokers kafka.example.com:9092

查看所有选项：

bash
ezkafka-visualizer --help

访问应用： 打开浏览器并导航至 http://localhost:3700

选项2：Docker（生产环境推荐）

默认设置运行：

bash
docker run -p 3700:3700 chandanbhagat/ezkafka-visualizer:latest

自定义端口运行：

bash
docker run -p 8080:8080 -e PORT=8080 chandanbhagat/ezkafka-visualizer:latest

连接外部Kafka：

bash
docker run -p 3700:3700 \
  -e KAFKA_BROKERS=your-kafka-server:9092 \
  chandanbhagat/ezkafka-visualizer:latest

选项3：开发环境设置

1. 克隆仓库：

   bash
   git clone https://github.com/thechandanbhagat/ezkafka-visualizer.git
   cd ezkafka-visualizer
   

2. 安装依赖：

   bash
   npm install
   

3. 启动开发服务器：

   bash
   # 默认端口（3700）
   npm run dev
   
   # 通过参数指定自定义端口
   npm run dev -- 8080
   
   # 通过环境变量指定自定义端口（Linux/Mac）
   PORT=8080 npm run dev
   
   # 通过环境变量指定自定义端口（Windows PowerShell）
   $env:PORT=8080; npm run dev
   

4. 打开浏览器： 导航至 http://localhost:3700（或自定义端口）

Docker使用详解

预构建镜像

应用提供预构建Docker镜像：

• 最新版：chandanbhagat/ezkafka-visualizer:latest
• 1.0版本：chandanbhagat/ezkafka-visualizer:v1.0

环境变量

Docker Compose

使用提供的docker-compose.yml进行完整的Kafka设置：

bash
# 复制环境变量模板
cp .env.example .env

# 启动服务
docker-compose up

详细Docker使用说明，请参见 DOCKER.md。

先决条件

• Docker：用于容器化部署（推荐）
• 或Node.js 18+：用于本地开发
• Apache Kafka：本地或远程运行（支持KRaft模式）

项目结构

src/
├── app/                    # Next.js App Router
│   ├── api/               # Kafka操作API路由
│   │   ├── topics/        # 主题管理端点
│   │   ├── messages/      # 消息发送端点
│   │   ├── consumer-groups/ # 消费者组端点
│   │   └── settings/      # 设置端点
│   ├── producer/          # 生产者页面
│   ├── consumer/          # 消费者页面
│   ├── topics/            # 主题页面
│   ├── groups/            # 消费者组页面
│   ├── settings/          # 设置页面
│   ├── globals.css        # 全局样式
│   ├── layout.tsx         # 带ServerProvider的根布局
│   └── page.tsx          # 主仪表盘
├── components/            # React组件
│   ├── KafkaVisualizer.tsx    # 带导航栏的主仪表盘
│   ├── TopicList.tsx          # 主题管理组件
│   ├── MessageProducer.tsx    # 消息发送组件
│   ├── MessageConsumer.tsx    # 消息消费组件
│   ├── ConsumerGroups.tsx     # 消费者组视图
│   ├── KafkaSettings.tsx      # 多服务器设置
│   └── NavbarServerSelector.tsx # 服务器选择下拉菜单
├── contexts/              # React上下文
│   └── ServerContext.tsx  # 全局服务器状态管理
├── lib/                   # 工具函数
│   ├── kafka.ts          # 多服务器Kafka服务
│   └── kafka-settings.ts # 服务器配置管理
└── types/
    └── globals.d.ts      # TypeScript声明

可用脚本

NPM包命令

• ezkafka-visualizer - 使用默认设置启动可视化工具
• ezkafka-visualizer -p 8080 - 在自定义端口启动
• ezkafka-visualizer --help - 显示所有CLI选项

NPM包管理

bash
# 更新至最新版本
npm update -g ezkafka-visualizer

# 检查当前版本
npm list -g ezkafka-visualizer

# 卸载
npm uninstall -g ezkafka-visualizer

开发脚本

• npm run dev - 在3700端口启动开发服务器
• npm run build - 构建生产环境应用
• npm run start - 启动生产服务器
• npm run lint - 运行ESLint
• docker-compose up - 使用Docker Compose启动

API端点

主题

• GET /api/topics?profileId=<id> - 列出所有主题
• POST /api/topics - 创建新主题
• DELETE /api/topics/[name]?profileId=<id> - 删除主题
• GET /api/topics/[name]/config?profileId=<id> - 获取主题配置
• GET /api/topics/[name]/partitions?profileId=<id> - 获取主题分区

消息

• POST /api/messages - 发送消息到主题
• POST /api/messages/consume - 从主题消费消息

消费者组

• GET /api/consumer-groups?profileId=<id> - 列出消费者组

设置

• GET /api/settings - 获取服务器配置
• POST /api/settings - 更新服务器配置

使用示例

多服务器配置

应用支持连接多个Kafka集群：

1. 点击顶部导航栏中的服务器选择器
2. 添加具有不同连接设置的新服务器配置文件
3. 在服务器之间切换以管理不同集群

消息生产

bash
# 发送简单消息
curl -X POST http://localhost:3700/api/messages \
  -H "Content-Type: application/json" \
  -d '{
    "topic": "my-topic",
    "message": "Hello Kafka!"
  }'

Docker部署

bash
# 生产环境部署
docker run -d \
  --name kafka-visualizer \
  -p 3700:3700 \
  -e KAFKA_BROKERS=kafka1:9092,kafka2:9092 \
  chandanbhagat/ezkafka-visualizer:latest

使用的技术

• Next.js 15 - 带App Router和Turbopack的React框架
• TypeScript - 严格模式的类型安全JavaScript
• Tailwind CSS - 支持深色模式的实用优先CSS框架
• KafkaJS - 现代Node.js Apache Kafka客户端
• React Context - 多服务器支持的全局状态管理
• Lucide React - 美观一致的SVG图标
• Docker - 基于Alpine Linux的容器化部署

贡献

1. Fork仓库
2. 创建特性分支 (git checkout -b feature/amazing-feature)
3. 提交更改 (git commit -m 'Add some amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 打开Pull Request

许可证

本项目采用MIT许可证 - 详见 LICENSE 文件。

链接

• Docker Hub：https://hub.docker.com/r/chandanbhagat/ezkafka-visualizer
• GitHub：https://github.com/thechandanbhagat/ezkafka-visualizer
• 文档：DOCKER.md 提供详细Docker使用说明

由 https://github.com/thechandanbhagat 开发