Ruo-Yi 前后端分离

1 概览与组件职责（高层）

• 前端（Vue）

  • 单页应用（SPA）：页面路由、组件、State 管理（Vuex/Pinia）

  • 调用后端 REST/GraphQL API（通过 JSON）

  • 静态资源（HTML/CSS/JS/图片）由 Nginx 承载或 CDN 分发

• Nginx

  • 承载前端静态资源（或将前端上传到 CDN）

  • 反向代理到后端 API（Spring Boot），可以做负载均衡

  • 做 SSL/TLS 终端（HTTPS）、gzip、缓存静态文件、限流、请求重写

  • 做静态资源缓存头配置、HTTP/2 支持

• 后端（Spring Boot，Ruo-Yi）

  • 提供 RESTful API（或 MVC + REST）

  • 业务逻辑、权限鉴权、参数校验、事务控制

  • 访问 MySQL、使用 Redis 做缓存、Session 或限流

  • 提供健康检查、监控埋点、日志（结构化）

• MySQL

  • 关系数据存储（持久化）

  • 事务、索引、表设计、备份与恢复

• Redis

  • 缓存（热点数据、页面片段）

  • Session 存储（如果前后端分离且需要共享 session）

  • 分布式锁、队列（延迟任务）、计数/限流（令牌桶 / 漏桶）

2 架构图（文字版流程）

前端（浏览器/Vue）

→（1）请求静态资源 → Nginx（静态托管 / CDN）

→（2）发起 API 请求（XHR / fetch / axios） → Nginx 反向代理 → Spring Boot 集群（多个实例）

→（3）Spring Boot：鉴权 → 读取缓存(Redis) → 若未命中则查询 MySQL → 返回并写 Redis 缓存

→（4）Spring Boot 返回 JSON → Nginx 转发给前端 → 前端渲染

额外：异步任务写入消息队列 / Redis 队列，由后台 worker 处理（如邮件、日志聚合、重计算）

3 详细请求与数据流（一步步）

1. 用户在浏览器打开应用 URL（example.com）。DNS 指向 Nginx（或 CDN）。

2. Nginx 返回 index.html、打包好的 JS/CSS。浏览器加载 Vue SPA。

3. SPA 初始化，若需要鉴权，检查本地存储的 token（localStorage / cookie）。没有则重定向到登录页。

4. 用户登录 → 前端发送 /api/login（POST）到后端：

   • 后端验证用户名/密码（从 MySQL 读取）。

   • 验证通过：后端生成 JWT 或 Session id。

     • JWT ：返回给前端，前端在后续请求 Authorization: Bearer <token>。

     • Session（cookie）：后端在 Redis 保存 session，设置 HttpOnly cookie（Secure + SameSite）。

5. 后续 API 请求走 Nginx → Nginx 转发到后端实例（轮询/least_conn）。

6. 后端收到请求→ 鉴权 → 业务逻辑 → 检查 Redis 缓存（比如 user:123）：

   • 命中：直接返回缓存内容（注意缓存过期/一致性策略）

   • 未命中：查询 MySQL，返回数据→ 同时写入 Redis 缓存

7. 后端响应 JSON。前端更新视图。

8. 写操作（插入/更新）先写 MySQL（事务），写成功后失效/更新相应 Redis 缓存（Cache Invalidate 或 Write-through/Write-back 策略）

9. 异步/耗时任务交给消息队列/Redis list 来异步处理，避免阻塞请求线程。

4 认证、鉴权、Session 设计（常见两条路径）

A. JWT（适合纯前后端分离、无状态后端）

• 优点：无状态，后端横向扩展简单；前端携带 token。

• 缺点：token 撤销/强制下线复杂；token 泄露风险；不能即时失效（除非维护黑名单）。

• 推荐用法：短期 token + 刷新 token（refresh token 存储更安全，如 HttpOnly cookie）。

B. Session + Redis（适合需要快速下线/权限变更的场景）

• 后端在 Redis 保存 session（session:<id>），Nginx 只转发请求，Spring Boot 使用 spring-session-data-redis 管理 session。

• 优点：可立即销毁 session（登出），权限变更即时生效。

• Cookie 设置：HttpOnly, Secure, SameSite=Strict/Lax。

5 缓存策略（Redis）与一致性

• 缓存类型：

  • 读缓存（热点数据，如商品详情）

  • Session 存储

  • 计数器/限流/分布式锁

  • 队列（异步任务）

• 缓存策略：

  • Cache Aside（常用）：先读缓存，未命中再读 DB 并写缓存；写 DB 后主动删除/更新缓存

  • Write Through / Write Back（复杂，慎用）

• 过期策略：

  • 为不同类型数据设置不同 TTL

  • 防止雪崩：设置随机过期时间

  • 阻止穿透：空值缓存或布隆过滤器

• 缓存一致性：

  • 对写频繁的数据慎用缓存或使用短期 TTL

  • 使用分布式锁处理缓存重建（避免击穿）

• 缓存预热：重要页面/数据在发布后或高峰前预热缓存

6 数据库设计与事务

• 关系型建模，合理使用索引（覆盖索引、组合索引）、范式与反范式的权衡

• 大表分表/分库策略（按业务需要）

• 读写分离：Master 写，Replica 读（注意读延迟导致的可见性问题）

• 事务边界控制：短事务、避免长事务占用资源

• 慎用 SELECT *，分页使用 seek 优化（基于索引）

7 高可用与扩展方案

• Nginx：可以做为边缘节点，后端有多个 Spring Boot 实例（容器 / VM），Nginx 负载均衡；或者使用 LVS / haproxy / K8s Ingress 做负载均衡

• Spring Boot：水平扩展（无状态为佳），使用 Redis 或数据库做状态共享

• MySQL：主从/主主复制 + MHA/Orchestrator/Proxy（如 MySQL Router、Atlas） + 读写分离 + 备份/恢复

• Redis：主从 + 哨兵或 Redis Cluster（分片与高可用）

• 异步组件：消息队列（RabbitMQ/Kafka）处理异步任务，避免请求阻塞

• 容器化：将服务容器化（Docker），使用 Kubernetes 进行编排（自动扩缩、滚动升级、健康检查）

8 部署、CI/CD 与灰度发布

• CI：代码 push → 单元测试 → 构建镜像 → 推送 Registry

• CD：镜像部署到目标环境（可用 GitOps、Jenkins、GitLab CI、ArgoCD）

• 灰度发布/蓝绿发布：通过 Nginx / Ingress 做路由策略（部分流量下发新版本）

• 滚动升级：K8s 或容器服务可逐个替换实例

9 日志、监控与报警

• 日志：结构化日志（JSON），收集到 ELK/EFK（Elasticsearch+Fluentd/Logstash+Kibana）

• 监控：Prometheus + Grafana，监控指标：请求耗时、QPS、错误率、DB 连接数、Redis 命中率

• 分布式追踪：Jaeger/Zipkin，用于链路追踪（定位慢请求）

• 报警：基于 SLI/SLO 指标设置报警（错误率、延迟、磁盘/内存告警）

10 安全要点

• 通信加密：HTTPS（Nginx 终端），内部通信可用 mTLS

• 认证：用 OAuth2/JWT 或 session + HTTPS

• 参数校验：后端必须做防注入、输入校验、严格类型检查

• 敏感信息存储：Secrets 存储（Vault/Kubernetes Secrets/Cloud KMS）

• 速率限制：IP 或接口限流（Nginx + Redis）

• XSS/CSRF：前端做输入过滤；后端验证 CSRF（或使用 token）

• 防爬虫：验证码、行为分析、IP 黑名单

11 常见问题与建议实践（经验条目）

• 避免把大量业务逻辑写到 Controller：使用 Service 层、Repository 层

• 追求幂等性（重要写操作）：给关键请求做幂等设计（幂等键）

• 分页请使用索引（避免 OFFSET 大表扫描）

• 读副本延迟问题：对于强一致性要求操作，读主库或做事务协调

• 尽量使用短生命周期 token，refresh token 存 HttpOnly cookie

• 前端静态资源：使用 CDN + 长缓存 + 指纹化（hash），避免用户拿到旧文件

• 数据库备份与回档流程需演练（定期演练恢复）

12 典型配置示例（最小可用片段）

Nginx（反代 + 静态）

server {

listen 80;

server_name example.com;

静态资源

root /var/www/html; # Vue 打包的 dist

index index.html;

location / {

try_files uri uri/ /index.html;

}

API 反向代理

location /api/ {

proxy_pass http://backend_upstream;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header X-Forwarded-Proto $scheme;

proxy_connect_timeout 3s;

proxy_read_timeout 60s;

}

}

upstream backend_upstream {

server 10.0.0.11:8080;

server 10.0.0.12:8080;

}

Spring Boot（CORS + Redis session）

application.yml（片段）

Redis 缓存典型代码

13 校验清单（部署前快速检查）

• 前端静态资源是否构建并有版本指纹（hash）？

• Nginx 是否启用 gzip、http2、TLS？

• 后端是否做好 CORS、鉴权、限流？

• Redis 是否配置了持久化/哨兵或集群？

• MySQL 是否有主从或备份策略？

• 日志/监控/告警是否已就绪？

• CI/CD 是否能回滚与灰度发布？