Skip to content

DEVELOPMENT.md

Latest commit

 

History

History
288 lines (238 loc) · 6.79 KB

DEVELOPMENT.md

File metadata and controls

288 lines (238 loc) · 6.79 KB

📖 在线编译系统 - 开发文档

🏗️ 系统架构

整体架构

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Nginx     │────▶│  Frontend   │     │   Backend   │
│ (反向代理)   │     │  (React)    │◀───▶│  (Express)  │
└─────────────┘     └─────────────┘     └──────┬──────┘
                                               │
                         ┌─────────────────────┼─────────────┐
                         │                     │             │
                    ┌────▼────┐          ┌────▼────┐   ┌───▼────┐
                    │PostgreSQL│          │  Redis  │   │ Docker │
                    │   (DB)   │          │ (Queue) │   │Executor│
                    └─────────┘          └─────────┘   └────────┘

技术选型理由

  1. 前端 - React + TypeScript

    • 强类型检查，减少运行时错误
    • 组件化开发，易于维护
    • 丰富的生态系统

  2. 后端 - Node.js + Express

    • 异步I/O，高并发性能
    • JavaScript全栈，降低学习成本
    • 丰富的中间件生态

  3. 数据库 - PostgreSQL

    • 开源免费
    • ACID事务支持
    • JSON支持，灵活的数据类型

  4. 缓存/队列 - Redis

    • 高性能内存数据库
    • 支持多种数据结构
    • 成熟的消息队列实现

  5. 容器化 - Docker

    • 完美的代码隔离
    • 资源限制
    • 环境一致性

📁 项目结构详解

前端结构

frontend/
├── src/
│   ├── components/      # 可复用组件
│   │   ├── Layout/      # 布局组件
│   │   ├── Header.tsx   # 头部导航
│   │   └── CodeEditor.tsx # 代码编辑器
│   ├── pages/           # 页面组件
│   │   ├── HomePage.tsx
│   │   ├── EditorPage.tsx
│   │   ├── LoginPage.tsx
│   │   ├── RegisterPage.tsx
│   │   └── HistoryPage.tsx
│   ├── hooks/           # 自定义Hooks
│   │   └── useExecuteCode.ts
│   ├── store/           # 状态管理
│   │   └── authStore.ts
│   ├── services/        # API服务
│   │   └── api.ts
│   └── main.tsx         # 入口文件

后端结构

backend/
├── src/
│   ├── controllers/     # 控制器层
│   │   ├── auth.controller.ts
│   │   ├── execute.controller.ts
│   │   └── submission.controller.ts
│   ├── routes/          # 路由定义
│   ├── middleware/      # 中间件
│   │   ├── auth.ts
│   │   ├── errorHandler.ts
│   │   ├── rateLimiter.ts
│   │   └── validator.ts
│   ├── services/        # 业务逻辑
│   │   └── docker.service.ts
│   ├── workers/         # 任务处理器
│   │   └── execute.worker.ts
│   ├── queues/          # 队列定义
│   │   └── execute.queue.ts
│   ├── schemas/         # 验证Schema
│   ├── utils/           # 工具函数
│   ├── config/          # 配置文件
│   └── server.ts        # 服务入口
├── prisma/
│   └── schema.prisma    # 数据库Schema

🔐 安全措施

1. 代码执行安全

  • Docker容器隔离
  • 禁用网络访问
  • 资源限制（CPU、内存、时间）
  • 只读文件系统
  • 非root用户运行

2. API安全

  • JWT身份认证
  • 请求频率限制
  • 输入验证
  • XSS防护
  • CSRF防护

3. 数据安全

  • 密码加密存储（bcrypt）
  • HTTPS传输
  • SQL注入防护（Prisma ORM）

🚀 部署流程

开发环境部署

# 1. 克隆仓库
git clone https://github.com/Dajucoder/Online-Compilation-System.git
cd Online-Compilation-System

# 2. 配置环境变量
cp .env.example .env
# 编辑 .env 文件

# 3. 启动Docker Compose
docker-compose up -d

# 4. 初始化数据库
cd backend
npm install
npx prisma migrate dev
npx prisma db seed

# 5. 访问应用
# 前端: http://localhost:3000
# 后端: http://localhost:8000

生产环境部署

# 1. 配置生产环境变量
cp .env.example .env.production
# 编辑生产环境配置

# 2. 构建镜像
docker-compose -f docker-compose.prod.yml build

# 3. 启动服务
docker-compose -f docker-compose.prod.yml up -d

# 4. 配置HTTPS（推荐使用Let's Encrypt）
# 5. 配置域名DNS
# 6. 配置防火墙规则

📊 性能优化

1. 前端优化

  • 代码分割（Code Splitting）
  • 懒加载
  • CDN加速静态资源
  • Gzip压缩
  • 缓存策略

2. 后端优化

  • 数据库索引
  • Redis缓存
  • 连接池
  • 异步任务处理
  • 负载均衡

3. Docker优化

  • 容器池预热
  • 镜像层缓存
  • 多阶段构建
  • 资源配额管理

🐛 常见问题

1. Docker权限问题

# 添加用户到docker组
sudo usermod -aG docker $USER
newgrp docker

2. 端口占用

# 检查端口占用
netstat -tulpn | grep :3000
# 或使用其他端口

3. 数据库连接失败

  • 检查PostgreSQL服务状态
  • 验证DATABASE_URL配置
  • 检查网络连接

📈 监控与日志

日志位置

  • 前端: 浏览器控制台
  • 后端: backend/logs/
  • Nginx: /var/log/nginx/
  • Docker: docker logs <container_name>

监控指标

  • API响应时间
  • 代码执行时间
  • 容器资源使用
  • 错误率
  • 并发用户数

🔄 CI/CD流程

GitHub Actions示例

name: CI/CD

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Build images
        run: docker-compose build
      - name: Run tests
        run: docker-compose run backend npm test

📝 开发规范

代码规范

  • 使用ESLint + Prettier
  • 遵循TypeScript最佳实践
  • 编写单元测试
  • 代码审查

Git工作流

  • main分支：生产环境
  • develop分支：开发环境
  • feature/*：功能分支
  • bugfix/*：修复分支

提交规范

feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式调整
refactor: 重构
test: 测试相关
chore: 构建/工具链更新

🎯 未来规划

  1. 功能扩展

    • 实时协作编辑
    • AI代码补全
    • 题库系统
    • 代码分享社区

  2. 性能提升

    • 容器池管理
    • 分布式部署
    • CDN优化

  3. 安全增强

    • 代码审计
    • WAF防护
    • DDoS防护

💡 如有问题，欢迎提Issue或联系开发团队！