AWS Amplify Hostingでモノレポ内のNext.jsアプリをデプロイしてみた

はじめに

データアナリティクス事業本部のkobayashiです。

GitHubリポジトリにモノレポ構成で複数のWebアプリケーションを管理しているとき、その中の特定のアプリケーションだけをAWS Amplify Hostingでデプロイしたいケースがあります。AWS Amplify Hostingはモノレポ構成に対応しており、amplify.ymlと環境変数の設定で簡単に実現できますのでその内容をまとめます。

• Deploying a Next.js app in a monorepo - AWS Amplify Hosting
• Configuring monorepo build settings - AWS Amplify Hosting

AWS Amplify Hostingとは

AWS Amplify Hostingは、フルスタックのWebアプリケーションをホスティングできるAWSのマネージドサービスです。

主な特徴としては以下になります。

• GitHubなどのGitリポジトリと連携してCI/CDパイプラインを自動構築
• Next.js、React、Vue.js、Nuxt.jsなどの主要フレームワークに対応
• Next.js のSSR（Server Side Rendering）をWEB_COMPUTEプラットフォームでサポート
• ブランチごとのプレビュー環境を自動作成
• カスタムドメインとSSL証明書の自動設定

モノレポ構成について

今回デプロイ対象とするリポジトリは以下のようなモノレポ構成になっています。

trestran-amplify-test/
├── .gitignore
├── aaa-web/          # Webアプリケーション1
├── bbb-web/          # Webアプリケーション2
├── docs/             # ドキュメント
└── lisa-web/         # ← 今回デプロイするNext.jsアプリ
    ├── amplify.yml
    ├── app/
    ├── components/
    ├── hooks/
    ├── lib/
    ├── next.config.mjs
    ├── package.json
    ├── pnpm-lock.yaml
    ├── postcss.config.mjs
    ├── public/
    ├── styles/
    └── tsconfig.json

この構成でlisa-webディレクトリ内のNext.jsアプリケーションのみをAmplify Hostingにデプロイします。
なお、lisa-webディレクトリ内のファイルは、v0で作成したNext.jsアプリケーションにamplify.ymlを追加したものです。

使用する技術スタック

• Next.js: 16.0.7
• React: 19.2.1
• パッケージマネージャー: pnpm
• UIライブラリ: Radix UI、Tailwind CSS

Amplify Hostingでモノレポをデプロイするための設定

Amplify Hostingでモノレポをデプロイするには、以下の2つの設定が必要です。

1. amplify.ymlでビルド設定を定義
2. AmplifyコンソールでAMPLIFY_MONOREPO_APP_ROOT環境変数を設定

amplify.ymlの設定

モノレポの特定アプリをデプロイするためのamplify.ymlを対象アプリのディレクトリに配置します。

version: 1
applications:
  - appRoot: lisa-web
    frontend:
      phases:
        preBuild:
          commands:
            - corepack enable
            - corepack prepare pnpm@latest --activate
            - pnpm install
        build:
          commands:
            - pnpm run build
      artifacts:
        baseDirectory: .next
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
          - .next/cache/**/*

設定のポイントを解説します。

pnpmを使う場合の注意点

Amplifyのビルドコンテナにはpnpmがデフォルトでインストールされていません。そのためpreBuildフェーズでpnpmをインストールする必要があります。

今回はcorepackを使用していますが、以下のようにnpm install -g pnpmでインストールする方法もあります。

preBuild:
  commands:
    - npm install -g pnpm
    - pnpm install --frozen-lockfile

CI環境では--frozen-lockfileオプションを付けることで、pnpm-lock.yamlとpackage.jsonの整合性を保証し、予期せぬパッケージバージョンの変更を防ぐことができます。

Nodeバージョンの指定

Amplifyのビルドコンテナで使用されるNode.jsのバージョンはデフォルトで固定されているため、特定のバージョンのNext.jsを使用する場合はNodeバージョンを明示的に指定する必要があります。

package.jsonのenginesフィールドで指定できます。

{
  "engines": {
    "node": ">=20.0.0"
  }
}

Amplifyコンソールでのデプロイ手順

では早速Amplify Hostingでデプロイしてみます。

1. アプリケーションの作成

1. AWS管理コンソールでAmplifyコンソールを開く
2. 「Create new app」を選択
3. GitプロバイダーとしてGitHubを選択し認証

2. リポジトリとブランチの選択

1. 対象のリポジトリ（例my-amplify-test）を選択
2. デプロイするブランチ（例main）を選択
3. 「私のアプリケーションはモノレポです」にチェックを入れる
4. Monorepo root directoryにlisa-webと入力

この「私のアプリケーションはモノレポです」オプションが重要です。これを選択しないと、AmplifyがNext.jsフレームワークを正しく検出できず、WEB_COMPUTEプラットフォームではなくWEBプラットフォームとして認識されてしまいます。

3. ビルド設定の確認

Amplifyがamplify.ymlを検出し、ビルド設定が自動的に読み込まれます。設定内容を確認して問題なければ次に進みます。

4. 環境変数の確認

詳細設定で環境変数AMPLIFY_MONOREPO_APP_ROOTにデプロイするアプリケーションのルートディレクトリを指定する必要があり、環境変数amplify.ymlのappRootと同じ値を設定する必要があります。自動で設定されている場合はそのままで問題ありません。

6. デプロイの実行

「保存してデプロイ」をクリックするとデプロイが開始されます。

デプロイは以下のフェーズで進行します。

1. Provision - ビルド環境のプロビジョニング
2. Build - preBuildとbuildコマンドの実行
3. Deploy - ビルド成果物のデプロイ
4. Verify - デプロイの検証

デプロイ結果の確認

デプロイが成功すると、Amplifyが自動生成したURLでアプリケーションにアクセスできます。

https://｛ブランチ名｝.xxxxxxxxxxxx.amplifyapp.com

Amplify Hostingの料金体系と「WEB_COMPUTE」について

Amplify HostingでNext.jsのSSR（Server-Side Rendering）アプリをデプロイする場合、AWSのプラットフォーム区分として WEB_COMPUTE が使用されます。
静的サイト（SSG）のプラットフォーム（WEB）とは課金の仕組みが異なるため、違いを把握しておく必要があります。
大きな違いとしては、SSR（WEB_COMPUTE）ではアクセスがあるたびに**「リクエスト数」と「サーバーの実行時間」に対して料金が発生する点**です。

• SSR (WEB_COMPUTE): サーバー処理が必要なため、アクセス数に比例してコストが増加する
• SSG (WEB): 事前に生成されたファイルを配信するだけなので、リクエスト処理や実行時間への課金はなし

具体的な単価や最新の無料枠の上限については、AWSの公式ページをご確認ください。

参考: AWS Amplify 料金表

まとめ

AWS Amplify Hostingでモノレポ構成のNext.jsアプリケーションをデプロイする方法を紹介しました。

モノレポ構成でAmplify Hostingを使用する場合、amplify.ymlでapplicationsセクションとappRootを設定し、Amplifyコンソールで「私のアプリケーションはモノレポです」オプションを選択することがポイントになります。環境変数AMPLIFY_MONOREPO_APP_ROOTもappRootと同じ値を設定する必要がありますが、コンソールで自動設定されます。
また、pnpmを使用する場合はAmplifyのビルドコンテナにデフォルトでインストールされていないため、preBuildフェーズでcorepackを使ってインストールする必要があります。Node.jsのバージョンについてもpackage.jsonのenginesフィールドで明示的に指定しておくと安心です。
Amplify HostingはGitリポジトリと連携したCI/CDを自動構築してくれるため、モノレポでも簡単にサーバーレスなWebアプリケーションをデプロイできます。SSRアプリの場合はWEB_COMPUTEプラットフォームで動作しリクエスト課金が発生する点は注意が必要ですが、ブランチごとのプレビュー環境やカスタムドメインの設定なども簡単に行えるので、開発効率の向上が期待できます。

最後まで読んで頂いてありがとうございました。