【第5回 自動デプロイ（AWS Amplify + AWS CodeCommit）編】基礎から学ぶJamstack構成のサイト開発

はじめに 

株式会社メンバーズ Jamstack研究会の大西です。

メンバーズではJamstackやヘッドレスCMSに取り組むエンジニアを増やすことを目的に「Jamstack研究会」が設立され、Jamstackの勉強会や研究を行っています。
本ブログシリーズでは、「Astro + microCMS + AWSを使用したJamstackなポータルサイトの開発手法」について皆様にお届けしています。

今回は、シリーズ第5回目ということで、AWS AmplifyとAWS CodeCommitで自動ビルド・デプロイを行う環境を構築する方法についてご紹介します。
※前回の記事を読んでいない方は、「【第4回HTML, CSS, JS編】基礎から学ぶJamstack構成のサイト開発」をご覧ください。

AWS Amplifyとは

AWS Amplifyとはサーバーレスでウェブアプリやウェブサイトを簡単に公開できるAWSのサービスであり、Gitプロバイダーと連携して自動的にビルド、デプロイ処理を行うことができます。
類似サービスにはCloudflare Pages、Vercel、Netlifyなどがあります。
Gitプロバイダーには第2回Git準備編の記事で設定したAWS CodeCommitを使用していきます。

※Amplifyは以前まで、フロントエンドをホスティングする機能である「Amplify Hosting」と、それ以外のバックエンド機能とで分離していましたが、2024年5月にリリースされたAmplify Gen2以降、バックエンドとホスティング機能が一体化し、Amplify Hostingの中にバックエンド機能が包含されるような状態となっています（このため公式ドキュメントでもAmplify HostingとAmplifyが同じ扱いになっている箇所があります）。ですのでAmplifyをフロントエンドとバックエンドを一つのプラットフォームでまとめて管理できる開発ツールとして理解してください。

Amplifyのアプリ作成

AWS Amplifyを開き、「新しいアプリを作成」ボタンを押します。
新しいアプリを作成画面で下記の手順でアプリの設定を行います。

1. ソースコードプロバイダーの選択：CodeCommit

   

2. リポジトリとブランチを追加：CodeCommitに作成したリポジトリとmainブランチを指定

   

   
   

3. アプリケーションの設定

   アプリケーションの名前	任意
   フロントエンドビルドコマンド	npm run build
   出力ディレクトリをビルド	dist
   サービスロール	新しいサービスロールを作成して使用

   サービスロールとはAWSのサービスがユーザーの代わりに他のサービスに何かを行うための権限です。今回の場合は、Amplify(サービス)がCodeCommit(他のサービス)からソースコードをクローンする時に必要な権限などが主になります。

   

第2回Git準備編の勉強会で、package.jsonのenginesにNode.jsの20.15.0バージョン指定し、.npmrcファイルでengine-strict=trueを記載したため、Amplifyの「ライブパッケージの更新」設定でpackage.jsonと同じバージョンのNode.jsを指定しないとビルド時にエラーが発生します。

"engines": {
    "node": "20.15.0"
},

Copy

package.json

engine-strict=true

Copy

.npmrc

上記の通りに設定し「保存してデプロイ」ボタンを押すとビルドが開始されます。デプロイ済みになれば、アプリの作成は完了です。

ページの確認

デプロイされたページの確認を行います。
ドメインは下記の通りです。
https://main.[アプリID].amplifyapp.com

作成したアプリの概要ページやデプロイページにドメインが記載されているので、そこから確認することも可能です。

ローカルで作成したページが正しく表示されていれば成功です。

自動デプロイの確認

ページが問題なくデプロイされていることが確認できたら、mainブランチでソースコードに変更を加え、コミット・プッシュを行い、自動デプロイが動作するか確認します。
デプロイ後に変更が反映されることを確認しやすくするため、例として「NEWS」のテキストカラーを変更し、コミット・プッシュを行います。

先ほど作成したアプリのビルド処理が自動で走ります。

問題なくデプロイされており、上記で加えた変更が反映されていれば今回の作業は完了です。

AWS Amplifyのその他機能紹介

最後にAWS Amplifyでよく使う機能や設定の紹介をします。

• アクセスコントロール：Basic認証の設定ができます。主に公開前やステージング環境で使用します。
• ビルドの通知：ビルドの成功・失敗を設定したEメールに通知します。
• ビルドの設定：ビルドコマンドやWebhookなど、ビルド時の設定を記載します。今回のアプリ作成時に設定した、ビルドコマンドの”npm run build”や、出力ディレクトリの”dist”が既に設定されていることが確認できます。
• カスタムドメイン：Amplifyのデフォルトのドメインではなく、保有しているドメインを使用したい場合に設定することができます。
• 環境変数：アプリケーションの設定やAPIキーなどの機密情報を環境変数で管理します。今回のアプリ作成時に設定した、Node.jsのバージョン情報が既に記載されていることが確認できます。
• モニタリング：アプリケーションのパフォーマンスやアクセスログなどの情報を確認できます。
• リライトとリダイレクト：アプリケーションのURLに関する処理で、あるURLにアクセスした時に別のURLに自動的に転送する設定を記載します。
• ブランチ設定：ブランチごとに同じビルド設定でアプリケーションを追加することが可能です。今回はmainブランチでアプリケーションを作成しましたが、ブランチを追加し開発用のステージング環境を追加するといった設定が可能です。

Webhookや環境変数の追加については第7回の記事で実際の使用方法を紹介するのでそちらもぜひご覧ください。

次回予告

第5回は以上となります。
今回はAWS AmplifyとAWS CodeCommitで自動デプロイの環境を構築しました。
本シリーズではAWS CodeCommitを使用していますが、AWS AmplifyではAWS CodeCommit以外にもGitHub、BitBucketやGitLabなどのGitプロバイダーもサポートしているのでぜひご活用ください。
次回はmicroCMSの導入と紹介を行います。
第6回目の記事もぜひご覧ください。