本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 將 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 Hosting，您必須將轉接器新增至應用程式。我們不會維護 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. 若要安裝轉接器，請開啟終端機視窗並執行下列命令。此範例使用社群轉接器，網址為 https：//[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\_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/**/*'
   ```

1. 選擇**儲存**。

1. 如果您希望 Amplify 能夠將應用程式日誌交付至 Amazon CloudWatch Logs，您必須在 主控台中明確啟用此功能。開啟**進階設定**區段，然後在**伺服器端轉譯** **(SSR) 部署區段中選擇啟用 SSR 應用程式日誌**。

1. 選擇**下一步**。

1. 在**檢閱**頁面上，選擇**儲存並部署**。