tschaub/gh-pagesを使用してStorybookをGitHub PagesへデプロイするワークフローをGitHub Actionsで自動化する

今回やりたいこと

• mainブランチへのPull Request発行をトリガーとする
• StorybookをGitHub Pagesへデプロイしたい
• GitHub Pagesへのデプロイにtschaub/gh-pagesを使用したい

前提

ローカル環境

• M1 Macbook Air
• macOS Monterey v12.4
• Node.js 18.6.0
• パッケージマネージャにnpm@v8.13.2を採用
• Storybook v6.5.10

最初に結論から

name: Build Storybook to GitHub Pages

on:
  pull_request:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install Dependencies from `package-lock.json`
        run:
          npm ci

      - name: Build Storybook
        run: 
          npm run build-storybook

      - name: Deploy Storybook with gh-pages
        run: |
          git remote set-url origin \
            https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
          npx gh-pages -d storybook-static \
            -u "github-actions-bot <support+actions@github.com>"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

解説

トリガーイベント

mainブランチへのPull RequestイベントをトリガーにしてGitHub Actionsを実行する。 ここでは特にclosedとかのイベントのタイプで縛ってない

on:
  pull_request:
    branches:
      - main

Checkout ~ Build Storybook

あんまり言うことない...

Deploy Storybook with gh-pages

tschaub/gh-pagesをCLIとして使用すると静的ファイルのGitHub Pagesへのデプロイが可能。 GitHub Actions内で使用する方法はREADME.mdに記載がある。

GITHUB_TOKENが必要なので注意。