Amplify Hosting Computeに移行について

DonTacos

Migrating a Next.js 11 SSR app to Amplify Hosting compute の翻訳メモ

新しいNext.jsアプリをデプロイする場合、デフォルトでAmplifyはサポートされる最新のNext.jsバージョンを使用します。現在、Amplify Hosting compute SSRプロバイダーはNext.jsバージョン13をサポートしています。

Amplifyコンソールは、Amplify Hosting computeサービスがNext.js 12以降を完全にサポートするリリース前にデプロイされたアカウント内のアプリを検出します。コンソールは、Classic（Next.js 11のみ）の以前のSSRプロバイダーを使用して展開されたブランチを持つアプリを識別する情報バナーを表示します。私たちは、あなたがアプリをAmplify Hosting compute SSRプロバイダーに移行することを強くお勧めします。

アプリとそのすべての本番ブランチを同時に手動で移行する必要があります。アプリにはClassic（Next.js 11のみ）とNext.js 12の両方のブランチを含めることはできません。

以下の手順を使用して、アプリをAmplify Hosting compute SSRプロバイダーに移行してください。

アプリをAmplify Hosting compute SSRプロバイダーに移行するには、以下の手順を実行してください。

  1. AWS Management Consoleにサインインし、Amplifyコンソールを開きます。

  2. 移行したいNext.jsアプリを選択します。
    注：Amplifyコンソールでアプリを移行する前に、まずアプリのpackage.jsonファイルを更新してNext.jsバージョン12以降を使用する必要があります。

  3. ナビゲーションペインで、App settingsのGeneralを選択します。

  4. アプリのホームページでは、Classic (Next.js 11のみ)のSSRプロバイダーを使用して展開されたブランチを持つ場合、コンソールはバナーを表示します。バナーでMigrateを選択します。

  5. 移行の確認ウィンドウで、3つのステートメントを選択してMigrateを選択します。

  6. Amplifyはアプリをビルドし、再展開して移行を完了します。


CloudFrontディストリビューションを対象としたリライトルールを削除について

AmplifyのNext.jsアプリケーションをVersion 13にアップグレードする場合、CloudFrontディストリビューションを対象としたリライトルールを削除する必要があります。

理由は、Amplifyによって生成されたCloudFrontディストリビューションには、以前のバージョンのNext.jsアプリケーションに対応するために設定されたリライトルールが含まれているためです。これらのルールは、アプリケーションの機能性を維持するために必要であったかもしれませんが、新しいバージョンのアプリケーションには不要であり、アップグレード後にエラーを引き起こす可能性があります。

アップグレード後、Amplify CLIは自動的に新しいルールを生成し、デプロイプロセス中にCloudFrontディストリビューションに適用されます。したがって、古いルールを手動で削除する必要があります。

ただし、アプリケーションが特定のカスタムリライトルールを必要とする場合は、アップグレード後に手動でこれらのルールを再設定する必要があります。

CloudFrontのディストリビューションにあるビヘイビアについて

AWSのCloudFrontディストリビューションにおいて、ビヘイビア（Behavior）とは、リクエストされたURLパスに基づいて、異なるオリジンへの転送方法を指定する設定です。

具体的には、CloudFrontディストリビューションのビヘイビアでは、以下のような設定を行うことができます。

  • パスパターン（Path Pattern）：リクエストされたURLパスを指定します。例えば、/images/*と指定すると、/images/以下のすべてのパスがマッチします。

  • ターゲットオリジン（Target Origin）：リクエストされたURLパスに基づいて、転送先のオリジンを指定します。例えば、/images/*に対しては、S3バケットのURLを指定することができます。

  • キャッシュポリシー（Cache Policy）：リクエストされたURLパスに対してどのようなキャッシュポリシーを適用するかを指定します。例えば、/images/*には長期間キャッシュを設定し、/api/*にはキャッシュを無効にするような設定ができます。

ビヘイビアを設定することで、CloudFrontディストリビューションはリクエストされたURLパスに基づいて、異なるオリジンへの転送方法を決定し、キャッシュポリシーを適用することができます。これにより、複数のオリジンからのコンテンツを組み合わせたWebサイトや、高速なキャッシュを利用したAPIなど、様々な用途に利用することができます。


この記事が気に入ったらサポートをしてみませんか？