翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
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 Hosting には、すべての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 Hosting コンピューティングがリリースされる前に Next.js アプリを Amplify にデプロイした場合、アプリは Amplify の以前のSSRプロバイダーである Classic (Next.js 11 のみ) を使用しています。このセクションのドキュメントは、Classic (Next.js 11 のみ) SSRプロバイダーを使用してデプロイされたアプリケーションにのみ適用されます。
注記
Next.js 11 アプリケーションを Amplify Hosting コンピューティングマネージドSSRプロバイダーに移行することを強くお勧めします。詳細については、「Next.js 11 SSRアプリケーションを Amplify Hosting コンピューティングに移行する」を参照してください。
次のリストは、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 に必要な権限を付与するには、サービスロールを指定する必要があります。
Amplify がユーザーに代わって他のIAMサービスを呼び出すときに引き受けるサービスロールを作成するには、「」を参照してくださいAmplify アプリへのサービスロールの追加。以下の手順では、AdministratorAccess-Amplify
管理ポリシーをアタッチするロールを作成する方法を示しています。
AdministratorAccess-Amplify
マネージドポリシーは、IAMアクションを含む複数の AWS サービスへのアクセスを提供します。 および は、AdministratorAccess
ポリシーと同じくらい強力であると見なす必要があります。このポリシーは、SSRアプリケーションのデプロイに必要なアクセス許可よりも多くのアクセス許可を提供します。
最小特権を認めるというベストプラクティスに従い、サービスロールに付与するアクセス許可を減らすことを推奨します。管理者にサービスロールへのアクセス許可を付与する代わりに、SSRアプリのデプロイに必要なアクセス許可のみを付与する独自のカスタマー管理IAMポリシーを作成できます。カスタマー管理IAMポリシーの作成手順については、IAM「 ユーザーガイド」の「ポリシーの作成」を参照してください。
独自のポリシーを作成する場合は、SSRアプリケーションのデプロイに必要な最小アクセス許可の次のリストを参照してください。
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 cloudfront:DeleteDistribution iam:AttachRolePolicy iam:CreateRole iam:CreateServiceLinkedRole iam:GetRole iam:PutRolePolicy iam:PassRole iam:UpdateAssumeRolePolicy iam:DeleteRolePolicy lambda:CreateFunction lambda:EnableReplication lambda:DeleteFunction lambda:GetFunction lambda:GetFunctionConfiguration lambda:PublishVersion lambda:UpdateFunctionCode lambda:UpdateFunctionConfiguration lambda:ListTags lambda:TagResource lambda:UntagResource lambda:ListEventSourceMappings lambda:CreateEventSourceMapping route53:ChangeResourceRecordSets route53:ListHostedZonesByName route53:ListResourceRecordSets s3:CreateBucket s3:GetAccelerateConfiguration s3:GetObject s3:ListBucket s3:PutAccelerateConfiguration s3:PutBucketPolicy s3:PutObject s3:PutBucketTagging s3:GetBucketTagging sqs:CreateQueue 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 書き換えルールが存在することに注意してください。
![SSR アプリケーションの書き換えとリダイレクトのページ。](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 コンソールを使用した環境変数を設定する方法の詳細については、「環境変数の設定」を参照してください。
これらの変更を加えたら、ビルドをやり直してください。成功したら、ビルド設定ファイルの cache.paths セクションに.next/cache/**/*
を追加し直してください。
ビルドパフォーマンスを向上させる Next.js キャッシュ設定の詳細については、Next.js ウェブサイトAWS CodeBuild
アプリケーションには SSRと の両方のSSGブランチがある
SSR と の両方のSSGブランチを持つアプリをデプロイすることはできません。SSR と の両方のSSGブランチをデプロイする必要がある場合は、SSRブランチのみを使用する 1 つのアプリと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 Hosting コンピューティングSSRプロバイダーに移行できます。手順については、Next.js 11 SSRアプリケーションを Amplify Hosting コンピューティングに移行する を参照してください。
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 の各リージョンではサポートされていません。