CI/CD 流水线 可视化实验室
用交互式 SVG 呈现流水线编排、GitHub Actions、构建缓存、蓝绿/金丝雀部署等 DevOps 核心实践。八个模块，纯原生实现。
流水线编排与 DAG 依赖
Pipeline 由 Stages 串行、Jobs 并行、Steps 顺序组成。有向无环图（DAG）描述 Job 间依赖，关键路径决定整体耗时。点击节点查看其层级与依赖。
流水线层级
点击“执行”观察流水线沿 DAG 推进：Stage 串行触发，同 Stage 内 Job 并行，Job 内 Step 顺序执行。关键路径（红色）是流水线总时长的下界。
GitHub Actions Workflow
Workflow YAML 定义触发器（push / pr / schedule）、Job 与矩阵策略。矩阵展开为多组并行 Job。切换触发器与矩阵维度，观察生成的 Job 组合。
Workflow 解析
选择触发器与矩阵维度，右侧将展示 strategy.matrix 展开后的 Job 网格。每个交叉单元是一个独立 Job，运行于对应 os × version 组合。
构建缓存与 Docker 层
Docker 镜像分层构建，未变更的层可被缓存复用；依赖缓存以 cache key 命中。切换 cache key 策略，观察命中与重建。
缓存策略
cache key 由 lock 文件哈希、OS、分支等组成。key 匹配则整层复用（绿）；否则从该层起重新构建（红）。合理的层切分能最大化缓存复用。
制品管理与 Container Registry
构建产物（Artifact）上传至制品库，镜像推送至 Container Registry，以版本标签（semver / sha / latest）管理。观察制品的存储与晋升流程。
标签策略
选择标签策略：semver 可读但需手动维护；sha 不可变可追溯；latest 便于拉取但易漂移。点击“晋升”将镜像从 dev 推向 prod。
部署策略：蓝绿 / 金丝雀 / 滚动
蓝绿切换瞬时换组；金丝雀按比例放量灰度；滚动更新逐步替换。切换策略并调整金丝雀流量，观察实例与流量变化。
部署策略
蓝绿：两套环境并存，路由瞬时切换，回滚即切回。金丝雀：小比例流量验证，逐步放量，异常即回退。滚动：逐个替换实例，资源占用低但混合期长。
GitOps 与 ArgoCD 声明式
Git 作为 Source of Truth，ArgoCD 持续比对 Git 期望状态与集群实际状态，发现 Drift 即告警/自动同步。引入漂移观察自愈。
GitOps 循环
点击“引入漂移”模拟人工改动集群，状态变为 OutOfSync。ArgoCD 检测后点击“自动同步”将集群拉回 Git 声明的期望状态，实现自愈。
测试自动化与测试金字塔
单元测试多而快、E2E 少而慢，构成测试金字塔。运行测试套件观察分层通过率与代码覆盖率变化。
测试金字塔
底层 Unit 数量多、执行快、定位准；中层 Integration 验证模块协作；顶层 E2E 贴近用户但慢且脆弱。合理比例应呈金字塔而非倒置。
回滚机制与快速恢复
版本回退将生产拉回已知良好版本；Feature Flag 无需重新部署即可关停异常特性。两者配合实现快速恢复。
快速恢复
点击“发布”推进版本；点击“回滚”退回上一个健康版本。也可用 Feature Flag 直接关掉新特性，无需重新部署，恢复时间从分钟级降到秒级。