コードレビューに役立つ React Storybook の閲覧環境を作る

本エントリでは、CircleCI と Storybook を組み合わせて、GitHub のプルリクエストから簡単に Storybook を表示する方法を紹介します。

はじめに

Storybook は React をコンポーネント単位で開発することができる開発環境です¹。

私の会社でも少し前から導入しているのですが、コードレビューの時に GitHub 上から Storybook が開けたらなあと思うことがありました。
やりかたは色々あると思いますが、今回は CircleCI を使って、手軽に Storybook を閲覧できる環境をつくる方法を紹介します。

説明は良いからサンプルが欲しい！という人は、
リポジトリを用意したのでご覧ください。

手順

さっそく導入方法に入りますが、Storybook が既に build-storybook という便利な機能を用意してくれているので、特別難しいことはありません。
以下のような手順になります。

1. GitHub に push
2. CircleCI でテストを実行
3. build-storybook コマンドで Storybook の静的ファイルを作成し、Build artifacts フォルダに保存
4. 生成された html ファイルへのリンクを GitHub のプルリクエストコメントとして投稿
5. レビュアーがリンクから Storybook を開く

導入

今回、コンポーネントに変更がない場合は、Storybook の生成をスキップするようにしました。

以下、storybook の導入は終わっていると仮定して、重要な部分のみ説明します。
途中に出てくる GITHUB_API_TOKEN は GitHub の API トークンを入れた環境変数です。プルリクエストにコメントを POST できる権限を与えたトークンを CircleCI の設定画面で登録しておいてください。

まず、build-storybook コマンドを npm コマンドで使えるようにしておきます。

package.json

{
  ...
  "scripts": {
    "build-storybook": "build-storybook -c .storybook"
  },
  ...
}

メインとなる処理。やや長いので設定ファイルから分離しています。
条件判定が大雑把なのはご了承ください。

scripts/build-storybook-for-code-review.sh

#!/bin/bash
set -eu

# コンポーネントに変更がなければスキップ
if git diff master...HEAD --name-only | grep -q "src/\|stories/" ; then
  :
else
  echo "[Storybook] Skip"
  exit 0
fi

# プルリクエストが作られていなければスキップ
PULL_REQUEST_ID="${CI_PULL_REQUEST##*/pull/}"
if [ -z "$PULL_REQUEST_ID" ]; then
  echo "[Storybook] Skip"
  exit 0
fi

# 静的ファイルを作り build artifacts として保存
npm run build-storybook
mkdir -p "$CIRCLE_ARTIFACTS/storybook/"
mv storybook-static "$CIRCLE_ARTIFACTS"

# GitHub のプルリクエストにリンクを付けてコメントを投稿
STORYBOOK_URL="$CIRCLE_BUILD_URL/artifacts/$CIRCLE_NODE_INDEX/$CIRCLE_ARTIFACTS/storybook-static/index.html"
curl -X POST \
     -H "Authorization: bearer $GITHUB_API_TOKEN" \
     -H "Accept: application/vnd.github.v3.html+json" \
     -d "{\"body\":\"[Storybook] Created ([view stories]($STORYBOOK_URL))\"}" \
     "https://api.github.com/repos/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME/issues/$PULL_REQUEST_ID/comments"

CircleCI 設定例を載せておきます。
以下は 1.0 の設定ですが、少し修正すれば 2.0 でも使えるはず。。

circle.yml

machine:
  node:
    version: 8.9.3
deployment:
  development:
    branch: /feature\/.*/
    commands:
      - ./scripts/build-storybook-for-code-review.sh

実行例

図1: GitHub 図2: Storybook

おわりに

iframe などで Storybook の画面を埋め込めるとさらに便利かもしれませんが、そこそこ快適になりました。
現状、プルリクエストを作ってから CircleCI が実行されないと、コメントが投稿されないという問題があるので、そのうち直したいです。

Travis CI でも同様の環境を作ることはできますが、AWS S3 のバケットを自分で用意しておく必要がありそうです。

1. 最近は Vue.js にも対応したようです。 ↩