webアプリケーションのチーム開発をしており、これまでおろそかであったGitHubによるプルリクエストとコードレビューを徹底しようとチームで決めました。
細かくブランチを切って、作業してプルリクエストという流れは、つかめてきました。
しかし、現状では、プルリクエストを受けたレビュアーが画面を確認しようとすると、一度ローカルにブランチを持ってきて、localhostで開くという手間が発生していました。
その結果、適当なコードレビューとなってしまっています。
今回は、プルリクエスト時点で、仮のデプロイを行い、プレビュー画面でプルリクエストができるようにAWS Amplifyを使用しました。
Nuxt3によるプロジェクトで一部、参考にしたブログ等と手順が異なることがありました。
AWS AmplifyとGitHubリポジトリの接続
まずは、コンソール画面でAmplifyに新規登録していきます。
日本語がややおかしいですが、「使用を開始する」をクリックすると、画面下部にスクロールされ、さらに、Amplifyホスティングの方の「使用を開始する」をクリックして、新規設定していきます。
各種Gitプロバイダーと連携できるようなので、今回はGitHubを選択しました。
GitHubアカウントとの連携許可がまず必要になるので、以下のような画面に遷移した後、緑色のボタン「Authorize AWS Amplify（ap-northeaset-1）」をクリックして、アカウント連携します。
アカウント連携すると、元の画面に戻り、Githubとの認証が管理しています。
ここで、Amplifyに設定するリポジトリとブランチを選択するのですが、この時点では、「最近更新されたリポジトリ」のドロップボックスにも該当のリポジトリがありません。
そこで、注意書きがあるように、Amplifyに次はリポジトリへのアクセス許可を付与していきます。
再び、GitHubのアカウント連携の画面に遷移します。
次は、一つのリポジトリを選択して、そのリポジトリに対して、amplifyが設定ファイルを読み込める権限を付与していきます。
今回は、会社のOrganaizationで作成しているリポジトリに対する許可が必要でしたが、アカウントが所属していれば問題なく選択できました。
これで、再びAmplifyのコンソール画面に戻ってきます。
リポジトリ選択のドロップボックス右にある更新アイコンを一度クリックすると、無事今回許可したリポジトリが選択できるようになっています。
また、他のリポジトリもすでにアクセス許可を付与されたものがありますが、そのリポジトリの管理者アカウント権限が付与されていないと選択することができません。
Organaizationで会社共有のものですが、管理者権限を徹底していると安心できますね。
リポジトリを選んだあとは、自動的にブランチ選択の箇所が表示され、ビルド構築するブランチを選択します。
ここでは、この後プルリクエストを出し、マージ先になるようなブランチを選択します。基本的には、mainやmaster、開発用のdevelopといったブランチになるかと思います。
今回は、開発用のdevelopブランチとしています。
なお、「monorepoを接続しますか？」については、チェックを入れる必要はありません。
Amplify設定ファイルの保存と設定
次へと進むとAmplifyがビルド構築するための設定ファイルの設定確認の画面に遷移します。
yamlファイルですが、そこまで難しい記載はないですが、デフォルト値のままですので、一部修正が必要になります。
それはbuildコマンドとbaseDirectoryの箇所です。
Nuxt3によるAmplify.ymlの設定の注意点
Amplifyを使用した参考サイトの多くは、baseDirectoryを変更することを注意書きにしているが、Nuxt3を使用する場合はさらにビルドコマンドにも修正が必要でした。
Nuxt3はSSRやSSG、SPA（CSR）といったレンダリングの違いにより、デプロイ後のファイルがどのディレクトに出力されるか変わってきます。
また、AWS Ampifyは基本的に静的ウェブサイトのホスティングを提供するサービスであるようです（chatGPT談）。
実際には、Next.jsやNuxt.jsといったSSRをサポートするようになったらしく、設定はできそうです。
詳細は、以下より確認してください。
さて、今回は静的ウェブサイト（SSG）として、まずはビルドすることにします。
Nuxt3でSSGとして構築するときは、npm run buildコマンドではなく、npm run generateコマンドとなります。
また、npm run generateコマンドでデプロイ後に出力されるファイルは.output/publicディレクトリとdist/ディレクトリのそれぞれに構築されますので、ここにも注意が必要です。
ちなみに、npm run buildは、SSRモードでのビルドとなり、その出力は.output/severディレクトリとなります。
Amplify設定ファイルの保存と更新
さて、前置きはこのくらいで、コンソール画面から設定ファイルをダウンロードして、実際のプロジェクトに保存していきます。
まずは、ダウンロードボタンからamplify.ymlをダウンロードしました。
ダウンロードした、amlify.ymlをNuxt3によるプロジェクトのルートディレクトリに保存します。
このままでは、先ほど述べたように、ビルド構築の設定ファイルが正しくないので、更新していきます。
繰り返しの説明になりますが、Nuxt3のアプリケーションでのscriptコマンドを確認すると、npm run buildコマンドとnpm run generateコマンドがあります。
今回は、SSG（静的ホスティング）していきますので、amplify.ymlのbuildコマンドの設定をnpm run generateに変更します。
また、baseDirectoryについては、『.output/public』ディレクトリ（.ドットがあるので注意）に変更しました。
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
# buildコマンドをSSGモードに変更
- npm run generate
artifacts:
# IMPORTANT - Please very your build output directory
# baseDirectoryをSSGの出力先『.output/public または dist/』に変更
baseDirectory: .output/public
files:
- '**/*'
cache:
paths:
- node_modules/**/*
忘れがちですが、最後にamplify.ymlをdevelopのリモートブランチにプッシュします。
AmplifyはあくまでGitHub（リモートブランチ）と連携しているので、リモートブランチへのpushが必要になります。
git add amplify.yml
git commit -m 'amplify.ymlを追加した'
git push -u origin develop
Amplifyによるデプロイ確認
developリモートブランチにプッシュが終わったので、再びコンソール画面に戻ってきます。
構築の設定ファイルは、既に手動更新済みですので、デプロイの許可にチェックを入れ、次へをクリックします。
これで、developブランチに対して、動的なビルド（構築）が可能になりました。
コンソール画面では、以下のようになり、URLが発行されています。
ただ、この場合、URLにアクセスしても、なにも表示されません。
以下のようなwelcome画面に遷移します。
ここに書いている通りですが、amplify.ymlの設定ファイルはdevelopにプッシュしましたが、この時点では、まだamplify設定によるビルドが始まってないので、当たり前ではありますね。
そこで、適当な処理を加え、developブランチに再度プッシュしました。
そうして、Amplifyのトップ画面にアクセスすると、今回作成したアプリケーションのdevelopがすでに構築中になっています。
これがデプロイまで完了すると、左側下部にあるURLから画面を参照することができます。
もし、ビルドに失敗したり、ビルドに成功したけど、404エラーなどの場合は、amplify.ymlのビルド設定が間違っている可能性があります。
特に、静的ホスティング（SSGモード）として、ビルドできている確認しましょう。
プレビュー機能の有効化
現状は、developブランチに対するデプロイの設定だけですので、プレビューを設定することで、プルリクエスト時の画面プレビューを確認できるように設定していきます。
Amplifyのサイドメニューにあるプレビューにアクセスして、プレビューを有効化していきます。
プレビュー機能を有効にしようとすると、先ほどdevelopブランチに対して、Amplifyが新たな許可設定を求めてきます。
名称はインストールとなっていますが、実質的は、許可設定です。
リポジトリを追加した時と設定は同様ですので、一つのリポジトリを選択して、アクセス許可を付与します。
アクセス許可を付与すると、コンソール画面に戻るので、developブランチを選択して、右上の「管理」をクリックして、プルリクエストのプレビューにチェックを入れます。
これで、プレビュー機能が有効になり、developに対するプルリクエストを行うと、ビルドが始まり、デプロイが完了するとAmplifyのプレビュー用URLが発行されます。
設定はこれだけで非常に簡単です。
PRの作成とAmplifyによる確認
では、実際にdevelopに対するプルリクエストを行ってみます。
GitHubの画面から、プルリクエストを作成しました。
developに対して、マージするるクエストが作成されていればOKです。
プルリクエストを作成すると、amplifyによるビルドが実行中であることが確認できます。
オレンジのマークでぐるぐる回っていますが、これがチェックマークなれば、デプロイまで完了です。
実際に、デプロイが完了すると、プルリクエストの画面で、このプルリクエストで構築されたプレビュー画面のURLが発行されています。
プルリクエスト№＋乱数と言う形でURLが生成されています。
また、AWSコンソール画面でも確認してみると同様にプルリクエストで生成されたURLが発行されています。
レビューとマージを行う
これで、プルリクエストが来たものに対して、実際のプレビュー画面を確認しつつ、コードはGitHub上で確認ということが可能になります。
さらに、このプルリクエストから実際に、マージすると先ほど作成したamplifyのURLも自動的に破棄されるので、管理も楽になります。
実際に、GitHubの画面でマージしました。
マージ後に、AWSのコンソール画面を確認してみると、プルリクエストが削除されています。
また、元々のプルリクエストで生成されていたURLにアクセスしてみてもすでに削除されているので、404エラーでURLにアクセスできないことも確認できました。
おわりに
これまで、チームメンバーからプルリクエストが来ても、僕自身も作業中であったので、ロクに確認もせず「プルリクエストOKです。マージしておいてください。」とSlackでやり取りしていることが多かったです。
プルリクエストの時に、プレビュー画面を構築することができたので、チーム開発がより加速できるものになりました。
今後は、Nuxt.jsのアプリケーションのSSRでのデプロイ環境構築やAWS CDKを用いたAWS Ampifyのアプリケーション作成にチャレンジしていきたいと思います。
ポチップ
コメント