サーバー側でレンダリングされたアプリケーションのトラブルシューティング

Amplify ホスティングコンピューティングを使用してSSRアプリケーションをデプロイする際に予期しない問題が発生した場合は、以下のトラブルシューティングトピックを確認してください。ここで問題に対する解決策が表示されない場合は、Amplify ホスティング GitHubの問題リポジトリのSSRウェブコンピューティングのトラブルシューティングガイドを参照してください。

フレームワークアダプターを使用している

フレームワークアダプターを使用するSSRアプリケーションのデプロイに問題がある場合は、「」を参照してくださいオープンソースアダプターの使用。

エッジAPIルートにより Next.js ビルドが失敗する

現在、Amplify は Next.js エッジAPIルートをサポートしていません。Amplify でアプリケーションをホストするときはAPIs、非エッジおよびミドルウェアを使用する必要があります。

オンデマンドのインクリメンタル・スタティック・リジェネレーションがアプリでは機能しない

バージョン 12.2.0 以降、Next.js は増分静的再生 (ISR) をサポートし、特定のページの Next.js キャッシュを手動で消去します。ただし、Amplify は現在オンデマンド をサポートしていませんISR。アプリが Next.js のオンデマンド再検証を使用している場合、アプリを Amplify にデプロイしてもこの特徴量は機能しません。

アプリのビルド出力が最大許容サイズを超えています

現在、Amplify がSSRアプリでサポートする最大ビルド出力サイズは 220 MB です。アプリのビルド出力のサイズが最大許容サイズを超えていることを示すエラーメッセージが表示された場合は、それを減らす手順を実行する必要があります。

アプリのビルド出力のサイズを小さくするために、アプリのビルドアーティファクトを検査し、更新または削除すべき大きな依存関係を特定できます。まず、ビルドアーティファクトをローカルコンピュータにダウンロードします。次に、ディレクトリのサイズを確認します。例えば、 node_modules ディレクトリには、Next.js サーバーランタイムファイルによって参照@esbuildされる @swcや などのバイナリが含まれている場合があります。これらのバイナリはランタイムで必要ないため、ビルド後に削除できます。

以下の手順に従って、アプリケーションのビルド出力をダウンロードし、 を使用してディレクトリのサイズを検査します。 AWS Command Line Interface (CLI).

Next.js アプリのビルド出力をダウンロードして検査するには

1. ターミナルウィンドウを開き、次のコマンドを実行します。アプリ ID、ブランチ名、ジョブ ID をユーザー自身の情報に変更します。ジョブ ID には、調査対象の失敗したビルドのビルド番号を使用します。

   aws amplify get-job --app-id abcd1234 --branch-name main --job-id 2

2. ターミナル出力で、、job、 stepsstepName: "BUILD"セクションURLで署名付きアーティファクトを見つけます。次の出力例では、 URLが赤で強調表示されています。

   "job": {
       "summary": {
           "jobArn": "arn:aws:amplify:us-west-2:111122223333:apps/abcd1234/main/jobs/0000000002",
           "jobId": "2",
           "commitId": "HEAD",
           "commitTime": "2024-02-08T21:54:42.398000+00:00",
           "startTime": "2024-02-08T21:54:42.674000+00:00",
           "status": "SUCCEED",
           "endTime": "2024-02-08T22:03:58.071000+00:00"
       },
       "steps": [
           {
               "stepName": "BUILD",
               "startTime": "2024-02-08T21:54:42.693000+00:00",
               "status": "SUCCEED",
               "endTime": "2024-02-08T22:03:30.897000+00:00",
               "logUrl": "https://aws-amplify-prod-us-west-2-artifacts.s3.us-west-2.amazonaws.com/abcd1234/main/0000000002/BUILD/log.txt?X-Amz-Security-Token=IQoJb3JpZ2luX2V...Example

3. をコピーしてブラウザウィンドウURLに貼り付けます。artifacts.zip ファイルがローカルコンピュータにダウンロードされます。これはビルド出力です。

4. du ディスク使用量コマンドを実行して、ディレクトリのサイズを検査します。次のコマンド例では、 computeおよび static ディレクトリのサイズを返します。

   du -csh compute static

   以下は、 computeおよび static ディレクトリのサイズ情報を含む出力の例です。

    29M    compute
   3.8M    static
    33M    total

5. compute ディレクトリを開き、 node_modulesフォルダを見つけます。フォルダのサイズを小さくするために更新または削除できるファイルの依存関係を確認します。

6. アプリケーションにランタイムに必要のないバイナリが含まれている場合は、アプリケーションの amplify.yml ファイルのビルドセクションに次のコマンドを追加して、ビルド後にバイナリを削除します。

   - rm -f node_modules/@swc/core-linux-x64-gnu/swc.linux-x64-gnu.node
   - rm -f node_modules/@swc/core-linux-x64-musl/swc.linux-x64-musl.node

   以下は、本番ビルドの実行後にこれらのコマンドが追加された amplify.yml ファイルのビルドコマンドセクションの例です。

   frontend:
     phases:
       build:
         commands:
            -npm run build
            
            // After running a production build, delete the files
            - rm -f node_modules/@swc/core-linux-x64-gnu/swc.linux-x64-gnu.node
            - rm -f node_modules/@swc/core-linux-x64-musl/swc.linux-x64-musl.node

ビルドはメモリ不足エラーで失敗する

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の「」を参照してください。

HTTP レスポンスサイズが大きすぎる

現在、Amplify が Web Compute プラットフォームを使用する Next.js 12 以降のアプリでサポートする最大レスポンスサイズは 5.72 MB です。この制限を超える応答は、コンテンツなしで504 個のエラーをクライアントに返します。