Chromaticでコミット毎にStorybookをデプロイしてコードレビューを効率化する
概要
GitHub上にコミットが行なわれたタイミングで静的ファイル化したStorybookを閲覧できるようにする方法をまとめました。
これを行なうことでコードレビュー時にUIの変更点を確認がやりやすくなります。
Storybook公式 で紹介されている方法です。
今回は実際に自分が 友人 と開発・運用しているサービス LGTMeow にこれらの設定を追加したので、実際の設定内容を踏まえて解説します。
対象読者
- GitHub上でコードレビューを用いた開発手法を実践している人（もしくは実践したいと思っている人）
- Storybookを利用したことがある人
筆者のバックグラウンド
エンジニア歴はもうすぐ8年程です。
バックエンドやクラウドがメインでしたが、ここ1年半ほどはフロントエンドメインです。
業務でも個人開発でもNext.jsを利用しています。
ちなみに最初にこの方法を知ったのは READYFOR株式会社 さんに業務委託として参加したときです。
フロントエンドチーム内でコミットごとに静的ファイル化したStorybookが閲覧できるようになっており非常に開発体験が良かったので、他の現場でもこのアイデアを採用しています。
この記事で説明すること
Chromatic を利用して静的ファイル化したStorybookをHTTPSで閲覧できるようにする手順を解説します。
GitHub Actionsを用いてこれらの動作の自動化も行ないます。
StorybookやGitHub Actions自体の解説は今回は割愛させていただきます。
具体的な手順
Chromaticのアカウントを作成する
https://www.chromatic.com の「Sign up」からアカウントを作成します。
今回はGitHubを利用するのでGitHubで登録します。
GitHub OrganizationをChromaticに読み込めるようにする
ログイン中のページから対象のGitHub Organizationを追加します。
対象リポジトリが個人アカウントに紐づいている場合はこの手順は省略して問題ありません。
Chromatic上にプロジェクトを追加する
GitHub Organizationから対象にしたいリポジトリを選択します。
chromatic のnpm packageを導入する
プロジェクト作成が正常終了すると以下の画面が表示されます。
こちらの指示通りに chromatic を追加します。
npm install --save-dev chromatic
yarnを利用している場合は以下を実行します。
yarn add --dev chromatic
chromaticにStorybookをデプロイする
以下を実行します。
CHROMATIC_PROJECT_TOKEN 部分はchromaticに表示されている値を利用してください。
npx chromatic --project-token=CHROMATIC_PROJECT_TOKEN
下記のように表示されれば成功です。
No 'chromatic' script found in your package.json で y を選択すると package.json の scripts に chromatic が追加されさきほどのcommandが登録されます。
ただし token がハードコードされた状態なのでこのままコミットするのはやめましょう。
scripts に登録するときは以下のように環境変数から project-token を読み込むようにします。
"chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
View your Storybook at に記載されているURLに移動するとホスティングされたStorybookが確認できます。
View build details at に記載されているURLに移動するとChromatic側のBuild状況が確認できます。
Storybookのbuild スクリプト名について
chromatic コマンドは package.json の scripts に build-storybook という名前で storybook を静的ページにBuildするためのコマンドが存在する前提になっています。
@storybook/cli を使ったときはデフォルトで build-storybook という名前で scripts に登録されます。
自分は他のscriptと統一感を持たせるために以下のような名前に変更していました。（アウトプット先のディレクトリも変更していました）
"build:storybook": "build-storybook -o build/storybook -s public"
この場合でも以下のようにoptionを渡して chromatic を実行することで対応できます。
npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --build-script-name build:storybook --output-dir build/storybook
しかし余計な設定が増えるので @storybook/cli がデフォルトで生成する build-storybook を利用するのが無難です。
GitHub Actions で chromaticへのデプロイを自動化する
https://www.chromatic.com/docs/github-actions を参考に作成します。
actions/checkout@v2 を利用したかったので最終的な設定は以下のようになりました。
name: chromatic
on: push
jobs:
chromatic-deployment:
name: Deploy Storybook to chromatic
runs-on: ubuntu-latest
timeout-minutes: 7
steps:
- name: Checkout repository
uses: actions/checkout@v2
with:
fetch-depth: 0
- name: Install dependencies
run: npm ci
- name: Publish to Chromatic
uses: chromaui/action@v1
with:
token: ${{ secrets.GITHUB_TOKEN }}
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
CHROMATIC_PROJECT_TOKEN はあらかじめ Actions secrets としてGitHubリポジトリに登録する必要があります。
この記事では登録手順は割愛させていただきます。
設定が成功すると以下のようにコミットごとにStorybookのURLが生成されます。
※ Storybook Publish → DetailsからStorybookのURLに移動できます。
UI review
https://www.chromatic.com/pullrequests?appId=622b6c5dc31e9e003a111eb5 からUI reviewという機能を有効にすると Chromatic 上からGitHubのPRが閲覧できるようになります。
「Install Chromatic on GitHub」をクリックしてGitHubAppをインストールします。
権限を求められるので、必要なリポジトリを選択して「Approve & Install」を押下することで利用できるようになります。
あとがき
これまではStorybookのホスティングはS3 + CloudFrontを使って自前で構築していましたが、Chromatic を使うと簡単にできることがわかりました。
独自ドメインでStorybookをホスティングしたりアクセス制限を設定したい場合は利用できませんが、Storybookを公開しても問題ないケースでは採用しても良いと思います。
最新のStorybookを確認するときに以下のようにBuild履歴の「View Storybook」から最新のStorybookを確認可能です。
以上になります。最後まで読んでいただきありがとうございました。
Discussion