SSR でサポートされている機能 - AWS Amplify ホスティング
Next.js アプリケーション向けの Node.js バージョンのサポートSSR アプリのイメージ最適化SSR アプリの Amazon CloudWatch LogsAmplify Next.js 11 SSRのサポート

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

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

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

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

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

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

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

を指定できます。Node.js Amplify コンソールのライブパッケージオーバーライド機能で使用する バージョン。ライブパッケージアップデートの設定の詳細については、「ビルドイメージでの特定のパッケージバージョンと依存関係バージョンの使用」を参照してください。また、Node.js などの他のメカニズムを使用した バージョン nvm コマンド。バージョンを指定しない場合、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ランタイムに関する情報を の Amazon CloudWatch Logs に送信します AWS アカウント。SSR アプリをデプロイする場合、アプリには、Amplify がユーザーに代わって他の IAM サービスを呼び出すときに引き受ける サービスロールが必要です。Amplify ホスティングコンピューティングにサービスロールを自動的に作成させることも、作成したロールを指定することもできます。

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

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

サービスロールの詳細については、「Amplify アプリへのサービスロールの追加」を参照してください。

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 に必要な権限を付与するには、サービスロールを指定する必要があります。

ユーザーに代わって他の IAMサービスを呼び出すときに Amplify が引き受ける サービスロールを作成するには、「」を参照してくださいAmplify アプリへのサービスロールの追加。以下の手順では、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アプリをデプロイするときに予期しない問題が発生した場合は、次のトラブルシューティングトピックを確認してください。

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

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 換えルールが存在することに注意してください。

SSR アプリケーションの書き換えとリダイレクトのページ。

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

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ブランチの両方をデプロイする必要がある場合は、ブランチのみを使用する 1 つのアプリと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 は Lambda@Edge 関数を作成して、 が CloudFront 配信するコンテンツをカスタマイズします。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 リージョンで Classic (Next.js 11 のみ) SSRアプリのデプロイをサポートしているわけではありません。Classic (Next.js 11 のみ) SSRは、欧州 (ミラノ) eu-south-1、中東 (バーレーン) me-south-1、アジアパシフィック (香港) ap-east-1 の各リージョンではサポートされていません。