将 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. 查看页面上,选择保存并部署