Astro.js アプリを Amplify ホスティングにデプロイする

以下の手順に従って、Astro.js アプリケーションを Amplify ホスティングにデプロイします。既存のアプリケーションを使用するか、Astro が提供する公式例のいずれかを使用してスターターアプリケーションを作成できます。スターターアプリケーションを作成するには、Astro ドキュメントの「テーマまたはスターターテンプレートを使用する」を参照してください。

を使用して Astro サイトSSRを Amplify ホスティングにデプロイするには、アプリケーションにアダプターを追加する必要があります。Astro フレームワーク用の Amplify 所有のアダプターは管理していません。このチュートリアルでは、コミュニティのメンバーによって作成されたastro-aws-amplifyアダプターを使用します。このアダプターは、 GitHub ウェブサイトの github.com/alexnguyennz/astro-aws-amplify で入手できます。 AWS はこのアダプターを維持しません。

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

ローカルコンピュータで、デプロイする Astro アプリケーションに移動します。
アダプターをインストールするには、ターミナルウィンドウを開き、次のコマンドを実行します。この例では、github.com/alexnguyennz/astro-aws-amplify で利用可能なコミュニティアダプターを使用しています。を置き換えることができます。astro-aws-amplify 使用しているアダプターの名前。
```
npm install astro-aws-amplify
```

Astro アプリケーションのプロジェクトフォルダで、 astro.config.mjs ファイルを開きます。ファイルを更新してアダプターを追加します。ファイルは次のようになっているはずです。


import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import awsAmplify from 'astro-aws-amplify';
 
import sitemap from '@astrojs/sitemap';
 
// https://astro.build/config
export default defineConfig({
  site: 'https://example.com',
  integrations: [mdx(), sitemap()],
  adapter: awsAmplify(),
  output: 'server',
});

変更をコミットし、プロジェクトを Git リポジトリにプッシュします。

これで、Astro アプリを Amplify にデプロイする準備が整いました。
にサインインする AWS Management Console Amplify コンソールを開きます。
「すべてのアプリ」ページで、「新しいアプリの作成」を選択します。
Amplify で構築を開始するページで、Git リポジトリプロバイダーを選択し、次へを選択します。
[リポジトリブランチを追加] ページで、次の操作を行います。
1. 接続するリポジトリの名前を選択します。
2. 接続するリポジトリブランチの名前を選択します。
3. [Next (次へ)] を選択します。
アプリ設定ページで、ビルド設定セクションを見つけます。ビルド出力ディレクトリ にを入力します.amplify-hosting。
また、ビルド仕様でアプリケーションのフロントエンドビルドコマンドを更新する必要があります。ビルド仕様を開くには、YMLファイルの編集 を選択します。

amplify.yml ファイルで、フロントエンドビルドコマンドセクションを見つけます。mv node_modules ./.amplify-hosting/compute/default と入力します。

ビルド設定ファイルは次のようになります。


version: 1
frontend:
    phases:
        preBuild:
            commands:
                - 'npm ci --cache .npm --prefer-offline'
        build:
            commands:
                - 'npm run build'
                - 'mv node_modules ./.amplify-hosting/compute/default'
    artifacts:
        baseDirectory: .amplify-hosting
        files:
            - '**/*'
    cache:
        paths:
            - '.npm/**/*'

[Save] を選択します。
Amplify がアプリケーションログを Amazon CloudWatch Logs に配信できるようにするには、コンソールでこれを明示的に有効にする必要があります。詳細設定セクションを開き、サーバー側のレンダリング (SSR) デプロイセクションでSSRアプリケーションログを有効にするを選択します。
[Next (次へ)] を選択します。
[レビュー]ページで、[保存してデプロイ] を選択します。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

Nuxt.js アプリをデプロイする

SvelteKit アプリケーションをデプロイする