Amplify を使った Next.js SSR アプリのデプロイ - AWS Amplify ホスティング
パッケージ.json ファイルの設定Amplify ビルド設定

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

Amplify を使った Next.js SSR アプリのデプロイ

デフォルトでは、Amplify は Next.js 12 および 13 をサポートする Amplify ホスティングのコンピューティングサービスを使用して新しい SSR アプリケーションをデプロイします。Amplify ホスティングコンピューティングは、SSR アプリケーションのデプロイに必要なリソースを完全に管理します。2022 年 11 月 17 日より以前にデプロイした Amplify アカウントの SSR アプリは、クラシック（Next.js 11 のみ）の SSR プロバイダーを使用しています。

クラシック（Next.js 11 のみ）SSR を使用するアプリをAmplify ホスティングコンピューティングSSR プロバイダーに移行することを強く推奨します。Amplify は自動移行を行いません。更新を完了するには、アプリを手動で移行してから新しいビルドを開始する必要があります。手順については、「Next.js 11 SSR アプリをAmplify ホスティングコンピューティングに移行する」を参照してください。

以下の手順に従って、新しい SSR アプリをデプロイします。

Amplify ホスティングコンピューティングSSR プロバイダーを使用して SSR アプリを Amplify にデプロイするには

  1. にサインイン AWS Management Console し、Amplify コンソール を開きます。

  2. 「すべてのアプリ」ページで、「新規アプリ」、「ホスト Web アプリ」の順に選択します。

  3. GitHub、Bitbucket GitLab、または AWS CodeCommit リポジトリプロバイダーを選択し、続行を選択します。

  4. [リポジトリブランチを追加] ページで、次の操作を行います。

    1. 「最近更新されたリポジトリ」リストで、接続するリポジトリの名前を選択します。

    2. ブランチリストで、接続するリポジトリブランチの名前を選択します。

    3. [次へ]をクリックします。

  5. アプリには、、お客様に代わって他のサービスを呼び出すときに Amplify が引き受ける IAM サービス ロールが必要です。Amplify ホスティングコンピューティングにサービスロールを自動的に作成させることも、作成したロールを指定することもできます。

    • Amplify が自動的にロールを作成してアプリにアタッチできるようにするには

      1. 「IAM ロール」セクションで、「新しいサービスロールを作成して使用する」を選択します。

    • 以前に作成したサービスロールをアタッチするには

      1. 「IAM ロール」セクションで、「既存のサービスロールを使用する」を選択します。

      2. リストから使用するロールを選択します。

  6. [次へ]をクリックします。

  7. [レビュー]ページで、[保存してデプロイ] を選択します。

パッケージ.json ファイルの設定

Next.js アプリをデプロイすると、Amplify はpackage.json ファイル内のアプリのビルドスクリプトを調べて、アプリが SSR か SSG かを検出します。

Next.js SSR アプリのビルドスクリプトの例を示します。ビルドスクリプトは"next build"、アプリがSSGページとSSRページの両方をサポートしていることを示しています。

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
},

Next.js SSG アプリのビルドスクリプトの例を示します。ビルドスクリプトは"next build && next export"、アプリが SSG ページのみをサポートしていることを示しています。

"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
  "start": "next start"
},

Amplify ビルド設定

package.jsonアプリのファイルを調べて SSG アプリと SSR アプリのどちらをデプロイしているのかを判断した後、Amplify はアプリのビルド設定を確認します。ビルド設定は、Amplify コンソールまたはリポジトリのルートにあるamplify.ymlファイルに保存できます。詳細については、「ビルド設定の構成」を参照してください。

Amplify が Next.js SSR アプリをデプロイしていることを検出し、amplify.ymlファイルが存在しない場合、アプリのビルドスペックが生成され、baseDirectoryが.nextに設定されます。ファイルが存在するアプリをデプロイする場合、amplify.ymlファイル内のビルド設定はコンソールのビルド設定よりも優先されます。そのため、ファイル内のbaseDirectoryは手動で.nextに設定する必要があります。

以下は、baseDirectoryが.nextに設定されているアプリのビルド設定の例です。これは、ビルドアーティファクトが SSG ページと SSR ページをサポートする Next.js アプリ用であることを示しています。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Amplify が SSG アプリをデプロイしていることを検出すると、そのアプリのビルドスペックが生成され、baseDirectoryがoutに設定されます。ファイルが存在するアプリをデプロイする場合は、amplify.ymlファイル内でbaseDirectoryを手動でoutに設定する必要があります。

以下は、baseDirectoryがoutに設定されているアプリのビルド設定の例です。これは、ビルドアーティファクトが SSG ページのみをサポートする Next.js アプリ用であることを示しています。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: out
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*