发布 Storybook

观看视频教程

团队将 Storybook 发布到网上，以审查和协作处理正在进行的工作。这使开发人员、设计师、产品经理和其他利益相关者能够检查 UI 是否正确，而无需接触代码或需要本地开发环境。

将 Storybook 构建为静态 Web 应用程序

首先，我们需要将 Storybook 构建为一个静态 Web 应用程序。此功能已内置并针对大多数受支持的框架进行了预配置。在项目根目录中运行以下命令

npm run build-storybook

您可以提供其他标志来自定义命令。阅读有关标志选项的更多信息此处。

Storybook 将创建一个能够由任何 Web 服务器服务的静态 Web 应用程序。通过运行以下命令在本地预览它

npx http-server ./path/to/build

自定义构建以提高性能

默认情况下，Storybook 的生产构建会将所有故事和文档封装到生产捆绑包中。这对于小型项目来说是理想的选择，但对于大型项目或当构建时间缩短成为优先事项（例如，测试、CI/CD）时，可能会导致性能问题。如果需要，您可以使用 test 选项在您的 main.js|ts 配置文件中自定义生产构建，并调整构建脚本以使用 --test 标志启用优化。

npm run build-storybook -- --test

使用 Chromatic 发布 Storybook

将 Storybook 构建为静态 Web 应用程序后，您可以将其发布到您的 Web 主机。我们推荐 Chromatic，这是一项专为 Storybook 打造的免费发布服务，可在云端安全地记录、版本化和索引您的 UI 组件。

Storybook publishing workflow

要开始使用，请使用您的 GitHub、GitLab、Bitbucket 或电子邮件注册，并为您的项目生成一个唯一的项目令牌。

接下来，从 npm 安装 Chromatic CLI 包

npm install chromatic --save-dev

包安装完成后，运行以下命令。确保您将your-project-token替换为您自己的项目令牌。

npx chromatic --project-token=<your-project-token>

Chromatic 完成后，您应该已成功部署了 Storybook。通过点击提供的链接（例如，https://random-uuid.chromatic.com）进行预览。

Build 1 published.
 
View it online at https://www.chromatic.com/build?appId=...&number=1.

Chromatic publish build

设置 CI 以自动发布

配置您的 CI 环境以发布您的 Storybook 并运行 Chromatic 每当您将代码推送到存储库时。让我们看看如何使用 GitHub Actions 进行设置。

在项目的根目录中，在 .github/workflows 目录中添加一个名为 chromatic.yml 的新文件

# .github/workflows/chromatic.yml
 
# Workflow name
name: 'Chromatic Publish'
 
# Event for the workflow
on: push
 
# List of jobs
jobs:
  test:
    # Operating System
    runs-on: ubuntu-latest
    # Job steps
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 18
          cache: 'yarn'
      - run: yarn
      #👇 Adds Chromatic as a step in the workflow
      - uses: chromaui/action@v1
        # Options required for Chromatic's GitHub Action
        with:
          #👇 Chromatic projectToken,
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

机密是 GitHub 提供的安全环境变量，因此您无需硬编码 project-token。阅读官方文档以了解如何配置它们。

提交并推送文件。恭喜，您已成功自动化 Storybook 的发布。现在，每当您打开 PR 时，您都将在 PR 检查中获得一个指向已发布的 Storybook 的便捷链接。

PR check publish

与您的团队一起审查

在开发过程中将 Storybook 发布，可以快速便捷地收集团队反馈。

一种常见的请求审查方法是在拉取请求或 Slack 中粘贴已发布 Storybook 的链接。

如果将 Storybook 发布到 Chromatic，则可以使用UI 审查功能自动扫描您的 PR 中的新故事和更新的故事。这使得识别更改内容并提供反馈变得容易。

UI review in Chromatic

版本控制和历史记录

发布 Storybook 时，您还可以获得组件历史记录和版本控制（精确到提交）。这在实施审查期间非常有用，可以比较不同分支/提交之间的组件与旧版本的组件。

Library history in Chromatic

由于 Storybook 是作为静态 Web 应用程序构建的，因此您也可以将其发布到任何 Web 主机，包括GitHub Pages、Netlify、AWS S3 等。但是，诸如组合、嵌入故事、历史记录、版本控制和资产等功能可能需要与 Storybook API 和安全身份验证进行更紧密的集成。如果您想了解有关标头的更多信息，可以参考迁移指南。此外，如果您想了解组件发布协议 (CPP)，可以在下面找到更多信息。

GitHub Pages

要在 GitHub Pages 上部署 Storybook，请使用社区构建的将 Storybook 部署到 GitHub Pages操作。要启用它，请在您的.github/workflows目录中创建一个新的工作流文件，内容如下

# .github/workflows/deploy-github-pages.yaml
 
# Workflow name
name: Build and Publish Storybook to GitHub Pages
 
on:
  # Event for the workflow to run on
  push:
    branches:
      - 'your-branch-name' # Replace with the branch you want to deploy from
 
permissions:
  contents: read
  pages: write
  id-token: write
 
# List of jobs
jobs:
  deploy:
    runs-on: ubuntu-latest
    # Job steps
    steps:
      # Manual Checkout
      - uses: actions/checkout@v4
 
      # Set up Node
      - uses: actions/setup-node@v4
        with:
          node-version: '20.x'
 
      #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
      - uses: bitovi/[email protected]
        with:
          install_command: yarn install # default: npm ci
          build_command: yarn build-storybook # default: npm run build-storybook
          path: storybook-static # default: dist/storybook
          checkout: false # default: true

GitHub Pages 操作需要其他配置选项来自定义部署过程。有关更多信息，请参阅官方文档。

组件发布协议 (CPP)

Storybook 可以与在线托管已构建 Storybook 的服务通信。这使组合等功能成为可能。我们通过符合“组件发布协议”(CPP) 来对服务进行分类，并在 Storybook 中提供不同级别的支持。

CPP 级别 1

此级别的服务提供已发布的 Storybook，并提供以下内容：

版本化端点，根据version=x.y.z查询参数（其中x.y.z是软件包的发布版本）解析到不同已发布 Storybook 的 URL。
支持/index.json（以前为/stories.json）端点，该端点返回故事列表及其元数据。
支持/metadata.json和releases字段。

示例：Chromatic

{/* .storybook/manager-head.html */}
 
<meta name="description" content="Components for my awesome project" key="desc" />

阻止 Storybook 被抓取

您可以通过包含一个noindex元标记来阻止已发布的 Storybook 出现在搜索引擎结果中，您可以通过将以下内容添加到配置目录中的manager-head.html文件来实现。

{/* .storybook/manager-head.html */}
 
<meta name="robots" content="noindex" />