AWS Amplifyを利用してNext.jsのアプリのStorybookをサクッと確認したい！

こちらは、AWS AmplifyとAWS×フロントエンド #AWSAmplifyJP Advent Calendar 2023の17日目の記事です！🎄📅🎁
https://qiita.com/advent-calendar/2023/amplify
前日の記事は、「Amplify Boost Up #04 登壇の振り返り」 でした！

📌 はじめに

こんにちは！@Ryo54388667です!☺️

普段は都内でフロントエンドエンジニアとして業務をしてます！
主にTypeScriptやNext.jsといった技術を触っています。

Next.js製のアプリのStorybookをAWS Amplify(以下Amplify)にホスティングする方法について紹介していきます！

📌 背景

デザイナーとすり合わせをしやすくしたい！

デザイナーさんとUIについての議論の場があるプロジェクトも多いのではないでしょうか？
デザインでは視覚的な要素が重要で、テキストベースのコミュニケーションだけでは細かなニュアンスが伝わりにくいですよね。特に、ホバーアクション時の挙動やドロップダウンメニューの開閉時の表示など、インタラクティブなUIに関してはテキストコミュニケーションのみでイメージを共有するのは難しいのではないのでしょうか？
「クリックすると、スーっと下に行って、ポンっと表示される」など謎の擬音が並ぶ表現になってしまいます。。僕だけかもしれませんが。。😇

方向性が違っていた場合に生じる手戻りの工数はバカにできない!

開発プロセスの中盤や終盤になってからデザインの方向性の問題が発覚すると、既に実装された機能の大幅な修正が必要になることがあります。ツラすぎぃ。。
方向性を固めることを迅速に行う必要があります!この方向性を決める際にプロトタイプがあると話がしやすいですよね。「プロトタイプ作成を迅速にできて、かつ、共有するのも簡単であるという方法があればなぁ。。」と常々思っていました。

これらの背景から、ソリューションを考えた時に、「Amplify と Storybook でデキるやん！」 となりました。この2つの連携方法を紹介します！👌

📌 AmplifyにStorybookをホスティングする手順

Amplifyのビルド設定

ホスティング方法はめちゃくちゃ簡単です！
注意することは2点だけです！

1点目はモノレポ構成のチェックボックスにチェックをすることです。
下の画像のようなチェックボックスです。

最初はモノレポのチェックは外していたのですが、ビルドが通らなかったので方向転換しました。
はじめはモノレポの設定なしでホスティングを試みていたのですが、全くビルドが通らず、そこそこ時間が溶けました。。😇

そのあと、アプリケーションのルートディレクトリを指定するよう求められるので、.storybookと入力してください。

「.(ドット)」を忘れるとビルドエラーになるので注意が必要です！ これは環境変数のAMPLIFY_MONOREPO_APP_ROOTの値になります。

2点目はビルド設定のyamlファイルに関するものです！
結論ですが、ビルド設定の時に表示されるymlファイルを下記のコードに書き換えてください。

version: 1
applications:
  - appRoot: .storybook
    frontend:
      phases:
        preBuild:
          commands:
            - npm install
        build:
          commands:
            - npm run build-storybook
      artifacts:
        baseDirectory: storybook-static
        files:
          - "**/*"
      cache:
        paths:
          - node_modules/**/*
      buildPath: /

appRoot設定も先ほどと同様に.storybookとしてください!
また、storybookのビルド後のファイルがまとまっているディレクトリはstorybook-staticに保存されるので、baseDirectoryにはそちらを設定します。
ローカル環境でnpm run build-storybookコマンドを叩くと、生成される様子を確認できます👌

クラメソさんの記事はReact.jsの設定でした。参考にさせていただきました🙏
https://dev.classmethod.jp/articles/storybook-amplify/

これら2点のポイントを正しく実行すれば、ビルドが成功しデプロイが行われます！
下記のように、デプロイ後にURLが表示されます👏

Amplifyのプレビュー機能を有効化する

ホスティングするだけなら、必須ではありませんが、Amplifyにはプレビュー機能という、ドチャクソ便利な機能があります！対象ブランチへのプルリクエスト（PR）をオープンすると、そのfeatureブランチが自動的にデプロイされます。しかも、これが対象のブランチの別環境で作成され、PRのclose後に環境ごと綺麗さっぱり削除されます！！すごい！！👏

こちらの機能を有効化します!
設定に関して、いくつか注意点があるので、お伝えします。

プレビュー機能を有効化できるのはPrivateリポジトリのみです！
GitHubの場合、設定画面からリポジトリをプライベートに変更することができます。(もちろん、諸々警告が出ますが。。)
https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/pr-previews.html

//GitHubプライベートリポジトリの設定手順
GitHubの対象リポジトリ > settings > General > スクロールしてDangerZoneのセクション

残りはAmplifyのGUIで設定できます！
対象のプロジェクトの画面のサイドバーから「プレビュー」を選択し、有効化ボタンを押下します！ すると、GitHubの連携を求められます。既に連携している場合でも、GitHubのページに移動しますが、何もせずにAmplifyに戻ると、次の操作画面が表示されます。僕はここで、「連携の設定しているんだけどなぁ。。」とぽちぽちしていて、無駄に時間が過ぎてしましました。。

あとは表示のまま進めれば設定完了です👌

試しに対象のブランチ(今回はmain)に対するPRを出してみます！
連携されると、PRのconvasationの箇所にコメントが投稿されます。

それぞれの環境の画面を確認してみると...

うまくいってそうです👍
環境ごとに異なる表示になっています！

📌 まとめ

Next.jsのアプリのStorybookをAmplifyにホスティングする方法をまとめました！
これを準備できると、ホバー効果やクリック時の動作などのインタラクティブな要素を含むUIを簡単に共有できます！それに、プレビュー機能を有効化すれば、マージ前に確認ができるので、大きな事故を避けられます。これが推しポイントです👌

書き散らしスクラップ

最後まで読んでいただきありがとうございます！
気ままにつぶやいているので、気軽にフォローをお願いします！🥺
https://twitter.com/Ryo54388667/status/1733434994016862256