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

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

SSR を使用して Astro サイトを 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 アプリをデプロイする