Intro to Storybook
  • 开始吧
  • 简单组件
  • 合成组件
  • 数据
  • 页面
  • 部署
  • 测试
  • 插件
  • 总结
  • 贡献
Framework:
ReactReact NativeVueAngularSvelteEmber

部署Storybook

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

在此教程中,我们在自己的电脑上构建了组件。某些时候我们还需要和组员分享我们的工作以获得其他人的反馈。让我们部署 Storybook 让其他成员审查实现好的 UI 吧。

导出为一个静态应用

为了部署 Storybook 我们首先需要将其导出为一个静态 web 应用。Storybook 已经集成了此功能并已预配置完成,我们只需要将开始吧章节中的脚本更新即可。

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

发布 Storybook

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

在 GitHub 中创建一个仓库

在我们开始之前,我们首先需要将本地代码和一个远程版本控制服务关联起来。在开始吧章节中,Vue CLI 初始化时已经为我们创建了一个本地仓库。也就是说我们已经拥有了一系列可以提交到远程仓库的 commits。

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

设置GitHub

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

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

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

$ git push -u origin main

使用 Chromatic

追加下述包到 development dependency 中:

yarn add -D chromatic

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

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

复制为您的项目所创建的唯一project-token。使用下述的命令来构建并部署我们的 Storybook。请确保替换project-token为您项目的 token。

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的文件,内容如下。替换CHROMATIC_PROJECT_TOKEN为您项目所持有的 token。

.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/en/deploy/ to obtain it
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

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

提交 action

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

git add .

然后提交:

git commit -m "GitHub action setup"

最后提交到远程仓库:

git push origin main

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

Chromatic user dashboard

点击最新的 build,一般是在最上方。

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

Storybook link on Chromatic

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

Keep your code in sync with this chapter. View 99b2158 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!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Community GitHub Twitter Discord chat Youtube Component Driven UIs
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify