個人開発サイトのStorybookをChromaticで公開してみました

現在、Web開発の学習のためにショッピングサイト (opens in a new tab)を作成しています。フロントエンドの共通コンポーネントをStorybook (opens in a new tab)で管理しており、以前からせっかくなので公開したいなという気持ちがありました。今回、Storybookのコアメンテナが開発しているChromatic (opens in a new tab)を使うことで簡単にStorybookを公開できることを知り、公式感のあるサービスということもあって早速試してみました。

ChromaticでStorybookを公開する

ChromaticでStorybookを公開する方法は、以下のドキュメントを参考にしました。

• https://www.chromatic.com/docs/setup/ (opens in a new tab)
• https://www.chromatic.com/docs/github-actions/#support-for-actions-checkout-v2-and-above (opens in a new tab)

最初のデプロイをしてみると、Chromatic上では以下のページが表示されました。

肝心のStorybookはどこから確認できるのか少し迷いましたが、下にスクロールしていくとリンクがありました。

リンクをクリックすると、Storybookが表示されました🥳

mainブランチの最新のStorybookのURLを取得する

最後に、GitHubリポジトリのREADME.mdにStorybookのリンクを追加しようと思ったのですが、ここで問題が1つありました。それは、デプロイごとにStorybookのURLが変わってしまうことです。

• 1回目のURL: https://65224f832ec3028e25f863e1-tqszkkyisb.chromatic.com/ (opens in a new tab)
• 2回目のURL: https://65224f832ec3028e25f863e1-sxmowkoksw.chromatic.com/ (opens in a new tab)

出来れば、README.mdにはmainブランチの最新のURLを追加したいのですが、このままではREADME.mdを毎回更新する必要があります。

何か情報がないかとChromaticのドキュメントを調べてみると、GitHub Actionsの設定方法のページ (opens in a new tab)にヒントがありました。

どうやら、https://<ブランチ名>--<プロジェクトID>.chromatic.comというフォーマットで最新のStorybookのURLを取得できそうです。

ということで、以下のURLにアクセスしてみると、Storybookのページが表示されました👏

• https://main--65224f832ec3028e25f863e1.chromatic.com/ (opens in a new tab)