StorybookをGitHub Actionで自動的にGiHubPagesで公開するMEMO

StoryBookをGitHub Pagesで公開して見えるようにすると結構便利そうだったのでやり方をMEMO📝

Storybookの導入方法については以下のエントリを参照してください📚

madogiwa0124.hatenablog.com

今回は以前書いた以下のアクションにStorybookのbuildプロセスを追加してGitHub Pagesに自動的に公開する手順をメモしていきます✍

madogiwa0124.hatenablog.com

といっても非常にかんたんでStorybookにはもとから静的に出力するbuild-storybookが用意されているので、それをwebpackのbuildに向けて上げるだけです！

storybook.js.org

出力先ディレクトリは-oオプションで指定できるので以下のようなActionを用意してあげれば良さそうです🙆

name: github pages

on:
  push:
    branches:
      - master

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - name: checkout
        uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: install deps
        run: npm install
      - name: run build
        run: npm run build
      - name: run build storybook
        run: npm run build-storybook -o ./dist/storybook
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          publish_dir: ./dist

これでwebpackのデフォルトのbuild先であるdistのstorybook配下にStorybookの静的ファイルが配置されるようになるのでhttps://foo.github.io/repo_name/storybook/のような形で閲覧することが出来ます✨

おわり👋