CI/CD 流水线

相关源文件

• .circleci/config.yml
• .github/workflows/generate-sandboxes.yml
• .nvmrc
• code/.gitignore
• code/.prettierignore
• code/frameworks/angular/project.json
• code/frameworks/sveltekit/src/vite-plugin.ts
• code/frameworks/vue3-vite/src/plugins/vue-template.ts
• code/frameworks/vue3-vite/src/vite-plugin.ts
• code/lib/cli-storybook/src/sandbox-templates.ts
• code/nx.json
• code/renderers/vue3/project.json
• scripts/bench/bench-packages.ts
• scripts/bench/bench.schema
• scripts/bench/browse.ts
• scripts/bench/types.ts
• scripts/bench/utils.ts
• scripts/check-dependencies.js
• scripts/combine-compodoc.ts
• scripts/event-log-collector.ts
• scripts/get-report-message.ts
• scripts/get-template.ts
• scripts/sandbox/generate.ts
• scripts/sandbox/publish.ts
• scripts/sandbox/templates/.stackblitzrc
• scripts/sandbox/templates/item.ejs
• scripts/sandbox/templates/root.ejs
• scripts/sandbox/utils/git.ts
• scripts/sandbox/utils/template.ts
• scripts/task.ts
• scripts/tasks/bench.ts
• scripts/tasks/build.ts
• scripts/tasks/check.ts
• scripts/tasks/chromatic.ts
• scripts/tasks/compile.ts
• scripts/tasks/dev.ts
• scripts/tasks/generate.ts
• scripts/tasks/install.ts
• scripts/tasks/publish.ts
• scripts/tasks/run-registry.ts
• scripts/tasks/sandbox-parts.ts
• scripts/tasks/sandbox.ts
• scripts/tasks/serve.ts
• scripts/tasks/smoke-test.ts
• scripts/upload-bench.ts
• scripts/utils/cli-step.ts
• scripts/utils/command.ts
• scripts/utils/exec.ts
• scripts/utils/main-js.ts
• scripts/utils/options.test.ts
• scripts/utils/options.ts
• scripts/utils/workspace.ts
• scripts/utils/yarn.ts

本文档介绍了 Storybook 单体仓库使用的基于 CircleCI 的持续集成和持续交付流水线。它解释了工作流编排、任务执行系统、沙箱生成和并行化策略，这些策略跨越多种框架配置来验证更改。

有关沙箱生成过程的更多信息，请参阅 沙箱系统。有关整体开发工作流的详细信息，请参阅 开发工作流。

架构概述

CI/CD 流水线构建在 CircleCI 之上，并通过三种主要工作流类型（normal、merged、daily）进行编排，这些工作流具有不同的并行化程度和测试覆盖范围。该系统使用基于任务的执行模型，其中作业根据模板可用性和作业要求动态分布到并行实例中。

来源： .circleci/config.yml1-1100 scripts/task.ts1-564

工作流类型和编排

流水线支持多个由 workflow 参数控制的工作流节奏，每个节奏具有不同的并行化级别和测试覆盖范围。

工作流	并行度	用例	触发器
normal	14 个作业	PR 验证	Pull request 事件
merged	18 个作业	合并后验证	合并到主分支
daily	31 个作业	全面测试	计划执行
docs	1 个作业	仅文档更改	特定文件模式
skipped	0 个作业	默认/禁用状态	手动控制

来源： .circleci/config.yml3-16 .circleci/config.yml845-1100 scripts/get-template.ts31-76

任务执行系统

流水线使用一个集中的任务运行器（scripts/task.ts），该运行器通过依赖图系统协调作业执行。每个任务都定义了依赖项、就绪性检查和执行逻辑。

来源： scripts/task.ts82-105 scripts/task.ts226-285 scripts/task.ts313-347

沙箱生成和测试

流水线为多种框架和构建工具组合创建并测试沙箱。create-sandboxes 作业使用沙箱部分系统并行生成这些环境。

来源： scripts/tasks/sandbox-parts.ts59-164 .circleci/config.yml394-437 scripts/tasks/sandbox.ts14-163

并行化策略

该系统利用 CIRCLE_NODE_INDEX 和 CIRCLE_NODE_TOTAL 环境变量，将模板动态分发到并行 CircleCI 实例中。 get-template.ts 脚本可确保正确的并行化配置。

来源： scripts/get-template.ts31-76 scripts/get-template.ts96-172 .circleci/config.yml882-1058

构建和注册表系统

流水线使用 Verdaccio 作为本地 npm 注册表，以便在发布前测试 Storybook 包。build 作业编译包并将其发布到本地注册表，供沙箱创建使用。

来源： .circleci/config.yml142-186 scripts/utils/yarn.ts20-155 scripts/tasks/run-registry.ts1-36

错误处理与报告

流水线包含全面的错误处理，当出现故障时会发送 Discord 通知，并为各个作业结果提供详细的 JUnit 测试报告。

来源： .circleci/config.yml81-106 scripts/task.ts331-339 scripts/get-report-message.ts44-72

外部服务集成

流水线集成了多个外部服务，以增强功能，包括视觉测试、性能监控和团队通知。

服务	目的	集成点	配置
Chromatic	视觉回归测试	chromatic-sandboxes 作业	通过 CHROMATIC_TOKEN_* 环境变量进行令牌化
BigQuery	基准数据存储	upload-bench.ts 脚本	GCP 凭据
Discord	故障通知	工作流故障挂钩	Webhook URL
Verdaccio	本地包注册表	构建和沙箱作业	端口 6001
Playwright	端到端测试	多个测试作业	浏览器自动化

来源： scripts/tasks/chromatic.ts1-26 scripts/upload-bench.ts14-144 .circleci/config.yml103-106