storybook を GitHub Pages に公開する

始めに

個人開発でも、チーム開発でも
コンポーネントを共有するライブラリとして、storybook を採用している人は多いと思います。

今回は、GitHub Actions を使って、GitHub Pages に storybook を deploy する方法を紹介します。

できること

main ブランチに push されるたびに、自動で storybook を build し、GitHub Page に deploy してくれる。

対象

storybook をローカルで立ち上げることができている状態で、
あとは、公開をするだけって状態を前提に話すので、
storybook をプロジェクトに導入したいよ。って方は別の記事を参考にしてください。

1. package.json の修正

コマンド	内容
build-storybook	default では ./storybook-static/ に静的サイト用のファイルを出力 -o オプションを使うと、出力先を変更できます。

package.json

"script": {
  "build:storybook": "yarn build-storybook -o ./docs",
}

注意
僕は、 -o オプションを使って、 ./docs フォルダを指定しています。
コマンド名は、なんとなくて、 build:storybook としています。
*出力先が default の ./storybook-static のままで良い人は、この後の build:storybook は全て、 build-storybook に読み替えてください。

---

build コマンドを手元で流してみます

shell

$ yarn build:storybook

結果は

tree

docs
├── 0.b1a9e4f5284a88248d34.manager.bundle.js
├── 4.9d9ccf873e493c6511ab.manager.bundle.js
├── 4.9d9ccf873e493c6511ab.manager.bundle.js.LICENSE.txt
├── 5.8c921a2db1e270256e1a.manager.bundle.js
├── 5.8c921a2db1e270256e1a.manager.bundle.js.LICENSE.txt
├── 6.2c2c31379780659e9283.manager.bundle.js
├── 7.853e88e138eb155930bd.manager.bundle.js
├── favicon.ico
├── iframe.html
├── index.html
├── main.ecf728ce.iframe.bundle.js
├── main.f9c19ad33e0fce642d94.manager.bundle.js
├── runtime~main.239ca6419d72085b4ae8.manager.bundle.js
├── runtime~main.b0af52cf.iframe.bundle.js
├── static
├── vendors~main.1377ea53.iframe.bundle.js
├── vendors~main.1377ea53.iframe.bundle.js.LICENSE.txt
├── vendors~main.1377ea53.iframe.bundle.js.map
├── vendors~main.f7186b48e4b35d33b229.manager.bundle.js
└── vendors~main.f7186b48e4b35d33b229.manager.bundle.js.LICENSE.txt

こんな感じになります。

shell

open ./docs/index.html

中身を開いてみると、ローカル起動しているものと同じものが見れるはずです。

次に、この ./docs/index.html を表示する GitHub　Pages　を設定していきます。

2. GitHub Pages の設定

Repository > settings > Pages
より、以下のように設定します

設定すると、GitHub Pages の URL が表示されます。

次に、
そこに、先ほどの ./docs/index.html の内容を表示してくれる workflow を作っていきます。

1. GitHub Actions の設定

./.github/workflows に新しいファイルを生成します

./.github/workflows/storybook.yml

name: deploy-storybook

on:
  push:
    branches:
      - main

jobs:
  deploy-storybook:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: install packages
        run: yarn install
      - name: build storybook
        run: yarn build:storybook
      - name: deploy storybook
        uses: JamesIves/github-pages-deploy-action@4.1.0
        with:
          branch: gh-pages
          folder: docs

これを追加してあげるだけで良いです。
feature ブランチでテストをしたい方は

./.github/workflows/storybook.yml

on:
  push:
    branches:
      - main
      - ここにテストしたいブランチ名を入れて push してあげてください。

以上です。

ただ、この設定だとどんなファイルに変更があった場合でも走ってしまうので、
関係ない設定ファイルの更新は ignore に設定してあげても良いかもしれません。

最後に

GitHub Pages　の URL　は Repository　の details　, website の欄にでも入れておいてあげると、チームで開発してる場合は、親切かもしれないです。

Links

この設定を行なっている repository です。
https://github.com/yasudanaoya/my-editune

説明不足の箇所があるかもしれません、記事だけで理解できなかった場合は参考にしてください。