华智工作总结

发表于 更新于 分类于 本文字数： 849 阅读时长 ≈ 3 分钟

@hz/layout + @hz/node-server技术架构

微前端架构图及核心流程解析

graph TD
    subgraph 配置管理系统
        M[菜单配置系统] -->|存储| MenuData
        P[代理配置系统] -->|存储| ProxyRules
    end

    subgraph 基础服务层
        Layout{{"@hz/layout"}}
        NodeServer{{"@hz/node-server"}}
    end

    subgraph 微应用A
        A1[子应用A - 端口11127]
        A2[React Router配置]
        A3[业务模块a/b/c]
    end

    subgraph 微应用B
        B1[子应用B - 端口9090]
        B2[React Router配置]
        B3[业务模块d/e]
    end

    User[用户浏览器] -->|请求| NodeServer
    NodeServer -->|读取| ProxyRules
    Layout -->|读取| MenuData

    %% 独立运行流程
    A1 -->|运行时加载| Layout
    B1 -->|运行时加载| Layout
    Layout -->|过滤菜单| A2
    Layout -->|过滤菜单| B2

    %% 代理转发流程
    NodeServer -->|路由匹配| ProxyRules
    ProxyRules -->|/deviceManage → 9090| B1
    ProxyRules -->|/appAPath → 11127| A1

    %% 菜单处理流程
    MenuData -->|全量菜单数据| Layout
    A2 -->|仅保留a/b/c| A3
    B2 -->|仅保留d/e| B3

    %% 集成部署
    Gateway[统一网关] --> NodeServer
    CDN[静态资源CDN] --> User

架构核心组件说明

配置管理系统

  • 菜单配置系统：存储所有微应用的菜单配置（a/b/c/d/e）
  • 代理配置系统：存储路径-端口映射规则（如 /deviceManage → 9090）

基础服务层

@hz/layout：

flowchart LR
   L[Layout组件] --> M[获取全量菜单]
   L --> R[读取当前应用Router配置]
   L --> F[过滤匹配菜单]
   L --> H[渲染有效菜单项]

@hz/node-server：

flowchart LR
   N[Express服务] --> C[加载代理配置]
   N --> P[创建代理中间件]
   N --> R[监听指定端口]
   P -->|express-http-proxy| T[目标应用]

微应用架构

flowchart TB
   subapp[子应用] --> layout["引入@hz/layout"]
   subapp --> server["基于@hz/node-server"]
   subapp --> router[配置React Router]
   subapp --> business[开发业务模块]
   
   router -->|仅暴露| current[当前应用路由]
   layout -->|过滤| filter[仅显示有效菜单]

关键流程解析

菜单处理流程

sequenceDiagram
    participant User
    participant Layout as @hz/layout
    participant Config as 菜单配置系统
    participant Router as React Router
    
    User->>+Layout: 访问子应用A(11127)
    Layout->>+Config: 获取全量菜单(a/b/c/d/e)
    Config-->>-Layout: 返回菜单数据
    Layout->>+Router: 读取子应用A的路由配置
    Router-->>-Layout: 返回路由(a/b/c)
    Layout->>Layout: 过滤菜单(仅保留a/b/c)
    Layout->>User: 渲染有效菜单

代理转发流程

sequenceDiagram
    participant User
    participant Node as @hz/node-server
    participant ProxyCfg as 代理配置系统
    participant AppB as 子应用B(9090)
    
    User->>+Node: 访问 :11127/deviceManage
    Node->>+ProxyCfg: 查询路径规则
    ProxyCfg-->>-Node: /deviceManage → 9090
    Node->>+AppB: 转发请求
    AppB-->>-Node: 返回响应
    Node-->>-User: 返回代理内容

独立运行 vs 集成运行

场景 独立运行 集成运行
菜单显示 仅显示当前应用路由匹配的菜单 显示全部菜单
请求处理 直接响应本地路由 通过代理转发到目标应用
路由匹配 react-router 本地匹配 Node层代理路径匹配
部署方式 独立端口部署 统一网关接入

核心优势

  1. 动态菜单管理：
    • 菜单配置与业务代码解耦
    • 动态过滤机制保证菜单安全性
  2. 无缝代理切换： 
    // express-http-proxy 配置示例
app.use('/:path', proxy((req) => {
const target = proxyConfig[req.params.path]; 
return `http://localhost:${target.port}`;
}, {
proxyReqPathResolver: (req) => req.originalUrl.replace(`/${req.params.path}`, '')
}));
  3. 路由隔离：
    • 各子应用维护独立路由配置
    • Layout实现运行时路由匹配过滤
  4. 独立部署能力：
    • 每个微应用独立版本化部署
    • 代理配置热更新，无需重启服务