AWS Amplify で簡単に Next.js アプリを公開する

はじめに

AWS Amplify を使うことで簡単に Next.js アプリケーションをデプロイ&公開できましたので、公開までの流れを備忘として残します。

AWS Amplify はフルスタックのウェブアプリケーションやモバイルアプリケーションを構築・デプロイするための開発プラットフォームです。

Amplify Hosting という Git ベースのワークフローを持つ CI/CD パイプラインにより、Git リポジトリを接続するだけで Next.js のようなモダンなフレームワークで構築されたアプリケーションを迅速にデプロイできます。（今回は主にこちらを使用したデプロイを実施）

デプロイしたアプリケーションには CloudFront を介してアクセスされますが、Amplify Hosting は Next.js の動的ページ（SSR）や API Routes/Route Handlers にも対応しており、デプロイに必要なリソースを完全に管理しているとのことです。

他にも Amplify の機能により、各種 AWS サービスと連携した開発が可能です。

Next.js プロジェクトを新規作成します。

$ npm create next-app@latest amplify-next

Github リポジトリを作成・登録します。

# 省略
# リポジトリ名は amplify-next とする

リリース用ブランチを作成&プッシュしておきます。
※最終的にこのブランチにプッシュした内容が Amplify Hosting によりデプロイ&公開される

$ git checkout -b release
$ git push -u origin release

AWS Management Console の AWS Amplify のトップページにアクセスし、[すべてのアプリ] から [新しいアプリを作成] を選択。

1. ソースコードプロバイダーを選択

今回は Github に対象のリポジトリを作成しているため [Github] を選択し、次へ。

ソースコードプロバイダーを選択する

Next.js テンプレートを使用して開始することも可能なようですが、リポジトリの更新が去年で止まっていたようなので止めました。
（多分 Amplify 関連の開発がしやすいようになっているんだろうなぁとは思いつつ）

2. リポジトリとブランチを追加

先ほど作成したリポジトリと release ブランチを選択し、次へ。

※Github のログイン&連携を求められるので、画面の指示通りに行うとデプロイするリポジトリとブランチの選択が可能になる

リポジトリとブランチを追加する

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

以下の項目を設定し、次へ。

アプリケーションの名前: amplify-next ※任意の名前でOK
ビルド指定:
- 自動検出されたフレームワーク: Next.js
- フロントエンドビルドコマンド: npm run build ※今回は自動設定のまま
- 出力ディレクトリをビルド: ./next ※今回は自動設定のまま
自分のサイトをパスワードで保護: ※任意で設定（Basic認証が設定されるようだ）

アプリケーションの設定 1

アプリケーションの設定 2

ビルドの設定や環境変数は後からも変更・設定可能です。

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

4. 確認

最後、これまでの設定内容の確認画面が表示されるので、特に問題なければ設定完了としデプロイを行います。

5. デプロイ&公開

デプロイを開始すると以下の画面に遷移し、アプリの概要やデプロイ状況を確認できます。

デプロイ&公開

ステータスが デプロイ済 となれば、Amplify から発行されたデフォルトのドメインからアプリケーションにアクセスできます。

今回はこれで以上です。

Amplify にデプロイしたアプリケーションを本格的に本番運用するのであれば、カスタムドメインやファイアウォールの設定なども可能です。

私はそこまでの予定はありませんが、自己学習用に生成 AI アプリにカスタマイズしていきたいと企んでいます。
（手始めに S3 Vectors を使用した RAG チャットボットを構築したいな～）

それでは。