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

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

将 SvelteKit 应用程序部署到 Amplify Hosting

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

要将带 SSR 的 SvelteKit 应用程序部署到 Amplify Hosting，您必须向应用程序添加适配器。我们不维护 Amplify 拥有、适用于 SvelteKit 框架的适配器。在此示例中，我们使用的是社区成员创建的 amplify-adapter。此适配器可通过 GitHub 网站上的 github.com/gzimbron/amplify-adapter 找到。AWS 不维护此适配器。

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

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

  2. 若要安装适配器，请打开一个终端窗口，然后运行以下命令。此示例使用 github.com/gzimbron/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 CloudWatch Logs，则必须在控制台中显式启用此功能。打开高级设置部分，随后在服务器端渲染（SSR）部署部分中选择启用 SSR 应用程序日志。

  14. 选择下一步。

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