Next.js + AWS + Terraform + CI/CD 環境構築ガイド

注意

実行すると費用がかかるため注意してください

概要

今回は、私が作成した2つのサンプルリポジトリを組み合わせ、モダンなWebアプリケーションのローカル開発から本番環境へのCI/CDまでを一気通貫で実現する方法を解説します。

• nextjs-project
  • Next.jsとPrismaを用いたモノレポ構成のサンプル。Docker/makeで開発環境を素早く立ち上げ可能。
• apprunner-terraform
  • TerraformでAWS App Runner、ECR、VPC等を構築するサンプルプロジェクト。

この記事を読み終える頃には、あなたのNext.jsアプリケーションがGitHubへのプッシュをトリガーに、自動でAWS上にデプロイされる環境が手に入ります。

完成形のアーキテクチャ

まずは、今回構築するシステムの全体像を把握しましょう。

使用している技術スタック

• Next.js
• Terraform
• Docker
• AWS
• Github Actions

作成するインフラ構成図

アプリケーションはAWS App Runner上で動作し、VPC内のプライベートなリソース（例: RDS）との連携も可能な構成です。コンテナイメージはECRで管理されます。

インフラ構成図

CI/CDとブランチ戦略

開発はmainブランチをベースに行い、特定のブランチへのプッシュをトリガーにGitHub Actionsが実行され、各環境へ自動でデプロイされます。

• main: 開発のベースとなるブランチ。
• stg: mainからマージされると、ステージング環境に自動デプロイ。
• prod: stgからマージされると、本番環境に自動デプロイ。

デプロイフロー: main → stg → prod

前提条件

構築を始める前に、以下のツールをインストールし、設定を済ませておいてください。

• AWSアカウント と AWS SSO の有効化
• Docker
• make

構築手順

ここからは、実際に手を動かして環境を構築していきます。ステージング（stg）環境を例に進めます。

ステップ1: Next.jsアプリケーションのローカル環境を準備する

まず、アプリケーション（sample-nextjs-project）をローカルで動かせるようにします。

1. リポジトリをクローン
   a. git clone https://github.com/campbel2525/sample-nextjs-project.git
   b. cd sample-nextjs-project
2. 環境変数ファイルの準備
   a. サンプルファイルをコピーして、アプリケーション用の環境変数ファイルを作成。
   b. make cp-env
3. 開発環境の起動
   a. make init
4. 動作確認
   a. ブラウザで http://localhost:3001 以下の情報でログインできればローカル環境の構築は成功
   • Email: [e-mail]
   • Password: test1

ステップ2: AWSインフラをTerraformで構築する

次にアプリケーションをデプロイするためのAWSインフラ（sample-apprunner-terraform）を構築します。

例としてステージング環境を構築します

1. リポジトリをクローン
   a. git clone https://github.com/campbel2525/sample-apprunner-terraform.git
   b. cd sample-apprunner-terraform
2. Terraform State保存用のS3バケットを作成
   a. Terraformの状態を管理するためのS3バケットを、事前にAWSマネジメントコンソール等で作成しておく
3. 設定ファイルの準備
   a. AWS認証情報の設定
   i. cp credentials/aws/config.example credentials/aws/configを実行して、中身を自分のAWSプロファイルに合わせて編集
   b. バックエンド設定（S3バケット名）
   i. cp src/project/backend-config.stg.hcl.example src/project/backend-config.stg.hclを実行する。bucket = "..." には手順2で作成したS3バケット名を指定
   c. 変数ファイル（プロジェクト名など）
   i. cp src/project/terraform.stg.tfvars.example src/project/terraform.stg.tfvars
   1. 中身を自分の環境に合わせて編集
4. Terraform実行環境の準備とログイン
   a. make init
   b. make shell
   i. ここから下はDockerコンテナ内で実行すること
   c. コンテナ内に入ったら、プロジェクトディレクトリへ移動し、SSOでAWSにログインします。
   i. cd /project/project
   ii. sl
   1. SSOログインのプロンプトが表示されるので従う
5. stg用のインフラ全体の構築
   a. make stg-apply
6. 動作確認
   a. apply完了、コンソールに出力されたApp Runnerのデフォルトドメイン（...awsapprunner.com）にアクセスし、"Hello, App Runner!"と表示されたサンプルページが表示されれば成功です。

ステップ3: GitHub ActionsでCI/CDパイプラインを構築する

最後にGitHubとAWSを連携させ自動デプロイの仕組みを完成させます。この設定は、sample-nextjs-project のGitHubリポジトリに対して行います。

1. GitHub Secretsの設定
   a. ステップ2のterraform apply完了時に出力された値を、sample-nextjs-projectリポジトリの Settings > Environments > New environment から stg 環境を作成し、そのEnvironment secretsに設定します。

コマンド	説明
make help	利用可能なすべてのコマンドとその説明を表示します。
make up	開発環境（Dockerコンテナ）を起動します。
make down	開発環境を停止します。
make reset	データベースをリセットし、初期データを再投入します。
make check	すべてのワークスペースでコードのフォーマットと静的解析を実行します。
make user-front-shell	フロントエンド (user_front) のコンテナ内でシェルを起動します。
make migration-shell	スクリプト (migration) 用のコンテナ内でシェルを起動します。

1. アプリケーション環境変数の設定
   a. apps/user_front/.env.example を参考にアプリケーションが必要とする環境変数をAWS Systems Manager (SSM) のパラメータストアに設定

ステップ4: デプロイの実行

これで全ての準備が整いました。

sample-nextjs-projectリポジトリで、mainブランチからstgブランチへ変更をマージ（または直接stgブランチへプッシュ）してみてください。 GitHub Actionsのワークフローが自動的に実行され、ビルド、イメージのプッシュ、App Runnerへのデプロイが完了します。

しばらくまってからApp RunnerのURLにアクセスしローカルで確認したのと同じアプリケーションが表示されれば成功です！

まとめ

本記事では2つのサンプルリポジトリを組み合わせることで、エンドツーエンドの開発・デプロイ環境を実現する手順をご紹介しました。

• sample-nextjs-project でモノレポ構成のNext.jsアプリをローカル開発
• sample-apprunner-terraform でAWSインフラをコード化 (IaC)
• GitHub Actions でCI/CDパイプラインを自動化

これにより開発者はインフラ構築やデプロイ作業から解放され本来のアプリケーション開発に集中できます。ぜひこれらのリポジトリをフォークしご自身の要件に合わせてカスタマイズして開発フローの効率化にお役立てください！