翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。 # SSR でサポートされている機能 このセクションでは、Amplify の SSR 機能のサポートについて説明します。 Amplify は、アプリの構築に使用された Node.js のバージョンと一致する Node.js バージョンサポートを提供します。 Amplify は、すべての SSR アプリをサポートする組み込みの画像の最適化機能を提供します。デフォルトの画像最適化機能を使用しない場合は、カスタム画像最適化ローダーを実装できます。 **Topics** + [Next.js アプリケーション向けの Node.js バージョンのサポート](#node-version-support-ssr) + [SSR アプリケーション向けの画像の最適化](#image-optimization) + [SSR アプリの Amazon CloudWatch Logs](#ssr-CloudWatch-logs) + [Amplify Next.js 11 SSR のサポート](#ssr-nextjs11-support) ## Next.js アプリケーション向けの Node.js バージョンのサポート Amplify が Next.js コンピューティングアプリケーションを構築してデプロイする際、アプリケーションの構築に使用された Node.js のメジャーバージョンと一致する Node.js ランタイムバージョンが使用されます。 **注記** 2025 年 9 月 15 日以降、Amplify ホスティングは Node.js 14、Node.js 16、Node.js 18 ランタイムをサポートしなくなります。サポートされるランタイムは、Node.js 20 や Node.js 22 などです。 Amplify コンソールの **[ライブパッケージオーバーライド]** 機能で使用する Node.js バージョンを指定できます。ライブパッケージアップデートの設定の詳細については、「[ビルドイメージでの特定のパッケージバージョンと依存関係バージョンの使用](custom-build-image.md#setup-live-updates)」を参照してください。nvm コマンドなどの他のメカニズムを使用して Node.js バージョンを指定することもできます。バージョンを指定しない場合、Amplify はデフォルトで、Amplify ビルドコンテナによって使用されている現在のバージョンを使用します。 ## SSR アプリケーション向けの画像の最適化 Amplify ホスティングは、すべての SSR アプリケーションをサポートする組み込みの画像の最適化機能を提供します。Amplify の画像の最適化を使用すると、ファイルサイズを可能な限り最小限に抑えながら、アクセス先のデバイスにとって適切な形式、次元、解像度で質の高い画像を配信できます。 現在、Next.js Image コンポーネントを使用してオンデマンドで画像を最適化することも、カスタム画像ローダーを実装することもできます。Next.js 13 以降を使用している場合、Amplify の画像の最適化機能を使用するためにそれ以上必要なアクションはありません。カスタムローダーを実装する場合は、次の「*カスタムイメージローダーの使用*」トピックを参照してください。 ### カスタム画像ローダーの使用 カスタム画像ローダーを使用する場合、Amplify はアプリケーションの `next.config.js` ファイル内のローダーを検出し、組み込みの画像の最適化機能を利用しません。Next.js がサポートするカスタムローダーの詳細については、[Next.js 画像](https://nextjs.org/docs/pages/api-reference/next-config-js/images)のドキュメントを参照してください。 ## 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-service-role.md)」を参照してください。 ## 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 ホスティングコンピューティングに移行する](update-app-nextjs-version.md)」を参照してください。 以下のリストでは、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 の料金](https://aws.amazon.com/s3/pricing/)に関する詳細については、「Amazon S3 の料金」を参照してください。 + アプリを提供する Amazon CloudFront ディストリビューション。CloudFront の料金の詳細については、「[Amazon CloudFront 料金表](https://aws.amazon.com/cloudfront/pricing/)」を参照してください。 + CloudFront が配信するコンテンツをカスタマイズする4つの[Lambda @Edge 関数](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/lambda-at-the-edge.html)。 ### 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 サービスロールを作成するには、[バックエンドリソースをデプロイするアクセス許可を持つサービスロールの追加](amplify-service-role.md) を参照してください。以下の手順では、`AdministratorAccess-Amplify`管理ポリシーをアタッチするロールを作成する方法を示しています。 `AdministratorAccess-Amplify` マネージドポリシーは、IAM アクションを含む複数の AWS サービスへのアクセスを提供します。 および は、`AdministratorAccess`ポリシーとして強力であると見なす必要があります。このポリシーでは、SSR アプリのデプロイに必要な権限よりも多くの権限が付与されます。 最小特権を認めるというベストプラクティスに従い、サービスロールに付与するアクセス許可を減らすことを推奨します。サービスロールに管理者アクセス権限を付与する代わりに、SSR アプリのデプロイに必要な権限のみを付与する独自のカスタマーマネージド IAM ポリシーを作成できます。カスタマー管理ポリシーを作成する手順については、「*IAM ユーザーガイド*」の「[IAM ポリシーの作成](https://docs.aws.amazon.com/IAM/latest/UserGuide/access_policies_create-console.html)」を参照してください。 独自のポリシーを作成する場合は、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 アプリをデプロイする際に予期しない問題が発生した場合は、以下のトラブルシューティングトピックを確認してください。 **Topics** + [アプリケーションの出力ディレクトリが上書きされる](#output-directory-overridden) + [SSR サイトをデプロイすると 404 エラーが発生します。](#404-error) + [アプリに CloudFront SSR ディストリビューションの書き換えルールがありません](#cloudfront-rewrite-rule-missing) + [アプリケーションが大きすぎてデプロイできません](#app-too-large-to-deploy) + [ビルドがメモリ不足エラーで失敗します](#out-of-memory) + [アプリケーションに SSR と SSG の両方のブランチがあります。](#ssr-and-ssg-branches) + [アプリが静的ファイルを予約パスのあるフォルダに保存します。](#amplify-reserved-path) + [アプリが CloudFront の制限に達しました](#cloudfront-distribution-limit) + [Lambda@Edge 関数は米国東部 (バージニア北部)リージョンで作成されます。](#nextjs-version-lambda-edge-functions) + [Next.js アプリではサポートされていない機能が使用されています。](#nextjs-version-support) + [Next.js アプリケーションにある画像が読み込まれない](#image-size-limit) + [サポートされていないリージョン](#amplify-region-support) #### アプリケーションの出力ディレクトリが上書きされる Amplify でデプロイされた Next.js アプリの出力ディレクトリは`.next`に設定する必要があります。アプリの出力ディレクトリが上書きされている場合は、`next.config.js`ファイルを確認してください。ビルド出力ディレクトリのデフォルトを`.next`にするには、ファイルから次の行を削除します。 ``` distDir: 'build' ``` ビルド設定で出力ディレクトリが`.next`に設定されていることを確認します。アプリのビルド設定を表示する方法については、[Amplify アプリケーションのビルド設定の構成](build-settings.md)を参照してください。 以下は、`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`ファイルを確認し、アプリのビルドスペック内のビルド出力ディレクトリが正しいことを確認するには、前のトピックの[アプリケーションの出力ディレクトリが上書きされる](#output-directory-overridden)の手順に従ってください。 #### アプリに CloudFront SSR ディストリビューションの書き換えルールがありません SSR アプリをデプロイすると、Amplify は CloudFront SSR ディストリビューションの書き換えルールを作成します。ウェブブラウザでアプリにアクセスできない場合は、Amplify コンソールでアプリの CloudFront 書き換えルールが存在することを確認してください。見つからない場合は、手動で追加するか、アプリを再デプロイできます。 Amplify コンソールでアプリの書き換えルールとリダイレクトルールを表示または編集するには、ナビゲーションペインで、[**アプリ設定**]、[**書き換えとリダイレクト**] の順に選択します。次のスクリーンショットは、SSR アプリをデプロイするときに Amplify が作成するリライトルールの例を示しています。この例では、CloudFront の書き換えルールが存在することに注意してください。 ![SSR アプリの「リライトとリダイレクト」ページ。](http://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/images/amplify-ssr-troubleshooting1.png) #### アプリケーションが大きすぎてデプロイできません 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 コンソールを使用した環境変数を設定する方法の詳細については、「[環境変数の設定](setting-env-vars.md)」を参照してください。 これらの変更を加えたら、ビルドをやり直してください。成功したら、ビルド設定ファイルの cache.paths セクションに`.next/cache/**/*`を追加し直してください。 ビルドパフォーマンスを向上させるための Next.js キャッシュ設定の詳細については、Next.js のウェブサイトの「[AWS CodeBuild](https://nextjs.org/docs/app/guides/ci-build-caching#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 サービスクォータ](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cloudfront-limits.html)は、Lambda@Edge 関数がアタッチされた 25 のディストリビューションに AWS アカウントを制限します。このクォータを超える場合は、未使用の CloudFront ディストリビューションをアカウントから削除するか、クォータの増額をリクエストできます。詳細については、「Service Quotas ユーザーガイド」の「[クォータ引き上げのリクエスト](https://docs.aws.amazon.com/servicequotas/latest/userguide/request-quota-increase.html)」を参照してください。 #### Lambda@Edge 関数は米国東部 (バージニア北部)リージョンで作成されます。 Next.js アプリをデプロイすると、Amplify は CloudFront が配信するコンテンツをカスタマイズする Lambda @Edge 関数を作成します。Lambda @Edge 関数は、アプリがデプロイされているリージョンではなく、米国東部 (バージニア北部) リージョンで作成されます。これは Lambda @Edge の制限です。Lambda @Edge 関数の詳細については、「*Amazon CloudFront デベロッパーガイド*」の「[エッジ関数の制限](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/edge-functions-restrictions.html)」を参照してください。 #### Next.js アプリではサポートされていない機能が使用されています。 Amplify でデプロイされたアプリは、バージョン 11 までの Next.js のメジャーバージョンをサポートします。Amplify でサポートされている、またはサポートされていない Next.js 機能の詳細なリストについては、[supported features](#supportedfeatures)を参照してください。 新しい Next.js アプリをデプロイすると、Amplify はデフォルトでサポートされている最新バージョンの Next.js を使用します。古いバージョンの Next.js で Amplify にデプロイした既存の Next.js アプリがある場合は、そのアプリを Amplify ホスティングコンピューティングSSRプロバイダーに移行できます。手順については、「[Next.js 11 SSR アプリをAmplify ホスティングコンピューティングに移行する](update-app-nextjs-version.md)」を参照してください。 #### 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 の各地域ではサポートされていません。