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

# 将 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. 在**查看**页面上，选择**保存并部署**。