

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 将 Astro.js 应用程序部署到 Amplify Hosting
<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，您必须向应用程序添加适配器。我们不维护 Amplify 拥有、适用于 Astro 框架的适配器。本教程使用社区成员创建的 `astro-aws-amplify` 适配器。这个适配器可在 [github 上找到。 com/alexnguyennz/astro-aws-amplify 在网站上放大](https://github.com/alexnguyennz/astro-aws-amplify)。 GitHub AWS 不维护此适配器。

**将 Astro 应用程序部署到 Amplify Hosting 的方法**

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\_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 L CloudWatch ogs，则必须在控制台中明确启用此功能。打开**高级设置**部分，随后在**服务器端渲染（SSR）部署**部分中选择**启用 SSR 应用程序日志**。

1. 选择**下一步**。

1. 在**查看**页面上，选择**保存并部署**。