StorybookをAmplifyに自動デプロイできるようにした話

こんにちは、原口です。

スペースマーケットでは、UIコンポーネントを確認するツールにStorybookを使用しています。

UIコンポーネントをカタログ化し、コンポーネントやデザインの確認をすることができるためとても便利なStorybookですが、コンポーネントを確認するためには都度Storybookを立ち上げる必要があることや、レビューの時にブランチの切り替え→Storybookの立ち上げ直しが地味に時間がかかることに若干の手間や面倒臭さを感じていました。

またフロントエンドエンジニア以外がStorybookを使用することもあるため、できるだけ簡単にStorybookのチェックを行えるようにしたいという気持ちもありました。

そこでこれらの課題を解決するためにサーバレス環境にStorybookをホスティングし、ローカルで立ち上げることなくStorybookのチェックができるようにしました。

また下記の3つの要件も盛り込むことにしました。

1. GitHubのPull Request（以下PR）を作成時、変更のプッシュ時、masterマージ時に自動デプロイする
2. PRがクローズされたら、自動アンデプロイする
3. PR状況（開始、完了、失敗）をSlackに通知する

これらの要件を実現するために1,2はAWS Amplify Consoleを使用し、3はAmplify SNSとSlackを連携させて実装しました。

簡単ではありますが、設定の手順です。
（基本的にAmplify Console上でポチポチと設定を行っていくだけです。）

設定

まずはStorybook用のアプリを作成します。

次にAmplifyと連携させるリポジトリとブランチを設定します。

ビルド設定の構成は適宜変更してください。今回はpackage.jsonにbuildコマンドを書いていたので、そちらに変更しました。変更したら次へ。

最後に保存をしてデプロイを開始します。

デプロイが完了されました😳

アーキテクチャ

大まかな流れとしては、
1. 連携したGitHubリポジトリでPRが新規で作成された時や、そのブランチ対しプッシュされた時、またはPRがmasterにマージされると、Amplifyに通知されます。
2. 通知を受け取ったAmplifyがデプロイとビルドを開始し、同時にSlackへデプロイ開始の通知を行います。
3. デプロイが完了したらSlackへデプロイ完了の通知がされます。
4. PRがクローズされたタイミングで、Amplifyがアンデプロイを行い削除

となります。

PR作成時やプッシュ時の自動デプロイや、PRをクローズした時のアンデプロイについては、Amplify ConsoleのPreviewsという機能で実現することができました。

Slack通知については、Amplify Consoleのメール通知機能を利用して、ビルドの開始と終了をメールで受け取れるように設定します。メール通知機能を設定すると、Amazon SNSが設定されるので、AWS Lambdaを作成して、SlackのIncoming WebHooksと連携させることで、Slackへの通知を実現することができました。

感想

StorybookでUIコンポーネントの確認を行いたい場面が意外と多く、自分自身便利だと感じることが多々ありました。また、メンバーからも喜びの声を聞くことができました💪😉

最後に
今回以下のページを参考にさせていただきました🙏

参考にさせていただいたページ
https://tech.actindi.net/2019/12/15/090524
https://tanshio.net/blog/2020/03/amplify-notification-send-to-slack/
https://1k6a.com/2019/07/amplify-notification-slack/