Chapters

部署 Storybook

学习如何在线部署 Storybook

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

在本教程中,我们在开发机器上运行了 Storybook. 您可能还想与团队分享该 Storybook,尤其是非技术成员. 值得庆幸的是,在线部署 Storybook 很容易.

导出为静态应用程序

要部署 Storybook 我们首先需要导出一个静态 web 应用程序。这个功能已经内置到了 Storybook 中并且已经预先配置。

现在当你运行 npm run build-storybook，它在 storybook-static 目录输出一个静态的 Storybook。然后可以将其部署到任何静态站点托管服务。

发布 Storybook

本教程使用 Chromatic，这是一个有 Storybook 维护者提供的一个免费发布托管服务。它允许我们安全可靠的部署和托管我们的 Storybook。

GitHub 仓库设置

在我们开始前，我们本地需要与远程控制服务版本同步。在开始吧章节中我们的项目已经初始化，Create React App (CRA) 已经为我们创建了一个本地仓库。在此阶段，我们添加文件完成第一次提交是安全的。

发出以下命令以添加并提交目前为止我们的所有修改。

Copy

git add .

其次是：

Copy

git commit -m "taskbox UI"

转到 GitHub 并设置存储库这里。将您的仓库命名为"taskbox"，与我们的本地项目相同。

GitHub setup

在新的 repo 设置中，复制 repo 的原始 URL，并使用以下命令将其添加到 git 项目中：

Copy

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

最后将本地仓库推送到 GitHub 远程仓库

Copy

git push -u origin main

开始 Chromatic

添加包作为开发环境依赖。

Copy

yarn add -D chromatic

当依赖包安装完成时，登录 Chromatic 以及 Github 账号（Chromatic 仅要求一些轻量的权限）。接下来我们将创建一个新仓库命名为“taskbox”并同步到我们设置好的 Github 仓库。

点击协作者下的 Choose GitHub repo 并选择你的仓库。

复制为你的项目生成的唯一 project-token。执行下面的命令行，构建并部署我们的 Storybook。确保将 project-token 替换为你项目的 project-token。

Copy

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

Chromatic running

当完成后，你将得到一个链接 https://random-uuid.chromatic.com 到已发布的 Storybook。分享该链接到你的团队中获得反馈。

Storybook deployed with chromatic package

不错！我们通过一行命令发布了 Storybook，但是每次我们想要获得 UI 实现的反馈时都需要手动执行命令。理想的情况是，每当我们推送代码时发布组件的最新版本。我们需要不断部署 Storybook。

使用 Chromatic 持续部署

现在我们的项目托管在 Github 仓库，我们能够使用持续集成 CI 服务完成 Storybook 自动化部署。GitHub Actions 是一个免费的 CI 服务，内置在 Github 中，轻松实现自动发布。

添加 GitHub Action 部署 Storybook

在项目根文件夹下创建一个新目录命名为 .github 并在其中创建另一个 workflows 目录。

像下面的一样，创建一个新文件命名为 chromatic.yml。将 project-token 替换为你项目的 project token。

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

为了简洁起见，没有提到 GitHub secrets 。Secrets 是 Github 提供的一个安全环境变量是你不需要对 project-token 进行硬编码。