Amplify ホスティングでサーバーサイドレンダリングされたアプリのデプロイ

AWS Amplify を使用して、サーバー側のレンダリング () を使用するウェブアプリケーションをデプロイおよびホストできますSSR。Amplify ホスティングは Next.js フレームワークを使用して、作成されたアプリケーションを自動的に検出するため、 AWS Management Consoleで手動設定を行う必要はありません。

Amplify は、アプリケーションのビルド出力を Amplify Hosting が期待するディレクトリ構造に変換するオープンソースビルドアダプターを使用して、Javascript ベースのSSRフレームワークもサポートします。例えば、Nuxt、Astro、および SvelteKitフレームワークで作成されたアプリケーションをデプロイするには、使用可能なアダプターをインストールします。

上級ユーザーは、デプロイ仕様を使用してビルドアダプターを作成したり、ビルド後のスクリプトを設定したりできます。

最小限の設定で、次のフレームワークを Amplify ホスティングにデプロイできます。

Next.js

• Amplify は、アダプタを必要とせずに Next.js 15 アプリケーションをサポートします。開始するには、 Next.js 向けの Amplify サポート を参照してください。

Nuxt.js

• Amplify は、プリセットアダプターを使用して Nuxt.js アプリケーションのデプロイをサポートします。開始するには、 Next.js SSR 用の Amplify サポート を参照してください。

Astro.js

• Amplify は、コミュニティアダプターを使用して Astro.js アプリケーションのデプロイをサポートします。開始するには、 Astro.js 用の Amplify サポート を参照してください。

SvelteKit

• Amplify は、コミュニティアダプターを使用して SvelteKit アプリケーションデプロイをサポートします。開始するには、 の Amplify サポート SvelteKit を参照してください。

オープンソースのアダプターを開く

• オープンソースアダプターを使用する – 前述のリストにないアダプターの使用方法については、「フレームワークにオープンソースアダプターを使用する SSR 」を参照してください。

• フレームワークアダプターを構築する – フレームワークが提供する機能を統合したいフレームワーク作成者は、Amplify ホスティングのデプロイ仕様を使用して、Amplify が想定する構造に準拠するようにビルド出力を設定できます。詳細については、「Amplify ホスティングのデプロイの仕様を用いたビルド出力の設定」を参照してください。

• ビルド後のスクリプトを構成する – Amplify ホスティングのデプロイ仕様を使用して、特定のシナリオの必要に応じてビルド出力を操作できます。詳細については、「Amplify ホスティングのデプロイの仕様を用いたビルド出力の設定」を参照してください。例については、デプロイマニフェストを使用した Express サーバーのデプロイを参照してください。

トピック

• Next.js 向けの Amplify サポート
• Next.js SSR 用の Amplify サポート
• Astro.js 用の Amplify サポート
• の Amplify サポート SvelteKit
• Amplify へのSSRアプリのデプロイ
• SSR サポートされている機能
• SSR アプリケーションの料金
• SSR デプロイのトラブルシューティング
• 詳細: オープンソースアダプター

Amplify へのSSRアプリのデプロイ

この手順に従って、Amplify が想定するビルド出力に適合するデプロイバンドルを使用して、任意のフレームワークで作成されたアプリをデプロイできます。Next.js アプリケーションをデプロイする場合、アダプターは必要ありません。

フレームワークアダプターを使用するSSRアプリケーションをデプロイする場合は、まずアダプターをインストールして設定する必要があります。手順については、フレームワークにオープンソースアダプターを使用する SSR を参照してください。

SSR アプリを Amplify Hosting にデプロイするには

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

2. [すべてのアプリ] ページで、[アプリの新規作成] を選択します。

3. [Amplify で構築を開始] ページで、自分の Git リポジトリプロバイダーを選択し、[次へ] を選択します。

4. 「リポジトリブランチを追加」ページで、以下の操作を行います。

   1. 接続するリポジトリの名前を選択します。

   2. 接続するリポジトリブランチの名前を選択します。

   3. [Next (次へ)] を選択します。

5. アプリ設定ページで、Amplify は Next.js SSRアプリを自動的に検出します。

   別のフレームワークにアダプターを使用するSSRアプリケーションをデプロイする場合は、Amazon CloudWatch Logs を明示的に有効にする必要があります。詳細設定セクションを開き、サーバー側のレンダリング (SSR) デプロイセクションでSSRアプリケーションログを有効にするを選択します。

6. アプリには、Amplify が にログを配信するために引き受けるIAMサービスロールが必要です AWS アカウント。

   サービスロールを追加する手順は、新しいロールを作成するか、既存のロールを使用するかによって異なります。

   • 新規ロールを作成するには:

     1. [新しいサービスロールの作成と使用] を選択します。

   • 既存のサービスロールを使用するには:

     1. [既存のロールを使用する] を選択します。

     2. サービスロールリストで、使用するロールを選択します。

7. [Next (次へ)] を選択します。

8. [レビュー]ページで、[保存してデプロイ] を選択します。