将 SvelteKit 应用程序部署到 Amplify 托管

按照以下说明将 SvelteKit 应用程序部署到 Amplify Hosting。您可以使用自己的应用程序，也可以创建入门应用程序。有关更多信息，请参阅SvelteKit 文档中的创建项目。

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

将 SvelteKit 应用程序部署到 Amplify Hosting

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

2. 要安装适配器，请打开终端窗口并运行以下命令。此示例使用 github.com/gzimb ron/amplify-adapter 上提供的社区适配器。如果您使用的是其他社区适配器，请替换 amplify-adapter 使用您的适配器的名称。

   npm install amplify-adapter

3. 在 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;

4. 提交更改并将应用程序推送到您的 Git 存储库。

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

   登录 AWS Management Console 然后打开 Amplify 控制台。

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

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

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

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

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

   3. 选择下一步。

9. 在应用程序设置页面上，找到构建设置部分。对于生成输出目录，请输入build。

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

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

12. 选择保存。

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

14. 选择下一步。

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