本エントリでは、CircleCI と Storybook を組み合わせて、GitHub のプルリクエストから簡単に Storybook を表示する方法を紹介します。
はじめに
Storybook は React をコンポーネント単位で開発することができる開発環境です1。
私の会社でも少し前から導入しているのですが、コードレビューの時に GitHub 上から Storybook が開けたらなあと思うことがありました。
やりかたは色々あると思いますが、今回は CircleCI を使って、手軽に Storybook を閲覧できる環境をつくる方法を紹介します。
説明は良いからサンプルが欲しい!という人は、
リポジトリを用意したのでご覧ください。
手順
さっそく導入方法に入りますが、Storybook が既に build-storybook という便利な機能を用意してくれているので、特別難しいことはありません。
以下のような手順になります。
- GitHub に push
- CircleCI でテストを実行
- build-storybook コマンドで Storybook の静的ファイルを作成し、Build artifacts フォルダに保存
- 生成された html ファイルへのリンクを GitHub のプルリクエストコメントとして投稿
- レビュアーがリンクから Storybook を開く
導入
今回、コンポーネントに変更がない場合は、Storybook の生成をスキップするようにしました。
以下、storybook の導入は終わっていると仮定して、重要な部分のみ説明します。
途中に出てくる GITHUB_API_TOKEN
は GitHub の API トークンを入れた環境変数です。プルリクエストにコメントを POST できる権限を与えたトークンを CircleCI の設定画面で登録しておいてください。
まず、build-storybook コマンドを npm コマンドで使えるようにしておきます。
{
...
"scripts": {
"build-storybook": "build-storybook -c .storybook"
},
...
}
メインとなる処理。やや長いので設定ファイルから分離しています。
条件判定が大雑把なのはご了承ください。
#!/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 でも使えるはず。。
machine:
node:
version: 8.9.3
deployment:
development:
branch: /feature\/.*/
commands:
- ./scripts/build-storybook-for-code-review.sh
実行例
![Screen Shot 2017-12-16 at 10.55.08.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F89649%2Fb918cc06-196e-7186-79d6-a2b6aa1666b4.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=19390accff9a0e0959aca47874210e62)
![Screen Shot 2017-12-16 at 10.57.43.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F89649%2F112dbff6-f2ab-ae05-cd73-d1788ca50603.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1006c61fc6e91ca65530d4b9b9168727)
おわりに
iframe などで Storybook の画面を埋め込めるとさらに便利かもしれませんが、そこそこ快適になりました。
現状、プルリクエストを作ってから CircleCI が実行されないと、コメントが投稿されないという問題があるので、そのうち直したいです。
Travis CI でも同様の環境を作ることはできますが、AWS S3 のバケットを自分で用意しておく必要がありそうです。
-
最近は Vue.js にも対応したようです。 ↩