将 Astro.js 应用程序部署到 Amplify Hosting - AWS Amplify 托管

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

将 Astro.js 应用程序部署到 Amplify Hosting

按照以下说明，将 Astro.js 应用程序部署到 Amplify Hosting。您可以使用现有应用程序，也可以使用 Astro 提供的正式示例之一创建新手入门应用程序。要创建新手入门应用程序，请参阅《Astro 文档》中的使用主题或新手入门模板。

要将带 SSR 的 Astro 站点部署到 Amplify Hosting，您必须向应用程序添加适配器。我们不维护 Amplify 拥有、适用于 Astro 框架的适配器。本教程使用社区成员创建的 astro-aws-amplify 适配器。此适配器可通过 GitHub 网站上的 github.com/alexnguyennz/astro-aws-amplify 找到。AWS 不维护此适配器。

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

  1. 在本地计算机上，导航到需要部署的 Astro 应用程序。

  2. 若要安装适配器，请打开一个终端窗口，然后运行以下命令。此示例使用 github.com/alexnguyennz/astro-aws-amplify 上提供的社区适配器。您可以用自己使用的适配器的名称替换 astro-aws-amplify。

    npm install astro-aws-amplify

  3. 在 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',
});

  4. 提交更改，并将项目推送到 Git 存储库。

    您现在已准备好将 Astro 应用程序部署到 Amplify。

  5. 登录 AWS Management Console 并打开 Amplify 控制台。

  6. 在所有应用程序页面中，选择创建新应用程序。

  7. 在开始使用 Amplify 进行构建页面中选择您的 Git 存储库提供商，然后选择下一步。

  8. 在添加存储库分支页面上，执行以下操作：

    1. 选择需要连接的存储库的名称。

    2. 选择需要连接的存储库分支的名称。

    3. 选择下一步。

  9. 在应用程序设置页面中找到构建设置部分。对于构建输出目录，请输入 .amplify-hosting。

  10. 您还必须在构建规范中更新应用程序的前端构建命令。要打开构建规范，请选择编辑 YML 文件。

  11. 在 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/**/*'

  12. 选择保存。

  13. 如果您希望 Amplify 能够将应用程序日志传输到 Amazon CloudWatch Logs，则必须在控制台中显式启用此功能。打开高级设置部分，随后在服务器端渲染（SSR）部署部分中选择启用 SSR 应用程序日志。

  14. 选择下一步。

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