Back to Intro to Storybook
Chapters
  • 开始吧
  • 简单组件
  • 合成组件
  • 数据
  • 页面
  • 部署
  • 视觉测试
  • 插件
  • 总结
  • 贡献

部署Storybook

学习如何线上部署Storybook
此社区翻译尚未更新为最新的Storybook版本。通过应用此翻译的中文指南中的更改来帮助我们更新它。 Pull requests 欢迎他们.

在此教程中,我们在我们本地开发环境构建了组件。某些时候,我们还需要和组员分享我们的工作以获得其他人的反馈。让我们部署 Storybook 到线上,帮助同事对 UI 实现进行 review。

导出为一个静态应用

为了部署 Storybook 我们首先需要将其导出为一个静态 web 应用。Storybook 已经集成了此功能并进行了预配置。

运行 yarn build-storybook 将会在 storybook-static 目录下输出一个静态 Storybook,可以被部署在任何静态网站托管服务。

发布 Storybook

此教程使用 Chromatic,一个 Storybook 维护者提供的免费发布服务。它使得我们可以安全的将我们的 Storybook 部署到云端。

在 GitHub 中创建一个仓库

在我们开始之前,我们首先需要将本地代码和一个远程版本控制服务关联起来。当我们在开始吧章节中构建我们的项目时,已经初始化了了一个本地仓库。在此阶段,我们已经拥有了一系列可以推送到远程仓库的 commits。

进入 GitHub 然后在这里创建一个新的仓库。和我们的本地项目一样,命名为“taskbox”。

设置GitHub

在新的仓库中,获得仓库的 URL 并执行下述命令将其添加到您的 git 项目中:

Copy
git remote add origin https://github.com/<your username>/taskbox.git

最后,执行下述命令将本地仓库提交到远程 GitHub 仓库中:

Copy
git push -u origin main

使用 Chromatic

将包作为 development dependency 添加:

Copy
yarn add -D chromatic

安装完成之后,使用 GitHub 账号登录 Chromatic(Chromatic 只会请求很轻量级的权限)。然后我们创建一个项目名叫“taskbox”,并将我们已经设置好的 GitHub 仓库同步。

在 collaborators 下点击 Choose GitHub repo 并选择您的仓库。

复制为您的项目所创建的唯一 project-token。然后在命令行执行以下命令来构建并部署我们的 Storybook。请确保将 project-token 替换为您项目的 token。

Copy
yarn chromatic --project-token=<project-token>

Chromatic running

执行完成后,您会收到一个已经发布的 Storybook 对应的链接 https://random-uuid.chromatic.com。请与您的团队分享链接并获得反馈。

Storybook deployed with chromatic package

太好了!现在我们只需要一条命令就可以发布我们的 Storybook,但是每次我们需要获取团队关于 UI 的反馈时,我们都要重复的手动执行一次命令。理想情况下,我们希望每次我们提交代码时都可以同步发布最新版本的组件。我们需要持续部署 Storybook。

使用 Chromatic 持续部署

现在我们的项目存储在 GitHub 仓库中,所以我们可以使用一个持续集成(CI)服务来帮助我们自动部署 Storybook。GitHub Actions 是一个免费的集成在 GitHub 中的 CI 服务,可以帮我们轻松实现自动发布。

添加一个 GitHub Action 来部署 Storybook

在我们项目的根目录下,创建一个叫做 .github 的文件夹,并在其中创建另一个叫做 workflows 的文件夹。

如下所示创建一个叫 chromatic.yml 的文件:

Copy
.github/workflows/chromatic.yml
# Workflow name
name: 'Chromatic Deployment'

# Event for the workflow
on: push

# List of jobs
jobs:
  test:
    # Operating System
    runs-on: ubuntu-latest
    # Job steps
    steps:
      - uses: actions/checkout@v1
      - run: yarn
        #👇 Adds Chromatic as a step in the workflow
      - uses: chromaui/action@v1
        # Options required for Chromatic's GitHub Action
        with:
          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/vue/zh-CN/deploy/ to obtain it
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

出于文章的简洁起见,GitHub secrets 并没有被提及。Secrets 实际上是 GitHub 提供的安全环境变量,这样我们就不需要硬编码 project-token 了。

提交 action

在命令行中输入下述命令添加我们的修改:

Copy
git add .

然后提交:

Copy
git commit -m "GitHub action setup"

最后提交到远程仓库:

Copy
git push origin main

当您设置完成 GitHub action 之后,每次您提交代码时,Storybook 都会被自动的部署到 Chromatic 上。您可以在 Chromatic 上查看所有已经发布的 Storybook。

Chromatic user dashboard

点击最新的构建版本,一般是最上面的那个。

然后点击 View Storybook 按钮查看您最新版本的 Storybook。

Storybook link on Chromatic

与您的团队成员分享链接。作为标准应用开发流程中的一环,这非常有用且可以帮助您展示您的工作 💅。

Keep your code in sync with this chapter. View 4b1cd77 on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
视觉测试
学习如何测试您的UI组件
✍️ Edit on GitHub – PRs welcome!
Join the community
6,623 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI