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

# 开始将应用程序部署到 Amplify Hosting
<a name="getting-started"></a>

为帮助您了解 Amplify Hosting 的工作原理，以下教程将为您详细介绍如何构建和部署使用 Amplify 支持的常用 SSR 框架创建的应用程序。

**Topics**
+ [部署 Next.js 应用程序](getting-started-next.md)
+ [部署 Nuxt.js 应用程序](get-started-nuxt.md)
+ [部署 Astro.js 应用程序](get-started-astro.md)
+ [部署 SvelteKit 应用程序](get-started-sveltekit.md)

# 将 Next.js 应用程序部署到 Amplify Hosting
<a name="getting-started-next"></a>

本教程将为您详细介绍从 Git 存储库构建和部署 Next.js 应用程序的过程。

开始本教程之前，请完成以下先决条件。

**注册获取 AWS 账户**  
如果您还不是 AWS 客户，则需要按照在线说明进行[创建](https://portal.aws.amazon.com/billing/signup#/start/email)。 AWS 账户注册后，您就可以访问 Amplify 和其他可与您的应用程序配合使用的 AWS 服务。

**创建 应用程序**  
按照 *Next.js 文档*中的[create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app)说明，创建用于本教程的基本 Next.js 应用程序。

**创建 Git 存储库**  
Amplify 支持 GitHub Bitbucket 和 GitLab。 AWS CodeCommit将 `create-next-app` 应用程序推送到 Git 存储库。

## 步骤 1：连接 Git 存储库
<a name="step-1-connect-repository"></a>

在此步骤中，您将 Git 存储库中的 Next.js 应用程序连接到 Amplify Hosting。

**将应用程序连接到 Git 存储库**

1. 打开 [Amplify 控制台](https://console.aws.amazon.com/amplify/)。

1. 如果您要在当前区域中部署第一个应用程序，则默认情况下，您将从 **AWS Amplify** 服务页面开始。

   选择页面顶部的**部署应用程序**。

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

   对于 GitHub 存储库，Amplify 使用 GitHub 应用程序功能来授权 Amplify 访问权限。有关安装和授权 GitHub应用程序的更多信息，请参阅[设置 Amplify 对仓库的访问权限 GitHub](setting-up-GitHub-access.md)。
**注意**  
在你使用 Bitbucket、 GitLab、或 Amplify 控制台授权后， AWS CodeCommit Amplify 会从存储库提供者那里获取访问令牌，但它*不会将该令牌存储*在服务器上。 AWS Amplify 仅使用安装在特定存储库中的部署密钥访问存储库。

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

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

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

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

## 步骤 2：确认构建设置
<a name="step-2a-confirm-build-settings-for-the-front-end"></a>

Amplify 将自动检测要为您部署的分支运行的构建命令序列。在此步骤中，您将审核并确认构建设置。

**确认应用程序构建设置的方法**

1. 在**应用程序设置**页面中找到**构建设置**部分。

   验证**前端构建命令**和**构建输出目录**是否正确。对于此 Next.js 示例应用程序，**构建输出目录**设置为 `.next`。

1. 添加服务角色的过程会有所不同，具体取决于您要创建新角色还是使用现有角色。
   + 若要创建新角色：

     1. 请选择**创建和使用新的服务角色**。
   + 若要使用现有角色：

     1. 选择**使用现有角色**。

     1. 在服务角色列表中选择要使用的角色。

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

## 第 3 步：部署应用程序
<a name="step-3-save-and-deploy"></a>

在此步骤中，您将应用程序部署到 AWS 全球内容分发网络 (CDN)。

**保存和部署应用程序**

1. 在**审核**页面上，确认您的存储库详细信息和应用程序设置正确无误。

1. 选择**保存并部署**。您的前端构建通常需要 1 到 2 分钟，但可能因应用程序大小而异。

1. 完成部署时，您可以使用 `amplifyapp.com` 默认域链接查看应用程序。

**注意**  
为增强 Amplify 应用程序的安全性，已将 *amplifyapp.com* 域注册到[公共后缀列表 (PSL)](https://publicsuffix.org/)。为进一步增强安全性，如果您需要在 Amplify 应用程序的默认域名中设置敏感 Cookie，我们建议您使用带 `__Host-` 前缀的 Cookie。这将有助于保护您的域，防范跨站点请求伪造 (CSRF) 攻击。要了解更多信息，请参阅 Mozilla 开发者网络中的 [Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes) 页面。

## 步骤 4：（可选）清理资源
<a name="step-4-clean-up"></a>

如果不再需要为本教程部署的应用程序，您可以将其删除。此步骤有助于确保不会为未使用的资源付费。

**删除应用程序的方法**

1. 在导航窗格中的**应用程序设置**菜单中，选择**常规设置**。

1. 在**常规设置**页面上选择**删除应用程序**。

1. 在确认窗口中，输入 **delete**。然后选择**删除应用程序**。

## 为应用程序添加功能
<a name="next-steps"></a>

现在，您已经将一个应用程序部署到了 Amplify，您可以探索托管应用程序可用的以下功能。

**环境变量**  
应用程序通常在运行时需要配置信息。这些配置可以是数据库连接详细信息、API 密钥或参数。环境变量提供了在构建时公开这些配置的方法。有关更多信息，请参阅 [Environment variables](environment-variables.md)。

**自定义域**  
在本教程中，Amplify 将您的应用托管在默认 `amplifyapp.com` 域上，URL 示例：`https://branch-name.d1m7bkiki6tdw1.amplifyapp.com`。当您将应用程序连接到自定义域时，用户会看到您的应用程序托管在自定义网址上，例如 `https://www.example.com`。有关更多信息，请参阅[设置自定义域](custom-domains.md)。

**拉取请求预览**  
Web 拉取请求预览为团队提供了一种在将代码合并到生产或集成分支之前预览拉取请求 (PRs) 中更改的方法。有关更多信息，请参阅[拉取请求的 Web 预览](pr-previews.md)。

**管理多个环境**  
要了解 Amplify 如何使用功能分支和 GitFlow 工作流程来支持多个部署，请参阅[功能分支部署和团队](multi-environments.md)工作流程。

# 将 Nuxt.js 应用程序部署到 Amplify Hosting
<a name="get-started-nuxt"></a>

按照以下说明，将 Nuxt.js 应用程序部署到 Amplify Hosting。Nuxt 已使用 Nitro 服务器实现了一个预设适配器。因此，您不需要任何额外的配置即可部署 Nuxt 项目。

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

1. 登录 AWS 管理控制台 并打开 [Amplify](https://console.aws.amazon.com/amplify/) 控制台。

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

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

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

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

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

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

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

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

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

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

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

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

# 将 SvelteKit 应用程序部署到 Amplify 托管
<a name="get-started-sveltekit"></a>

按照以下说明将 SvelteKit 应用程序部署到 Amplify Hosting。您可以使用自己的应用程序，也可以创建新手入门应用程序。有关更多信息，请参阅*SvelteKit 文档*中的[创建项目](https://kit.svelte.dev/docs/creating-a-project)。

要将带有 SSR 的 SvelteKit 应用程序部署到 Amplify Hosting，您必须在项目中添加适配器。我们不为该框架维护 Amplify 自有的适配器。 SvelteKit 在此示例中，我们使用的是社区成员创建的 `amplify-adapter`。该适配器可在 [github 上找到。 com/gzimbron/amplify- GitHub 网站上的适配器](https://github.com/gzimbron/amplify-adapter)。 AWS 不维护此适配器。

**将 SvelteKit 应用程序部署到 Amplify Hosting**

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

1. 若要安装适配器，请打开一个终端窗口，然后运行以下命令。此示例使用 [github 上提供的社区适配器。 com/gzimbron/amplify-适配器](https://github.com/gzimbron/amplify-adapter)。如果您使用的是其他社区适配器，请*amplify-adapter*替换为适配器的名称。

   ```
   npm install amplify-adapter
   ```

1. 在 SvelteKit 应用程序的项目文件夹中，打开该`svelte.config.js`文件。编辑文件以使用`amplify-adapter`或*'amplify-adapter'*替换为适配器的名称。文件应该呈现以下状态。

   ```
   import adapter from 'amplify-adapter';
   import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
   
                 
   /** @type {import('@sveltejs/kit').Config} */
   const config = {
           // Consult https://kit.svelte.dev/docs/integrations#preprocessors
           // for more information about preprocessors
           preprocess: vitePreprocess(),
   
           kit: {
                   // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
                   // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
                   // See https://kit.svelte.dev/docs/adapters for more information about adapters.
                   adapter: adapter()
           }
   };
   
   export default config;
   ```

1. 提交更改，并将应用程序推送到 Git 存储库。

1. 现在，您可以将您的 SvelteKit 应用程序部署到 Amplify 了。

   登录 AWS 管理控制台 并打开 [Amplify](https://console.aws.amazon.com/amplify/) 控制台。

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

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

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

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

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

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

1. 在**应用程序设置**页面中找到**构建设置**部分。对于**构建输出目录**，请输入 **build**。

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

1. 在 `amplify.yml` 文件中，找到前端构建命令部分。输入 **- cd build/compute/default/** 和 **- npm i --production**。

   您的构建设置文件应如下所示：

   ```
   version: 1
   frontend:
       phases:
           preBuild:
               commands:
                   - 'npm ci --cache .npm --prefer-offline'
           build:
               commands:
                   - 'npm run build'
                   - 'cd build/compute/default/'
                   - 'npm i --production'
                 
       artifacts:
           baseDirectory: build
           files:
               - '**/*'
       cache:
           paths:
               - '.npm/**/*'
   ```

1. 选择**保存**。

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

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

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