翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# Astro.js アプリを Amplify ホスティングにデプロイする
<a name="get-started-astro"></a>

以下の手順に従って、Astro.js アプリケーションを Amplify Hosting にデプロイします。既存のアプリケーションを使用することもできるし、Astro が提供する公式例のいずれかを使用してスターターアプリケーションを作成できます。スターターアプリケーションを作成するには、「*Astro ドキュメント*」の「[テーマまたはスターターテンプレートを使用する](https://docs.astro.build/en/install-and-setup/#use-a-theme-or-starter-template)」を参照してください。

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

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

1. ローカルコンピュータで、デプロイする Astro アプリケーションに移動します。

1. このアダプターをインストールするには、ターミナルウィンドウを開いて以下のコマンドを実行します。この例では、[github.com/alexnguyennz/astro-aws-amplify](https://github.com/alexnguyennz/astro-aws-amplify) で利用可能なコミュニティアダプターを使用します。*astro-aws-amplify* は、使用しているアダプターの名前に置き換えることができます。

   ```
   npm install astro-aws-amplify
   ```

1. 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',
   });
   ```

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

   これで、Astro アプリを Amplify にデプロイする準備が整いました。

1. にサインイン AWS マネジメントコンソール し、[Amplify コンソール](https://console.aws.amazon.com/amplify/)を開きます。

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

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

1. **[リポジトリブランチを追加]** ページで、次の操作を行います。

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

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

   1. [**次へ**] を選択します。

1. **[アプリ設定]** ページで、**[ビルド設定]** セクションを見つけます。**[ビルド出力ディレクトリ]** には、**.amplify-hosting** を入力します。

1. また、ビルド仕様でアプリのフロントエンドのビルドコマンドを更新する必要があります。ビルド仕様を開くには、**[YML ファイルの編集]** を選択します。

1. `amplify.yml` ファイルで、フロントエンドのビルドコマンドセクションを検索します。**mv node\$1modules ./.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/**/*'
   ```

1. **[保存]** を選択します。

1. Amplify がアプリログを Amazon CloudWatch Logs に送信できるようにするには、コンソールで明示的に有効にする必要があります。**[詳細設定]** セクションを開いて、**[サーバーサイドレンダリング (SSR) のデプロイ]** セクションで **[SSR アプリのログを有効にする]** を選択します。

1. [**次へ**] を選択します。

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