部署 Storybook
在本教程中,我们在本地开发机器上构建了组件。在某些时候,我们需要分享我们的工作以获得团队反馈。让我们在线部署 Storybook,以帮助队友评审 UI 实现。
导出为静态应用
要部署 Storybook,我们首先需要将其导出为静态 Web 应用。此功能已内置在 Storybook 中并预先配置好。
运行 yarn build-storybook
将在 storybook-static
目录中输出一个静态 Storybook,然后可以将其部署到任何静态站点托管服务。
发布 Storybook
本教程使用 Chromatic,一个由 Storybook 维护者提供的免费发布服务。它允许我们将 Storybook 安全可靠地部署和托管在云端。
在 GitHub 中设置仓库
在我们开始之前,我们的本地代码需要与远程版本控制服务同步。当我们在开始章节中设置项目时,我们已经初始化了一个本地仓库。在此阶段,我们已经有一组可以推送到远程仓库的提交。
前往 GitHub 并在此为我们的项目创建一个新仓库。将仓库命名为“taskbox”,与我们的本地项目相同。
在新仓库中,获取仓库的 origin URL,并使用此命令将其添加到您的 git 项目中
git remote add origin https://github.com/<your username>/taskbox.git
最后,使用此命令将我们的本地仓库推送到 GitHub 上的远程仓库
git push -u origin main
获取 Chromatic
将该包添加为开发依赖项。
yarn add -D chromatic
安装软件包后,使用您的 GitHub 账户登录 Chromatic(Chromatic 只会请求轻量级权限),然后我们将创建一个名为“taskbox”的新项目,并将其与我们设置的 GitHub 仓库同步。
在合作者下方点击 Choose GitHub repo
并选择您的仓库。
复制为您的项目生成的唯一 project-token
。然后在命令行中执行以下命令来构建和部署我们的 Storybook。请确保将 project-token
替换为您的项目令牌。
yarn chromatic --project-token=<project-token>
完成后,您将获得一个指向您已发布 Storybook 的链接 https://random-uuid.chromatic.com
。与您的团队分享此链接以获取反馈。
太棒了!我们用一个命令发布了 Storybook,但是每次想要获得 UI 实现反馈时都手动运行命令会很重复。理想情况下,我们应该在每次推送代码时发布最新版本的组件。我们需要持续部署 Storybook。
使用 Chromatic 进行持续部署
现在我们的项目已托管在 GitHub 仓库中,我们可以使用持续集成 (CI) 服务自动部署我们的 Storybook。GitHub Actions 是一个内置于 GitHub 的免费 CI 服务,它使自动发布变得简单。
添加一个 GitHub Action 来部署 Storybook
在我们的项目根文件夹中,创建一个名为 .github
的新目录,然后在其中创建一个名为 workflows
的子目录。
创建一个名为 chromatic.yml
的新文件,内容如下所示。
# Workflow name
name: 'Chromatic Deployment'
# Event for the workflow
on: push
# List of jobs
jobs:
chromatic:
name: 'Run Chromatic'
runs-on: ubuntu-latest
# Job steps
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- run: yarn
#👇 Adds Chromatic as a step in the workflow
- uses: chromaui/action@latest
# Options required for Chromatic's GitHub Action
with:
#👇 Chromatic projectToken, see https://storybook.org.cn/tutorials/intro-to-storybook/react/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。
点击最新构建。它应该位于最顶部。
然后,点击 View Storybook
按钮以查看您的 Storybook 的最新版本。
使用该链接并与您的团队成员分享。这对于标准的应用开发流程很有帮助,或者仅仅是展示您的工作成果 💅。