前后端系统部署目录

我来为您详细讲解这个Linux日志分析系统的架构，用通俗易懂的方式帮您理解。

系统架构总览

这是一个典型的前后端分离架构，就像一个餐厅的运作模式：

┌─────────────────────────────────────────────────────────────────┐
│                      用户浏览器 (前端)                          │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐           │
│  │ 登录页面    │  │ 实时日志    │  │ 历史日志    │           │
│  │ 告警管理    │  │ 统计图表    │  │ 日志导出    │           │
│  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘           │
└─────────┼────────────────┼────────────────┼───────────────────┘
          │                │                │
          ▼                ▼                ▼
┌─────────────────────────────────────────────────────────────────┐
│                    Nginx (反向代理)                            │
│  ┌───────────────────────────────────────────────────────┐     │
│  │  接收请求 → 转发给后端 → 返回响应给前端               │     │
│  └───────────────────────────────────────────────────────┘     │
└───────────────────────────┬─────────────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────────────┐
│                    Flask (后端服务)                            │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐           │
│  │ 认证模块    │  │ 日志模块    │  │ 告警模块    │           │
│  │ JWT登录    │  │ 日志解析    │  │ 规则匹配    │           │
│  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘           │
│         └────────────────┴────────────────┘                   │
│                           │                                   │
│                           ▼                                   │
│              ┌───────────────────────┐                        │
│              │     SQLite数据库      │                        │
│              │ 存储日志、用户、告警   │                        │
│              └───────────────────────┘                        │
└─────────────────────────────────────────────────────────────────┘

---

一、前端架构 (React + TypeScript)

前端就像餐厅的服务员，负责和用户打交道：

主要功能模块

模块	职责	技术实现
登录页面	用户认证入口	React组件 + JWT token
实时日志	实时展示最新日志	HTTP轮询 + ECharts图表
历史日志	查询历史日志	分页查询 + 级别过滤
告警管理	告警列表和处理	状态管理 + 批量操作

文件结构

frontend/
├── src/
│   ├── pages/           # 页面组件
│   │   ├── Login.tsx       # 登录页
│   │   ├── RealtimeLogs.tsx # 实时日志
│   │   └── HistoryLogs.tsx  # 历史日志
│   ├── services/        # API接口封装
│   │   ├── api.ts          # 统一请求封装
│   │   └── logService.ts   # 日志相关API
│   ├── types/           # TypeScript类型定义
│   │   └── index.ts
│   └── App.tsx          # 主应用入口

工作流程

1. 用户打开浏览器访问网站

2. 前端发送请求到后端API

3. 后端返回数据，前端渲染页面

4. 用户操作（点击、筛选）触发新的请求

---

二、后端架构 (Flask + Python)

后端就像餐厅的后厨，负责处理业务逻辑：

主要功能模块

模块	职责	关键技术
认证模块	用户登录、Token验证	Flask-JWT-Extended
日志采集	监控日志文件	Tail + 正则解析
日志存储	存储到数据库	SQLAlchemy ORM
告警引擎	规则匹配和告警生成	模式匹配 + 阈值判断

文件结构

backend/
├── app/
│   ├── controllers/     # 控制器（处理HTTP请求）
│   │   ├── auth_controller.py    # 认证接口
│   │   └── log_controller.py     # 日志接口
│   ├── models/          # 数据库模型
│   │   └── models.py             # LogRecord、User等模型
│   ├── utils/           # 工具类
│   │   └── log_monitor.py        # 日志监控器
│   └── config/          # 配置文件
│       └── config.py
└── run.py               # 启动入口

核心组件详解

1. 日志监控器 (log_monitor.py)

像一个侦探，时刻盯着日志文件：

• 使用 tail 命令实时监控 /var/log/messages、/var/log/secure 等文件

• 用正则表达式解析日志级别（ERROR/WARNING/INFO）

• 把解析后的日志存入数据库

2. 认证系统 (auth_controller.py)

像一个门卫，验证身份：

• 用户登录时验证用户名密码

• 生成 JWT token（像一张门禁卡）

• 后续请求都要带上token才能访问

3. 日志控制器 (log_controller.py)

像一个图书馆管理员：

• 提供日志查询接口

• 支持分页、时间范围、级别筛选

• 支持按级别优先级排序（ERROR优先）

---

三、数据库架构 (SQLite)

数据库就像餐厅的仓库，存储所有数据：

主要数据表

表名	用途	关键字段
users	存储用户信息	id, username, password_hash
log_records	存储日志记录	timestamp, log_level, message
alerts	存储告警信息	log_id, severity, status
alert_rules	存储告警规则	pattern, severity, enabled

日志表结构

CREATE TABLE log_records (
    id INTEGER PRIMARY KEY,
    timestamp DATETIME NOT NULL,  -- 日志时间
    hostname VARCHAR(100) NOT NULL, -- 主机名
    log_level VARCHAR(20) NOT NULL, -- ERROR/WARNING/INFO/DEBUG
    message TEXT NOT NULL,          -- 日志内容
    program VARCHAR(100),           -- 产生日志的程序
    log_file VARCHAR(255)           -- 来源日志文件
);

---

四、部署架构

系统部署在Linux服务器上，采用生产环境标准配置：

组件关系

用户请求
    │
    ▼
┌──────────────┐    ┌──────────────┐    ┌──────────────┐
│   Nginx      │───▶│   Gunicorn   │───▶│   Flask      │
│ (反向代理)   │    │ (应用服务器) │    │ (应用代码)   │
└──────────────┘    └──────────────┘    └──────┬───────┘
                                                 │
                                                 ▼
                                    ┌──────────────────┐
                                    │   SQLite数据库   │
                                    └──────────────────┘

各组件职责

组件	作用	类比
Nginx	接收外部请求，转发给Gunicorn	餐厅门口的迎宾员
Gunicorn	管理Flask进程，处理并发请求	餐厅里的领班
Flask	处理业务逻辑，访问数据库	餐厅的厨师
SQLite	存储数据	餐厅的仓库

---

五、完整工作流程示例

场景：用户查看历史日志

1. 用户打开浏览器，访问历史日志页面

2. 前端发送请求到 /api/logs/history，带上JWT token

3. Nginx收到请求，转发给Gunicorn

4. Gunicorn将请求交给Flask处理

5. Flask验证token，查询数据库获取日志

6. 数据库返回日志数据（按级别优先级排序）

7. Flask将数据返回给前端

8. 前端渲染表格和图表，展示给用户

---

六、技术栈总结

层次	技术	用途
前端框架	React 18	构建用户界面
前端语言	TypeScript	类型安全的JavaScript
UI组件	Ant Design 5	现成的UI组件库
图表库	ECharts	数据可视化
后端框架	Flask 2.3	轻量级Python Web框架
ORM	SQLAlchemy	数据库操作封装
认证	JWT	无状态身份验证
数据库	SQLite	轻量级嵌入式数据库
服务器	Gunicorn + Nginx	生产环境部署

---

学习建议

如果您想学习这个系统，可以按以下步骤：

1. 先看前端：从 Login.tsx 开始，理解用户交互流程

2. 再看后端：从 auth_controller.py 开始，理解API设计

3. 理解数据：看 models.py，理解数据库结构

4. 深入核心：看 log_monitor.py，理解日志采集机制

需要我详细讲解某个模块吗？