157 lines
3.7 KiB
Markdown
157 lines
3.7 KiB
Markdown
# 萌芽监控面板
|
||
|
||
一个简洁高效的 Linux 服务器监控面板，采用前后端分离架构。
|
||
|
||
## 项目概述
|
||
|
||
### 功能
|
||
- 实时监控 Linux 服务器的 CPU、内存、存储、GPU 使用情况
|
||
- 支持同时监控多个服务器
|
||
- 卡片式展示，直观清晰
|
||
- 详情弹窗查看完整信息
|
||
|
||
### 技术栈
|
||
- **前端**: React 19 + TypeScript + Vite
|
||
- **后端**: Go (原生 net/http 库)
|
||
- **风格**: 白色柔和风格界面
|
||
|
||
## 快速开始
|
||
|
||
### 后端部署
|
||
|
||
1. 进入后端目录
|
||
```bash
|
||
cd mengyamonitor-backend
|
||
```
|
||
|
||
2. 编译（在 Linux 服务器上）
|
||
```bash
|
||
go build -o mengyamonitor-backend
|
||
```
|
||
|
||
3. 运行
|
||
```bash
|
||
./mengyamonitor-backend
|
||
```
|
||
默认监听端口: 9292
|
||
|
||
4. 可选：配置环境变量
|
||
```bash
|
||
PORT=8080 ./mengyamonitor-backend
|
||
```
|
||
|
||
### 前端开发
|
||
|
||
1. 进入前端目录
|
||
```bash
|
||
cd mengyamonitor-frontend
|
||
```
|
||
|
||
2. 安装依赖
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
3. 启动开发服务器
|
||
```bash
|
||
npm run dev
|
||
```
|
||
默认访问端口: 2929
|
||
|
||
4. 构建生产版本
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
## 使用说明
|
||
|
||
### 1. 部署后端到服务器
|
||
将编译好的 `mengyamonitor-backend` 二进制文件上传到需要监控的 Linux 服务器并运行。
|
||
|
||
### 2. 配置前端
|
||
在前端界面点击"添加服务器"，输入：
|
||
- 服务器名称：例如"生产服务器1"
|
||
- 服务器地址：例如"http://192.168.1.100:9292"
|
||
|
||
### 3. 查看监控数据
|
||
- 主界面显示所有服务器的基本信息（CPU、内存使用率）
|
||
- 点击"查看详情"可查看完整的系统信息
|
||
- 数据每2秒自动刷新
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
萌芽监控面板/
|
||
├── mengyamonitor-backend/ # 后端服务
|
||
│ ├── main.go # 主程序和HTTP服务器
|
||
│ ├── systeminfo.go # 系统信息采集
|
||
│ ├── go.mod # Go模块配置
|
||
│ └── README.md # 后端文档
|
||
│
|
||
├── mengyamonitor-frontend/ # 前端应用
|
||
│ ├── src/
|
||
│ │ ├── api/ # API调用层
|
||
│ │ ├── components/ # React组件
|
||
│ │ ├── hooks/ # 自定义Hooks
|
||
│ │ ├── types/ # TypeScript类型
|
||
│ │ ├── utils/ # 工具函数
|
||
│ │ ├── App.tsx # 主应用
|
||
│ │ └── main.tsx # 入口文件
|
||
│ ├── package.json
|
||
│ ├── vite.config.ts
|
||
│ └── README.md # 前端文档
|
||
│
|
||
└── 需求.txt # 需求文档
|
||
```
|
||
|
||
## API 接口
|
||
|
||
### GET /api/health
|
||
健康检查
|
||
|
||
### GET /api/metrics
|
||
获取系统监控指标
|
||
```json
|
||
{
|
||
"data": {
|
||
"hostname": "server1",
|
||
"timestamp": "2025-12-10T10:00:00Z",
|
||
"cpu": { "usagePercent": 23.45, ... },
|
||
"memory": { "usedPercent": 50.0, ... },
|
||
"storage": [...],
|
||
"gpu": [...],
|
||
"os": { ... },
|
||
"uptimeSeconds": 864000.5
|
||
}
|
||
}
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. **系统支持**: 后端仅支持 Linux 系统
|
||
2. **权限要求**: 需要读取 `/proc` 文件系统的权限
|
||
3. **GPU 监控**: 需要安装 `nvidia-smi` 工具（可选）
|
||
4. **网络访问**: 确保前端可以访问后端的 9292 端口
|
||
5. **CORS**: 后端已配置允许跨域访问
|
||
|
||
## 常见问题
|
||
|
||
**Q: 前端无法连接后端？**
|
||
A: 检查服务器防火墙是否开放 9292 端口，确保后端服务正在运行。
|
||
|
||
**Q: GPU 信息显示不可用？**
|
||
A: 如果服务器没有 NVIDIA GPU 或未安装 nvidia-smi，GPU 信息会显示为"不可用"，这是正常的。
|
||
|
||
**Q: 如何将前端打包成桌面应用？**
|
||
A: 可以使用 Electron 或 Tauri 框架将前端打包成桌面应用，详见前端 README。
|
||
|
||
## 开发者
|
||
|
||
- 前后端分离架构，代码结构清晰
|
||
- 符合企业级开发规范
|
||
- 易于扩展和维护
|
||
|
||
## License
|
||
|
||
MIT
|