部署 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
替换为你的项目 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/svelte/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 的最新版本。
使用该链接并与你的团队成员分享。这作为标准应用开发流程的一部分非常有用,或者只是用来展示工作 💅。