最近は弊社でもアプリケーションのフロントエンド開発では専らNext.jsを採用しています。
クラウドでAWSを採用する場合はAmplifyでHostingをすることが多いのですが、monorepo管理しているNext.js(App Router）をデプロイしようとした際に、いくつか躓く点があったのでまとめておきます。

前提となっているリポジトリの内容

今回のケースでは、異なるユーザー向けのアプリケーションを複数リポジトリに入れて管理しています。
また、共通のUIは packages/ui のディレクトリにて管理して、それぞれのアプリから読み込めるようにしています。

参考にも記載している公式サンプルのリポジトリを参考にさせていただいています。

リポジトリ構成は以下になります。

├── README.md
├── amplify.yml
├── apps
│   ├── web // 一般ユーザー向けアプリケーションに関するディレクトリ
│   │   ├── README.md
│   │   ├── next.config.js
│   │   ├── package.json
│   │   ├── postcss.config.js
│   │   ├── public
│   │   ├── src
│   │   │   ├── app
│   │   │   │   ├── 省略
│   │   │   │   ....
│   │   │   │   └── page.tsx
│   │   │   ├── components
│   │   │   ├── features // custom hooksなど機能に関する内容を記述
│   │   │   └── styles
│   │   ├── tailwind.config.ts
│   │   ├── tsconfig.json
│   │   └── yarn.lock
│   └── admin // Admin向けアプリケーションに関するディレクトリ. 構成はwebと同じのため省略
├── package.json
├── packages           // 各アプリケーションで共通するファイル（設定ファイルやUIコンポーネントなど）を格納するディレクトリ
│   ├── eslint-config-custom
│   ├── tailwindconfig
│   ├── tsconfig
│   └── ui
├── turbo.json
└── yarn.lock

1. amplify.ymlの設定を変更する

defaultのymlではappRootの設定がないがmonorepoで利用するためには、それぞれのアプリケーションを認識させるためにappRootの記述とAmplify側で環境変数の設定が必要になります。
今回はビルドシステムにTurborepoを利用しているため、ビルドのコマンドなどは適宜ご自身の環境に合わせて読み替えてください。

ここでのポイントは、ymlを下記のように記述した場合、環境変数 AMPLIFY_MONOREPO_APP_ROOT = apps/web と設定する必要があります。

version: 1
applications:
  - appRoot: apps/web
    frontend:
      phases:
        preBuild:
          commands:
            - nvm use 18
            - node -v
            - yarn
        build:
          commands:
            - npx turbo run build --filter=web
      artifacts:
        baseDirectory: .next
        files:
          - "**/*"
      cache:
        paths:
          - node_modules/**/*
  - appRoot: apps/admin
    frontend:
      phases:
        preBuild:
          commands:
            - nvm use 18
            - node -v
            - yarn
        build:
          commands:
            - npx turbo run build --filter=admin
      artifacts:
        baseDirectory: .next
        files:
          - "**/*"
      cache:
        paths:
          - node_modules/**/*

2. Amplifyのインフラ設定変更する

ここに気がつくのに時間がかかってしまい時間を要しました。
Amplifyのコンソールからアプリケーションを作成した場合、monorepoを選択するとプラットフォームが ウェブ の状態でインフラが構築されます。
ご自身の現在のインフラの状態は以下の画像の赤枠の中を確認してください。

今回はNext.jsをSSRで利用しているため、 ウェブコンピューティング に変更する必要があります。
そのため以下のコマンドでappとbranchの設定を変更します。

# AmplifyのAppのインフラ設定を "WEB_COMPUTE" に変更する
$ aws --profile {AWS_PROFILE} amplify update-app --app-id {APPLICATION_ID} --platform WEB_COMPUTE --region ap-northeast-1

# AmplifyのBranchのインフラ設定を "Next.js - SSR" に変更する
$ aws --profile {AWS_PROFILE} amplify update-branch --app-id {APPLICATION_ID}  --branch-name develop --framework 'Next.js - SSR' --region ap-northeast-1

最後に

上記の設定を行うことで無事にAmplifyにデプロイすることができました。
今回は少し詰まってしまいましたが、AmplifyはPull Requestごとに環境を構築してくれるなど、フロントエンドのレビューコストを下げてくれる設定も簡単に出来るので気に入っています。

ちなみに今回はNext.js13を利用していますが、Next.js14を利用する場合はNode.jsのミニマムサポートの都合でイメージの変更などが必要になります。
その場合は以下の記事が参考になるかと思います。

Zenn 新しくなった Amplify Hosting を利用してNext.js14のアプリの機能を試してみた

それでは良いフロントエンド開発ライフを🙌

参考

• Vercel Turborepo Tailwind の公式サンプル

• AWS ドキュメント Next.js 11 SSR アプリを Amplify Hosting コンピュートに移行する