Skip to content

TECH_STACK.md

Latest commit

 

History

History
251 lines (192 loc) · 6.2 KB

TECH_STACK.md

File metadata and controls

251 lines (192 loc) · 6.2 KB
Raw

Hongcao 网站管理系统 - 技术栈详细说明

🎯 技术选择原则

  1. 成熟稳定: 选择经过生产环境验证的技术
  2. 开发效率: 提高开发速度和维护效率
  3. 性能优先: 确保系统高性能和可扩展性
  4. 成本控制: 平衡技术先进性和开发成本

🖥️ 前端技术栈

核心框架

  • React 18.2+

    • 理由: 生态成熟，组件化开发，虚拟DOM性能优秀
    • 特性: Concurrent Features, Suspense, Error Boundaries

  • TypeScript 5.0+

    • 理由: 类型安全，IDE支持好，减少运行时错误
    • 配置: 严格模式，路径别名，装饰器支持

UI框架和组件库

  • Ant Design 5.x

    • 理由: 企业级UI设计语言，组件丰富
    • 定制: 主题定制，国际化支持

  • Tailwind CSS

    • 理由: 原子化CSS，开发效率高
    • 配置: 自定义设计系统，响应式断点

状态管理

  • Zustand
    • 理由: 轻量级，TypeScript友好，学习成本低
    • 替代方案: Redux Toolkit (复杂状态场景)

数据获取

  • TanStack Query (React Query)
    • 理由: 服务端状态管理，缓存策略完善
    • 功能: 自动重试，后台更新，离线支持

数据可视化

  • Apache ECharts
    • 理由: 功能强大，图表类型丰富，性能优秀
    • 封装: React组件封装，主题统一

构建工具

  • Vite 4.x
    • 理由: 开发服务器快，HMR体验好
    • 插件: TypeScript，React，ESLint，Prettier

包管理

  • pnpm
    • 理由: 磁盘空间效率高，安装速度快
    • 配置: workspace支持，依赖提升控制

⚙️ 后端技术栈

核心框架

  • Node.js 18 LTS

    • 理由: JavaScript全栈，生态丰富，性能优秀

  • Fastify 4.x

    • 理由: 性能优于Express，TypeScript支持好
    • 插件: 自动化文档，参数验证，CORS

开发语言

  • TypeScript
    • 理由: 类型安全，重构友好，团队协作效率高
    • 配置: 严格模式，装饰器，路径映射

数据库ORM

  • Prisma
    • 理由: 类型安全，迁移管理，查询性能好
    • 功能: 自动生成类型，数据库可视化

认证授权

  • Passport.js + JWT
    • 理由: 策略丰富，社区支持好
    • 功能: 多种登录方式，Token刷新机制

API文档

  • Swagger/OpenAPI 3.0
    • 理由: 标准化API文档，自动生成客户端
    • 集成: Fastify插件，TypeScript类型生成

消息队列

  • Bull Queue (Redis)
    • 理由: 功能完整，监控界面，重试机制
    • 用途: 异步任务，定时任务，邮件发送

定时任务

  • node-cron
    • 理由: 语法简单，功能够用
    • 用途: 数据同步，报表生成，清理任务

🗄️ 数据库技术栈

主数据库

  • MySQL 8.0
    • 理由: 成熟稳定，文档完善，运维经验丰富
    • 特性: JSON字段，窗口函数，CTE支持
    • 配置: InnoDB引擎，UTF8MB4字符集

缓存数据库

  • Redis 7.0
    • 理由: 性能优秀，数据结构丰富
    • 用途: 会话存储，热点数据缓存，消息队列
    • 配置: 持久化策略，主从复制

分析数据库

  • ClickHouse
    • 理由: 列式存储，OLAP查询性能优秀
    • 用途: 关键词数据分析，大数据量报表
    • 替代方案: TimescaleDB (时序数据)

文件存储

  • MinIO
    • 理由: S3兼容，自建私有云
    • 用途: 报表文件，图片存储
    • 配置: 分布式部署，数据加密

🔧 开发工具链

代码质量

  • ESLint + Prettier

    • 规则: Airbnb规范，TypeScript支持

  • Husky + lint-staged

    • 功能: Git hooks，提交前检查

测试框架

  • Vitest (单元测试)
  • Playwright (E2E测试)
  • MSW (API Mock)

监控和日志

  • Winston (日志记录)
  • Prometheus (指标收集)
  • Grafana (可视化监控)

🐳 部署技术栈

容器化

  • Docker

    • 理由: 环境一致性，部署简单
    • 镜像: Alpine Linux基础镜像

  • Docker Compose

    • 用途: 开发环境，服务编排

反向代理

  • Nginx
    • 理由: 性能优秀，配置灵活
    • 功能: 负载均衡，SSL终止，静态文件服务

编排平台

  • Kubernetes (生产环境)
    • 理由: 容器编排标准，自动扩缩容
    • 组件: Ingress，Service，ConfigMap

CI/CD

  • GitHub Actions
    • 理由: 与代码仓库集成度高，免费额度够用
    • 流程: 代码检查 → 测试 → 构建 → 部署

📊 第三方服务集成

搜索引擎API

  • Google Search Console API
  • 百度站长平台API
  • Bing Webmaster Tools API

关键词数据源

  • SEMrush API
  • Ahrefs API
  • 5118 API

监控服务

  • Sentry (错误监控)
  • Uptime Robot (可用性监控)

🔐 安全技术栈

加密和哈希

  • bcrypt (密码哈希)
  • crypto (数据加密)
  • helmet (HTTP安全头)

API安全

  • rate-limiter-flexible (限流)
  • joi (参数验证)
  • cors (跨域控制)

📈 性能优化技术

前端优化

  • React.lazy (代码分割)
  • React.memo (组件缓存)
  • Intersection Observer (虚拟滚动)

后端优化

  • Redis缓存 (查询结果缓存)
  • 数据库索引 (查询优化)
  • 连接池 (数据库连接管理)

🛠️ 开发环境配置

本地开发

# 前端开发服务器
npm run dev          # Vite开发服务器 (http://localhost:3000)

# 后端开发服务器
npm run dev:server   # Fastify服务器 (http://localhost:8000)

# 数据库
docker-compose up -d # MySQL + Redis + ClickHouse

环境变量

# 数据库配置
DATABASE_URL="mysql://user:password@localhost:3306/hongcao"
REDIS_URL="redis://localhost:6379"
CLICKHOUSE_URL="http://localhost:8123"

# JWT配置
JWT_SECRET="your-secret-key"
JWT_EXPIRES_IN="7d"

# 第三方API
GOOGLE_API_KEY="your-google-api-key"
SEMRUSH_API_KEY="your-semrush-api-key"

📋 技术栈版本管理

版本策略

  • 主要版本: 每6个月评估升级
  • 次要版本: 每月更新安全补丁
  • 依赖管理: 定期检查过期依赖

升级计划

  • Q1 2025: React 19, Node.js 20
  • Q2 2025: MySQL 8.1, Redis 7.2
  • Q3 2025: 评估新兴技术栈

文档版本: v1.0
最后更新: 2025-09-16
技术负责人: 架构师团队