📚

Chromaticでコミット毎にStorybookをデプロイしてコードレビューを効率化する

2022/03/14に公開

概要

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を追加します。

対象リポジトリが個人アカウントに紐づいている場合はこの手順は省略して問題ありません。

GitHubOrganizationChromatic

Chromatic上にプロジェクトを追加する

GitHub Organizationから対象にしたいリポジトリを選択します。

AddProject1

chromatic のnpm packageを導入する

プロジェクト作成が正常終了すると以下の画面が表示されます。

AddProject2

こちらの指示通りに chromatic を追加します。

npm install --save-dev chromatic

yarnを利用している場合は以下を実行します。

yarn add --dev chromatic

chromaticにStorybookをデプロイする

以下を実行します。

CHROMATIC_PROJECT_TOKEN 部分はchromaticに表示されている値を利用してください。

npx chromatic --project-token=CHROMATIC_PROJECT_TOKEN

下記のように表示されれば成功です。

chromatic-exec

No 'chromatic' script found in your package.jsony を選択すると package.jsonscriptschromatic が追加されさきほどのcommandが登録されます。

ただし token がハードコードされた状態なのでこのままコミットするのはやめましょう。

scripts に登録するときは以下のように環境変数から project-token を読み込むようにします。

"chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"

View your Storybook at に記載されているURLに移動するとホスティングされたStorybookが確認できます。

https://622b6c5dc31e9e003a111eb5-pxkombruwm.chromatic.com

View build details at に記載されているURLに移動するとChromatic側のBuild状況が確認できます。

https://www.chromatic.com/build?appId=622b6c5dc31e9e003a111eb5&number=6

Storybookのbuild スクリプト名について

chromatic コマンドは package.jsonscriptsbuild-storybook という名前で storybook を静的ページにBuildするためのコマンドが存在する前提になっています。

@storybook/cli を使ったときはデフォルトで build-storybook という名前で scripts に登録されます。

自分は他のscriptと統一感を持たせるために以下のような名前に変更していました。(アウトプット先のディレクトリも変更していました)

"build:storybook": "build-storybook -o build/storybook -s public"

この場合でも以下のようにoptionを渡して chromatic を実行することで対応できます。

https://www.chromatic.com/docs/cli#storybook-options

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 を利用したかったので最終的な設定は以下のようになりました。

.github/workflows/chromatic.yml
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に移動できます。

GitHubActions

UI review

https://www.chromatic.com/pullrequests?appId=622b6c5dc31e9e003a111eb5 からUI reviewという機能を有効にすると Chromatic 上からGitHubのPRが閲覧できるようになります。

UIReview

「Install Chromatic on GitHub」をクリックしてGitHubAppをインストールします。

権限を求められるので、必要なリポジトリを選択して「Approve & Install」を押下することで利用できるようになります。

ApproveInstall Chromatic

あとがき

これまではStorybookのホスティングはS3 + CloudFrontを使って自前で構築していましたが、Chromatic を使うと簡単にできることがわかりました。

独自ドメインでStorybookをホスティングしたりアクセス制限を設定したい場合は利用できませんが、Storybookを公開しても問題ないケースでは採用しても良いと思います。

最新のStorybookを確認するときに以下のようにBuild履歴の「View Storybook」から最新のStorybookを確認可能です。

https://www.chromatic.com/builds?appId=622b6c5dc31e9e003a111eb5

Build

以上になります。最後まで読んでいただきありがとうございました。

Discussion

ログインするとコメントできます