開発中のStorybookをCloudflarePagesにデプロイするとレビューが楽になった件
TL;DR
- CloudflarePagesを使うことでプルリクエスト毎に最新のStorybookを確認することができる。
これにより外出先でもスマホでも簡単にStorybookを確認してレビューができる。 - Chromaticと比較してスナップショットの比較はできないが、Storyが増えても上限を気にする必要がないので気が楽。
- Chromaticではできないアクセス制限も設けることが可能。
はじめに
今回、私が運営している学生団体のホームページをチームで開発し、Storybookでコンポーネント管理をしている状況でレビューをする際に楽になったお話をさせていただきます。
プルリクエストのレビューをするときの課題
Storybookを使用していて、プルリクエストをレビューする際に実際にどういったコンポーネントが作成されたのか確認するのがめんどくさい。
Chromaticの問題点
まずStorybookをレビューする際にChromaticを使用するケースが考えられます。
しかし、これにはいつくかの課題があります。
1. 無料プランに制限がある
Chromaticは無料でも使えますが、スナップショットが5000枚/月となっていて
50個のStoryを作成した場合100回/月の更新で上限に来てしまいます。
これはとても便利な機能ですが、今回採用している開発方法がIssue Drivenを採用しており、チケット単位を軽くしており上限に当たってしまう可能性がありました。
これを回避する為にストーリー毎に設定をしていても大変です。
最適化の例↓
2. 有料プランが高い
先ほど無料プランの話をしましたが、「課金すれば済む話では？」という疑問が浮かぶかもしれません。しかしChromaticの有料プランは最低でも$149/月かかります。これは相当なコストで、学生団体の規模ではとても見合わない料金なので諦めざるを得ませんでした。
3. プロジェクトを非公開にできない
開発中のStoryなどを非公開にしたいというケースもあると思います。
しかし、Chromaticでは非公開にすることはできない仕様になっています。(なんで？)
プライベートリポジトリだからといって非公開になることはなく、Chromaticにデプロイすると必ず全世界から閲覧することがあります。
閲覧されたから何と言うことはあまりないのかもしれませんが、開発中のStorybookは開発者などの関係者だけがアクセスしたいというケースには対応できないと言うのはちょっと微妙なところです。
Chromaticを使わないパターン
これまでの話を踏まえた上でChromaticを選択しない場合にどういった手法が考えられるでしょうか。
プルリクエストに写真や動画など証跡を残してもらう
真っ先に考えられるのがプルリクエストに写真や動画など証跡を残してもらう方法です。
これはプルリクエストを作成する際に大きな障壁になってしまいます。
わざわざプルリクエストを作成する度にスクリーンショットを撮って、修正した後もスクリーンショットを撮ってと、かなりの手間になってしまいます。
さらに、Storybookの利点であるパラメータを変更することができなくなります。
これらを加味するとプルリクエストに証跡を残すのは最適な方法とは言いにくいです。
ローカルでpullしてStorybookを起動する
これは1番確実な方法ですが、レビュワーの負担がかなり大きくなってしまいます。
しかも外出先でスマホしか手元にない場合でもレビューしたい場合ビルドするという行為がかなりの手間になってしまい、不便な状況に陥ってしまいます。
CloudflarePagesのココが凄い！
無料プランの範囲がそこそこある
Cloudflare Pagesではビルド回数が無料プランで500回/月まで可能です。
さらに$20/月課金することで10倍の5000回/月まで拡張することができます。
プルリクエスト毎にビルドしてくれる
CloudflarePagesとGithubのリポジトリを紐付けておき、ターゲットをdevelopにしておくと、
feature/issue-10などのようなブランチからdevelopに対してプルリクエストを作成した際に自動でビルドして、専用のドメインを作成して閲覧できるようになります！
プルリクエストを作成した後に変更を加えた場合再度ビルドしてくれます。
なので、外出先でも最新のStorybookを確認することができ、スマホでもレビューができるのでとても便利です。
プルリクエストを作成したときにビルドされた結果↓
Storybookへのアクセスを制限できる
ChromaticではStoryへのアクセスを制限できないという話をしましたが、
CloudflarePagesでは一味違います！
CloudflarePagesではCloudflareAccessを使用することで、Githubアカウント認証やOTPなどの設定をすることができます！
これによりデプロイしたサイトを保護し、実質的にプライベートアクセスを可能にします！
設定方法は以下の記事が良さそうだったので紹介します！↓
デメリット
メリットを3つ挙げさせていただきましたが、デメリットもあります。
スナップショットでの比較ができない
Chromaticを使わないのでスナップショットが作成されないので、差分での比較ができません。
複数のPagesを設定していると上限に当たる可能性
複数のPagesを設定している場合、500回/月のビルドにすぐ頭打ちしてしまう可能性があるので、ゴリゴリPagesで他も作業していると言う方は課金をするか、使用を控える必要がありそうです。
CloudflarePagesへのデプロイ方法
リポジト連携
Workers & Pagesのページから作成を押下し以下の画面に遷移したらGitに接続をクリックします。その後リポジトリを設定した後セットアップの開始を押下します。
ビルドとデプロイのセットアップ
ここでは以下のパラメータを設定します。
各々の環境に合わせて設定を変更してください。
| 項目 | 設定 |
|---|---|
| プロダクションブランチ | develop(開発用ブランチ) |
| フレームワーク プリセット | React |
| ビルド コマンド | npm run build-storybook |
| ビルド出力ディレクトリ | storybook-static |
設定が完了したら保存してデプロイするを押下し完了です！(簡単！！)
まとめ
CloudflarePagesを使うことでChromaticより制限を気にせず、アクセス制限も設けることができます。
ただChromaticを使用しないので当然スナップショットの差分比較が行えないので細かい修正を確認するときは大変になります。
なのでケースバイケースですがスナップショットでの比較をするほど細かい修正をする必要がない場合はCloudflarePagesにStorybookをデプロイすると言うのも一つの手ではないでしょうか。(実際に使っていて結構良かったです)
本記事内で間違っていることや、より良い方法がある場合はぜひ教えていただけますとありがたいです！
Discussion