SSR でサポートされている機能

このセクションでは、Amplify の SSR 機能のサポートについて説明します。

Amplify は、アプリの構築に使用された Node.js のバージョンと一致する Node.js バージョンサポートを提供します。

Amplify は、すべての SSR アプリをサポートする組み込みの画像の最適化機能を提供します。デフォルトの画像最適化機能を使用しない場合は、カスタム画像最適化ローダーを実装できます。

Next.js アプリケーション向けの Node.js バージョンのサポート

Amplify が Next.js コンピューティングアプリケーションを構築してデプロイする際、アプリケーションの構築に使用された Node.js のメジャーバージョンと一致する Node.js ランタイムバージョンが使用されます。

Amplify コンソールの [ライブパッケージオーバーライド] 機能で使用する Node.js バージョンを指定できます。ライブパッケージアップデートの設定の詳細については、「ビルドイメージでの特定のパッケージバージョンと依存関係バージョンの使用」を参照してください。nvm コマンドなどの他のメカニズムを使用して Node.js バージョンを指定することもできます。バージョンを指定しない場合、Amplify はデフォルトで、Amplify ビルドコンテナによって使用されている現在のバージョンを使用します。

SSR アプリケーション向けの画像の最適化

Amplify ホスティングは、すべての SSR アプリケーションをサポートする組み込みの画像の最適化機能を提供します。Amplify の画像の最適化を使用すると、ファイルサイズを可能な限り最小限に抑えながら、アクセス先のデバイスにとって適切な形式、次元、解像度で質の高い画像を配信できます。

現在、Next.js Image コンポーネントを使用してオンデマンドで画像を最適化することも、カスタム画像ローダーを実装することもできます。Next.js 13 以降を使用している場合、Amplify の画像の最適化機能を使用するためにそれ以上必要なアクションはありません。カスタムローダーを実装する場合は、次の「カスタムイメージローダーの使用」トピックを参照してください。

カスタム画像ローダーの使用

カスタム画像ローダーを使用する場合、Amplify はアプリケーションの next.config.js ファイル内のローダーを検出し、組み込みの画像の最適化機能を利用しません。Next.js がサポートするカスタムローダーの詳細については、Next.js 画像のドキュメントを参照してください。

SSR アプリの Amazon CloudWatch Logs

Amplify は SSR ランタイムに関する情報を、 AWS アカウントの Amazon CloudWatch Logs に送信します。SSR アプリをデプロイする場合、アプリには、ユーザーの代わりに他のサービスを呼び出す際に Amplify が引き受けるIAMサービスロールが必要です。Amplify ホスティングコンピューティングにサービスロールを自動的に作成させることも、作成したロールを指定することもできます。

Amplify に IAM ロールの作成を許可することを選択した場合、そのロールにはすでに CloudWatch Logs を作成する権限が付与されています。独自の IAM ロールを作成する場合、Amplify が Amazon CloudWatch Logs にアクセスできるようにするには、ポリシーに次のアクセス権限を追加する必要があります。

logs:CreateLogStream
logs:CreateLogGroup
logs:DescribeLogGroups
logs:PutLogEvents

サービスロールの詳細については、「バックエンドリソースをデプロイするアクセス許可を持つサービスロールの追加」を参照してください。

Amplify Next.js 11 SSR のサポート

2022 年 11 月 17 日にAmplify ホスティングコンピューティングがリリースされる前に Next.js アプリをAmplify にデプロイした場合、アプリは Amplify の以前の SSR プロバイダーであるClassic (Next.js 11 のみ) を使用しています。このセクションのドキュメントは、Classic (Next.js 11 のみ) SSR プロバイダーを使用してデプロイされたアプリにのみ適用されます。

注記

Next.js 11 アプリをAmplify ホスティングコンピューティングマネージド SSR プロバイダーに移行することを強くお勧めします。詳細については、「Next.js 11 SSR アプリをAmplify ホスティングコンピューティングに移行する」を参照してください。

以下のリストでは、Amplify Classic (Next.js 11 のみ) SSR プロバイダーがサポートする特定の機能について説明しています。

サポートされている機能

• サーバーサイドレンダリングのページ (SSR)

• 静的ページ

• API ルート

• ダイナミックルート

• 全ルートをキャッチ

• SSG (静的生成)

• インクリメンタル・スタティック・リジェネレーション (ISR)

• 国際化 (i18n) サブパスルーティング

• 環境変数

サポートされていない 機能

• イメージの最適化

• オンデマンドインクリメンタル・スタティック・リジェネレーション (ISR)

• 国際化 (i18n) ドメインルーティング

• 国際化 (i18n) 自動ロケール検出

• ミドルウェア

• エッジ ミドルウェア

• エッジ API ルート¶

Next.js 11 SSR アプリケーションの価格設定

Next.js 11 SSR アプリをデプロイすると、Amplify は AWS アカウントに次のような追加のバックエンドリソースを作成します。

• アプリの静的アセットのリソースを格納するAmazon Simple Storage Service (Amazon S3) バケット。Amazon S3 の料金に関する詳細については、「Amazon S3 の料金」を参照してください。

• アプリを提供する Amazon CloudFront ディストリビューション。CloudFront の料金の詳細については、「Amazon CloudFront 料金表」を参照してください。

• CloudFront が配信するコンテンツをカスタマイズする4つのLambda @Edge 関数。

AWS Identity and Access Management Next.js 11 SSR アプリの アクセス許可

Amplify では、SSR アプリをデプロイするために AWS Identity and Access Management (IAM) アクセス許可が必要です。SSR アプリケーションの場合、Amplify は Amazon S3 バケット、CloudFront ディストリビューション、 Lambda@Edge 関数、Amazon SQS キュー (ISR を使用している場合）、IAM ロールなどのリソースをデプロイします。必要な最小限のアクセス許可がないと、SSR アプリをデプロイしようとするとAccess Deniedエラーが発生します。Amplify に必要な権限を付与するには、サービスロールを指定する必要があります。

お客様に代わって他のサービスを呼び出すときに Amplify が引き受けるIAM サービスロールを作成するには、バックエンドリソースをデプロイするアクセス許可を持つサービスロールの追加 を参照してください。以下の手順では、AdministratorAccess-Amplify管理ポリシーをアタッチするロールを作成する方法を示しています。

AdministratorAccess-Amplify 管理ポリシーは、IAM アクションを含む複数の AWS サービスへのアクセスを提供します。 および は、AdministratorAccessポリシーとして強力であると見なす必要があります。このポリシーでは、SSR アプリのデプロイに必要な権限よりも多くの権限が付与されます。

最小特権を認めるというベストプラクティスに従い、サービスロールに付与するアクセス許可を減らすことを推奨します。サービスロールに管理者アクセス権限を付与する代わりに、SSR アプリのデプロイに必要な権限のみを付与する独自のカスタマーマネージド IAM ポリシーを作成できます。カスタマー管理ポリシーを作成する手順については、IAM ユーザーガイドの「IAM ポリシーの作成」を参照してください。

独自のポリシーを作成する場合は、SSR アプリのデプロイに必要な最低限の権限を以下に示します。

acm:DescribeCertificate
acm:DescribeCertificate
acm:ListCertificates
acm:RequestCertificate
cloudfront:CreateCloudFrontOriginAccessIdentity
cloudfront:CreateDistribution
cloudfront:CreateInvalidation
cloudfront:GetDistribution
cloudfront:GetDistributionConfig
cloudfront:ListCloudFrontOriginAccessIdentities
cloudfront:ListDistributions
cloudfront:ListDistributionsByLambdaFunction
cloudfront:ListDistributionsByWebACLId
cloudfront:ListFieldLevelEncryptionConfigs
cloudfront:ListFieldLevelEncryptionProfiles
cloudfront:ListInvalidations
cloudfront:ListPublicKeys
cloudfront:ListStreamingDistributions
cloudfront:UpdateDistribution
cloudfront:TagResource
cloudfront:UntagResource
cloudfront:ListTagsForResource
iam:AttachRolePolicy
iam:CreateRole
iam:CreateServiceLinkedRole
iam:GetRole
iam:PutRolePolicy
iam:PassRole
lambda:CreateFunction
lambda:EnableReplication
lambda:DeleteFunction
lambda:GetFunction
lambda:GetFunctionConfiguration
lambda:PublishVersion
lambda:UpdateFunctionCode
lambda:UpdateFunctionConfiguration
lambda:ListTags
lambda:TagResource
lambda:UntagResource
route53:ChangeResourceRecordSets
route53:ListHostedZonesByName
route53:ListResourceRecordSets
s3:CreateBucket
s3:GetAccelerateConfiguration
s3:GetObject
s3:ListBucket
s3:PutAccelerateConfiguration
s3:PutBucketPolicy
s3:PutObject
s3:PutBucketTagging
s3:GetBucketTagging
lambda:ListEventSourceMappings
lambda:CreateEventSourceMapping
iam:UpdateAssumeRolePolicy
iam:DeleteRolePolicy
sqs:CreateQueue           // SQS only needed if using ISR feature
sqs:DeleteQueue
sqs:GetQueueAttributes
sqs:SetQueueAttributes
amplify:GetApp
amplify:GetBranch
amplify:UpdateApp
amplify:UpdateBranch

Next.js 11 SSR デプロイのトラブルシューティング

Amplify で Classic (Next.js 11 のみ) SSR アプリをデプロイする際に予期しない問題が発生した場合は、以下のトラブルシューティングトピックを確認してください。

トピック

• アプリケーションの出力ディレクトリが上書きされる

• SSR サイトをデプロイすると 404 エラーが発生します。

• アプリに CloudFront SSR ディストリビューションの書き換えルールがありません

• アプリケーションが大きすぎてデプロイできません

• ビルドがメモリ不足エラーで失敗します

• アプリケーションに SSR と SSG の両方のブランチがあります。

• アプリが静的ファイルを予約パスのあるフォルダに保存します。

• アプリが CloudFront の制限に達しました

• 環境変数は Lambda 関数に引き継がれません。

• Lambda@Edge 関数は米国東部 (バージニア北部)リージョンで作成されます。

• Next.js アプリではサポートされていない機能が使用されています。

• Next.js アプリケーションにある画像が読み込まれない

• サポートされていないリージョン

アプリケーションの出力ディレクトリが上書きされる

Amplify でデプロイされた Next.js アプリの出力ディレクトリは.nextに設定する必要があります。アプリの出力ディレクトリが上書きされている場合は、next.config.jsファイルを確認してください。ビルド出力ディレクトリのデフォルトを.nextにするには、ファイルから次の行を削除します。

distDir: 'build'

ビルド設定で出力ディレクトリが.nextに設定されていることを確認します。アプリのビルド設定を表示する方法については、アプリのビルド設定の構成を参照してください。

以下は、baseDirectoryが.nextに設定されているアプリのビルド設定の例です。

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

SSR サイトをデプロイすると 404 エラーが発生します。

サイトをデプロイした後に 404 エラーが発生した場合、出力ディレクトリが上書きされたことが問題の原因である可能性があります。next.config.jsファイルを確認し、アプリのビルドスペック内のビルド出力ディレクトリが正しいことを確認するには、前のトピックのアプリケーションの出力ディレクトリが上書きされるの手順に従ってください。

アプリに CloudFront SSR ディストリビューションの書き換えルールがありません

SSR アプリをデプロイすると、Amplify は CloudFront SSR ディストリビューションの書き換えルールを作成します。ウェブブラウザでアプリにアクセスできない場合は、Amplify コンソールでアプリの CloudFront 書き換えルールが存在することを確認してください。見つからない場合は、手動で追加するか、アプリを再デプロイできます。

Amplify コンソールでアプリの書き換えルールとリダイレクトルールを表示または編集するには、ナビゲーションペインで、[アプリ設定]、[書き換えとリダイレクト] の順に選択します。次のスクリーンショットは、SSR アプリをデプロイするときに Amplify が作成するリライトルールの例を示しています。この例では、CloudFront の書き換えルールが存在することに注意してください。

アプリケーションが大きすぎてデプロイできません

Amplify は、SSR デプロイのサイズを50 MB に制限しています。Next.js SSR アプリを Amplify にデプロイしようとしてRequestEntityTooLargeExceptionエラーが発生した場合は、アプリが大きすぎるためデプロイできません。この問題を回避するには、キャッシュクリーンアップコードをnext.config.jsファイルに追加してください。

キャッシュクリーンアップを実行するnext.config.jsファイル内のコードの例を次に示します。

module.exports = {
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        config.optimization.splitChunks.cacheGroups = { }
        config.optimization.minimize = true;
        return config
      },
}

ビルドがメモリ不足エラーで失敗します

Next.js では、ビルドアーティファクトをキャッシュして、以降のビルドのパフォーマンスを向上させることができます。さらに、Amplify の AWS CodeBuild コンテナはユーザーに代わってこのキャッシュを圧縮して Amazon S3 にアップロードし、その後のビルドパフォーマンスを向上させます。これにより、ビルドがメモリ不足エラーで失敗する可能性があります。

ビルドフェーズ中にアプリがメモリ制限を超えないようにするには、次のアクションを実行します。まず、ビルド設定の cache.paths セクションから.next/cache/**/*を削除します。次に、ビルド設定ファイルから環境変数NODE_OPTIONSを削除します。代わりに、Amplify コンソールで環境変数NODE_OPTIONSを設定して、ノードの最大メモリ制限を定義します。Amplify コンソールを使用した環境変数を設定する方法の詳細については、「環境変数の設定」を参照してください。

これらの変更を加えたら、ビルドをやり直してください。成功したら、ビルド設定ファイルの cache.paths セクションに.next/cache/**/*を追加し直してください。

ビルドパフォーマンスを向上させるための Next.js キャッシュ設定の詳細については、Next.js のウェブサイトの「AWS CodeBuild」を参照してください。

アプリケーションに SSR と SSG の両方のブランチがあります。

SSR と SSG の両方のブランチを持つアプリはデプロイできません。SSR ブランチと SSG ブランチの両方をデプロイする必要がある場合は、SSR ブランチのみを使用するアプリと SSG ブランチのみを使用する別のアプリをデプロイする必要があります。

アプリが静的ファイルを予約パスのあるフォルダに保存します。

Next.js は、プロジェクトのルートディレクトリに保存されているpublicという名前のフォルダから静的ファイルを提供できます。Amplify で Next.js アプリをデプロイしてホストする場合、プロジェクトにpublic/staticパスのフォルダーを含めることはできません。Amplify は、アプリを配布するときに使用するpublic/staticパスを予約します。アプリにこのパスが含まれている場合は、Amplify でデプロイする前にstaticフォルダーの名前を変更する必要があります。

アプリが CloudFront の制限に達しました

CloudFront サービスクォータは、Lambda@Edge 関数がアタッチされた 25 のディストリビューションに AWS アカウントを制限します。このクォータを超える場合は、未使用の CloudFront ディストリビューションをアカウントから削除するか、クォータの増額をリクエストできます。詳細については、「Service Quotas ユーザーガイド」の「クォータ引き上げのリクエスト」を参照してください。

環境変数は Lambda 関数に引き継がれません。

SSR アプリの Amplify コンソールで指定した環境変数は、アプリの AWS Lambda 関数に引き継がれません。Lambda 関数から参照できる環境変数を追加する方法の詳細については、環境変数をサーバーサイドランタイムからアクセスできるようにします。を参照してください。

Lambda@Edge 関数は米国東部 (バージニア北部)リージョンで作成されます。

Next.js アプリをデプロイすると、Amplify は CloudFront が配信するコンテンツをカスタマイズする Lambda @Edge 関数を作成します。Lambda @Edge 関数は、アプリがデプロイされているリージョンではなく、米国東部 (バージニア北部) リージョンで作成されます。これは Lambda @Edge の制限です。Lambda @Edge 関数の詳細については、Amazon CloudFront 開発者ガイドの「エッジ関数の制限」を参照してください。

Next.js アプリではサポートされていない機能が使用されています。

Amplify でデプロイされたアプリは、バージョン 11 までの Next.js のメジャーバージョンをサポートします。Amplify でサポートされている、またはサポートされていない Next.js 機能の詳細なリストについては、supported featuresを参照してください。

新しい Next.js アプリをデプロイすると、Amplify はデフォルトでサポートされている最新バージョンの Next.js を使用します。古いバージョンの Next.js で Amplify にデプロイした既存の Next.js アプリがある場合は、そのアプリを Amplify ホスティングコンピューティングSSRプロバイダーに移行できます。手順については、Next.js 11 SSR アプリをAmplify ホスティングコンピューティングに移行する を参照してください。

Next.js アプリケーションにある画像が読み込まれない

next/imageコンポーネントを使用して Next.js アプリに画像を追加する場合、画像のサイズは 1 MB を超えることはできません。アプリを Amplify にデプロイすると、1 MB を超える画像は 503 エラーを返します。これは、ヘッダーと本文を含む、Lambda 関数によって生成されたレスポンスのサイズをLambda@Edge が 1 MB に制限しているためです。

1 MB の制限は、PDF やドキュメントファイルなど、アプリ内の他のアーティファクトにも適用されます。

サポートされていないリージョン

Amplify は、Amplify が利用可能なすべての AWS 地域で、クラシック (Next.js 11 のみ) SSR アプリのデプロイをサポートしているわけではありません。クラシック (Next.js 11 のみ) SSR は、欧州 (ミラノ) eu-south-1、中東 (バーレーン) me-south-1、およびアジアパシフィック (香港) ap-east-1 の各地域ではサポートされていません。