Amplify ホスティングを使用したサーバー側でレンダリングされたアプリケーションのデプロイ

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

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

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

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

Next.js

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

Nuxt.js

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

Astro.js

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

SvelteKit

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

オープンソースアダプター

• オープンソースアダプターを使用する - 前述のリストにないアダプターを使用する手順については、「」を参照してくださいオープンソースアダプターの使用。

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

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

トピック

• Next.js の Amplify サポート
• Nuxt.js の Amplify サポート
• Astro.js の Amplify サポート
• の Amplify サポート SvelteKit
• Amplify にSSRアプリケーションをデプロイする
• SSR サポートされる機能
• SSR アプリケーションの料金
• SSR デプロイのトラブルシューティング
• アドバンスト: オープンソースアダプター

Amplify にSSRアプリケーションをデプロイする

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

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

SSR アプリを Amplify ホスティングにデプロイするには

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. [レビュー]ページで、[保存してデプロイ] を選択します。