使用 GitHub Actions 实现 Storybook 部署自动化
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
直接摘自他们的网站：“Storybook 提供了一个沙箱，用于在隔离的环境中构建 UI 组件，以便您可以开发难以实现的状态和边缘情况。”
故事书
Storybook 是一款内置于你的应用程序中的应用，它让从零开始构建设计系统变得极其容易。
有关设置 Storybook 的更多详细信息，请参阅 Emma 在该主题上的帖子。
我第一次接触 Storybook 是在Netlify担任开发人员期间，当时我负责一个及时更新的 UI 项目。这套设计系统至今仍在使用，并在storybook.netlify.com上维护。从那时起，Storybook 已成为我前端开发工具中不可或缺的一部分。建立一套设计系统能够确保我的 UI 灵活应对未来的变化。
待解决的问题
我经常遇到的问题是如何建立一种自动化机制来保持我的公共设计系统的更新。在我目前的项目Open Sauced中，我使用 Netlify（我仍然很喜欢它）来实现当我向 GitHub 上的 master 分支推送更改时，网站能够持续部署到生产环境。
尽管从一开始就持续在生产站点上部署，但我一直无法以同样的方式自动化 Storybook 页面。
至少在 GitHub Actions 出现之前是这样。
GitHub Actions
GitHub Actions 于今年（11 月 13 日）正式发布，旨在让任何人都能轻松实现所有软件工作流程的自动化。这项功能让我能够将以 GitHub 为中心的自动化集成到我的开发工作流程中，这使得解决这个问题比我之前的尝试更加容易。
解决方案
我最初尝试仅使用 Netlify 及其新的monorepo功能来解决这个问题，但由于 Storybook 使用的是相同的 package.json，因此效果并不理想。
另一种解决方案是手动/storybook-static在本地打包文件，然后将输出推送到gh-pages分支。这种方法虽然可行，但不够自动化。
GitHub Actions 的众多重要特性之一，就是能够通过开源项目和GitHub Marketplace公开分享你的自动化工作流。由于我在 Beta 版期间就一直在使用 GitHub Actions，所以我了解不少可以自动部署 GitHub Pages 的 Action。我找到了一个公开分享的 Action：JamesIves/github-pages-deploy-action。它会监视我的构建文件夹（ ），并代表我/storybook-static将输出部署到分支。gh-pages
GitHub Actions 利用 YAML 文件来托管其自动化流程，并抽象化与 GitHub API 和 Webhooks 的交互，使我能够使用“部署到 GitHub Pages”操作。
我找到的这个解决方案已经应用到我的开发工作流程中，运行了几个月，并帮助支持了我的项目的新 UI 更新。
// .github/workflows/storybook.yml
on:
push
name: Publish stories if changed
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@master
- name: Build and deploy to storybook-static branch
uses: JamesIves/github-pages-deploy-action@2.0.3
env:
ACCESS_TOKEN: ${{ secrets.BDOUGIE_TOKEN }}
BRANCH: storybook-static
FOLDER: storybook-static
BUILD_SCRIPT: npm install && npm run build-storybook
额外功能：限制部署到特定路径。
使用此解决方案几个月后，我注意到每次推送到主分支时都会触发工作流，这并不理想，因为对项目的每次更改都不会包含对设计系统的更新。
我添加了一个过滤器来检查 ` storiesand`components文件夹中的更改。此过滤器可防止 CI 在没有任何更改的情况下触发 Storybook 部署。
只需添加一行代码即可进行更改，如下所示。
on:
push:
paths: ["stories/**", "src/components/**"]
我最近从ethomson 的 Actions advent 博客系列中学到了很多东西。
如果您有兴趣学习如何从头开始构建自己的 GitHub Action，请查看Hello, GitHub Actions!课程。
您可以在bdougie/open-sauced 文件夹中找到此工作流程和其他一些工作流程.github。