AWS Amplify + storybookでレビュー効率を上げた話 / improving review efficiency with AWS Amplify and storybook

Transcript

1. ©2022 RAKUS Co., Ltd. AWS Amplify + storybookでレビュー 効率を上げた話 株式会社ラクス　大原一晃
2. 自己紹介 • 名前： 大原 一晃 • 所属： 株式会社ラクス　SRE課 • 担当： フロントエンド（Typescrit、React、Next.js） • 最近の興味： Go、Kubenetes、CI/CD • 趣味： 筋トレ、水タバコ（シーシャ）
3. 今日話すこと • レビュー時の課題と解決策 • Amplifyでstorybookをホスティングする • Amplifyの便利な機能 ◦ ブランチ単位の自動デプロイと削除 ◦ プレビュー機能 • まとめ
4. レビュー時の課題 実装したコンポーネントをデザイナーにレビューしてもらう際に下記 のような課題があった • 直接会ってレビューしてもらう or キャプチャを送る以外にレ ビュー方法がない • キャプチャを取る用のコードを書いたり、修正毎にキャプチャを取 り直す必要があり、手間がかかる → レビューの効率が悪く、時間がかかる
5. レビュー時の課題 • 色々と検討 インフラチームにフロン ト用のサーバ構築を依 頼する？ 誰かのローカルPCで、 ずっと起動させておく？ S3で静的にホスティング する？
6. そうだ、AWS Amplify + storybookだ！
7. 解決策 • AWS Amplifyでstorybookをホスティングする ◦ AWS Amplifyとは ▪ サーバレスなアプリケーションを開発するためのフレームワーク ▪ サーバレスなバックエンド構成や静的ホスティングが簡単に可能 ◦ storybookとは ▪ UIカタログの作成ツール ▪ コンポーネント単体のUI・動作の確認が可能
8. 解決策 • storybookのUI コンポーネン トをカタログ 化 Propsを変化させて UI・動作を確認できる コンポーネント単体の 確認ができる
9. Amplifyでstorybookをホスティングする • デプロイまでの流れ ◦ Amplifyのリソースを作成 ◦ Amplifyで新しいアプリケーションを作成 ◦ ソースプロバイダを指定し、リポジトリを登録 ◦ アプリケーションの全般設定 ◦ ビルドの設定（storybookのビルド） ◦ デプロイ
10. Amplifyでstorybookをホスティングする • 実際にデプロイされた環境でstorybookを確認する このURLをデザイナーへ共有
11. Amplifyでstorybookをホスティングする • 実際にデプロイされた環境でstorybookを確認する
12. Amplifyでstorybookをホスティングする • 実際にデプロイされた環境でstorybookを確認する キャプチャを取る手間が無くなり、レビューに時間 や場所を選ばずに済むようになったので、レビュー の効率が上がった
13. Amplifyの便利な機能 • ブランチ単位の自動デプロイと削除 • プレビュー機能
14. ブランチ単位の自動デプロイと削除 • アプリケーションの全般設定で以下の3つの項目を設定する ◦ ブランチの自動検出 ▪ 「有効」に設定 ◦ ブランチの自動検出 - パターン ▪ 検出したいブランチ名を指定 ◦ ブランチの接続の自動解除 ▪ 「有効」に設定 → ブランチの増減に合わせて自動で環境を作成・削除してくれる！
15. ブランチ単位の自動デプロイと削除 • ブランチの作成前は環境がないが、、、
16. ブランチ単位の自動デプロイと削除 • 登録したリポジトリでブランチを作成し、pushすると、、、 環境が自動で作成され、 デプロイが開始される！
17. ブランチ単位の自動デプロイと削除 • ブランチを削除すると、環境も削除される
18. プレビュー機能 • PRを作成すると、自動で環境が作成される ◦ アクセス用のURLをPRにコメントしてくれる → デザイナーだけではなく、開発チーム内のコードレビューも効率化
19. まとめ • AWS Amplifyでstorybookをホスティングすることで、デザイ ナーへのレビュー効率を上げることができた • ブランチ単位の自動デプロイ機能を活用して、Amplifyの環境構 築と削除を自動化することができた • プレビュー機能を活用して、デザイナーだけではなく、開発チーム 内のレビュー効率も上げることができた
20. ご静聴ありがとうございました