如何部署 SvelteKit 应用程序？

在本文中，您将使用 SvelteKit 构建一个基本的报价生成器应用程序，并使用 Back4app Containers 对其进行托管。

SvelteKit 是基于 Svelte JavaScript 框架原理的现代网络应用程序框架。它为开发人员提供了一种高效、优雅的方式来创建网络应用程序，并注重简洁性和性能。

2020 年，Svelte 的创始人 Rich Harris 创建了 SvelteKit，2022 年 10 月，Rich Harris 及其团队加入 Vercel。

在部署 SvelteKit 应用程序时，使用 Back4app Containers 会很有帮助。Back4app Containers 是一个允许开发人员在 Back4app 基础设施上部署和管理容器化应用程序的平台。

它是一种基于云的服务，为在生产中运行容器化应用程序提供了一种简单、可扩展的方式。

什么是 SvelteKit？

SvelteKit 是一个用于构建性能强大的网络应用程序的网络框架。它建立在轻量级反应式 JavaScript 框架 Svelte 的基础之上。

SvelteKit 提供了大量功能，包括服务器端渲染（SSR）、静态网站生成（SSG）、客户端路由等，使开发和部署网络应用程序变得更加容易。

它还具有许多优点，如简单性、灵活性、可扩展性、性能等。继续阅读，了解如何部署 SvelteKit 应用程序。

SvelteKit 的优势

以下是使用 SvelteKit 框架的一些优势：

轻松学习曲线

在为网站开发选择前端框架时，需要考虑的关键因素之一是与该框架相关的学习曲线。

陡峭的学习曲线会让你对采用框架望而却步，而平缓的学习曲线则会让你更容易接受，更有吸引力。

SvelteKit 的学习曲线比较平缓，尤其是在熟悉 HTML、CSS 和 JavaScript 的情况下。它的语法简单直观，易于理解和构建网络应用程序。

支持 TypeScript

TypeScript 是 JavaScript 的静态类型超集，在网络开发领域广受欢迎。它为 JavaScript 项目带来了强大的类型、代码清晰度和更好的工具。

SvelteKit 具有出色的 TypeScript 支持，使您能够编写类型安全的代码，并在开发过程中捕捉潜在的错误。这可以提高代码质量、可维护性和开发团队内部的协作。

基于文件的路由选择

基于文件的路由是一种现代网络开发功能，可让您轻松组织和管理应用程序中的路由。它通过使用文件管理来确定路由，而不是使用第三方库。

SvelteKit 使用基于文件的路由系统。您可以通过创建文件和文件夹来组织应用程序的路由，从而轻松管理项目结构。

社区和生态系统

在网络开发领域，拥有一个强大、支持性强的社区以及一个繁荣的生态系统是一项重大优势。

SvelteKit 受益于更广泛的 Svelte 生态系统，其中包括不断发展壮大的社区、丰富的可重用组件和库集合以及大量的文档。

SvelteKit 的局限性

虽然 SvelteKit 是一个用于构建高效网络应用程序的强大框架，但它也有一些局限性，您应牢记在心。这些限制包括

服务器端渲染（SSR）的限制

服务器端渲染（SSR）是一种允许网络应用程序在服务器上渲染内容并将预先渲染好的 HTML 发送到客户端的技术。SSR 有几个优点，包括改善搜索引擎优化、加快初始页面加载速度，以及在低端设备上有更好的性能。

SvelteKit 支持服务器端呈现。不过，它缺乏其他框架中的一些高级 SSR 功能，例如对服务器端呈现的细粒度控制或对流式 SSR 的支持。

有限的工具

作为一个相对较新的框架，SvelteKit 的工具仍在不断发展，其成熟度和功能集可能不如其他框架。

这意味着不同的 SvelteKit 项目在开发设置和工具选择上可能会存在一些差异。这可能导致代码整理、测试或构建优化等任务的选项较少。

有限生态系统

有限的生态系统是 SvelteKit 的局限之一，它会影响您的开发体验和可用选择。与更成熟的框架相比，SvelteKit 的库、工具和插件生态系统规模较小。

这意味着您可能需要从头开始构建某些功能，或者依赖社区支持的解决方案。在决定是否在项目中使用 SvelteKit 时，考虑 SvelteKit 生态系统的当前状态非常重要。

社区规模

社区规模会极大地影响特定框架的开发经验和可用支持。

尽管 SvelteKit 社区发展迅速，但与 React 和 Vue.js 等其他主要框架的社区相比，其规模仍然较小。

这可能意味着随时可用的资源更少、采用新功能的速度更慢、学习资源更少，以及社区支持的响应时间可能更长。

SvelteKit 部署选项

您可以在各种平台上部署 SvelteKit 应用程序，包括基础设施即服务 (IaaS) 和容器即服务 (CaaS)。

基础设施即服务（IaaS）

基础设施即服务（IaaS）平台是通过互联网提供虚拟化计算资源的云计算服务。这些资源包括虚拟机、存储、网络和其他基本组件。

IaaS 平台提供了一种灵活、可扩展的方式来访问和管理 IT 基础设施，而无需投资和维护物理硬件。

他们还提供托管服务、备份和灾难恢复、安全性和合规性，并按照现收现付的定价模式提高成本效益。

可用于部署 SvelteKit 应用程序的 IaaS 平台示例包括

• Amazon Web Services (AWS)
• Microsoft Azure
• Google Cloud Platform (GCP)

容器即服务（CaaS）

容器即服务（CaaS）平台，又称容器管理平台或容器编排平台，是一种基于云的服务，可简化容器化应用程序的部署、扩展、管理和编排。

这些平台旨在简化容器化流程，并为容器管理提供全面的解决方案，让您可以专注于开发应用程序，而无需管理复杂的基础设施。

您可以使用 CaaS 平台部署 SvelteKit 应用程序。其中一些平台包括

• Docker
• Kubernetes
• Back4App

请注意，这些是 SvelteKit 应用程序可用的其他部署选项。应用程序的最佳平台取决于您的具体需求，包括性能、可扩展性和成本因素。

部署流程

使用 Back4app CaaS 平台，部署 SvelteKit 应用程序是一个简单而简化的过程，可带来许多好处。Back4app 的 CaaS 處理底層基礎設施，因此您可以專注於建立應用程式。

什么是 Back4app 容器？

Back4App Containers，又称 “Back4App CaaS”（容器即服务），是 Back4App 提供的一项功能，允许开发人员在 Back4App 提供的云环境中部署和管理 Docker 容器。

它是一个可管理的容器托管解决方案，可简化云中 Docker 容器的部署和管理。

Back4app 容器具有可扩展性、灵活性以及与其他 Back4App 服务的集成性，因此适用于各种应用程序和服务。

对于那些希望在项目中利用容器化，同时最大限度降低基础架构管理复杂性的人来说，这是一个极佳的选择。

项目介绍

在本教程中，您将使用 SvelteKit 构建一个简单的报价生成器应用程序，使用报价 API 获取随机报价并显示。

要创建 SvelteKit 应用程序，请在终端运行以下命令：

npm create svelte@latest quote-generator

运行命令后，根据终端显示的提示配置 SvelteKit 项目。

例如

如上图所示，报价生成器项目将使用 TypeScript 语法、ESLint（用于代码检查）和 Prettier（用于代码格式化）。

现在，在终端上将当前目录切换到项目目录，并安装必要的依赖项。为此，请在终端运行以下命令：

cd quote-generator
npm install

安装必要的依赖项后，在您喜欢的集成开发环境中打开项目，开始构建应用程序。

构建您的应用程序

在创建应用程序时，首先要定义应用程序的全局样式和布局。要定义应用程序的全局样式，请在src目录中创建样式文件夹，并在该文件夹中添加global.css文件。

在global.css文件中，编写以下代码行：

/*global.css*/
@import url('<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 100%;
    block-size: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #36454F;
    font-size: 15px;
    color: #FFFFF0;
    font-family: 'Montserrat', sans-serif;
}

button{
    background-color: #333333;
    color: #e2e2e2;
    border-radius: 12px;
    padding: 0.7rem 2rem;
    border: none;
    font-family: 'Montserrat', sans-serif;
}

button:hover{
    background-color:  #28282B;
    color: #333333;
}

上面的代码块为应用程序设置了一些基本样式。它从Google Fonts中导入了 Montserrat 字体。

它还会为所有元素应用默认样式，将内容居中放置在正文中，并在默认和悬停状态下为按钮元素设置样式。

完成应用程序全局样式的定义后，必须将这些样式应用到应用程序中。

为此，您需要布局路径。SvelteKit 提供了一个+layout.svelte文件，可帮助您在应用程序中定义布局。您可以通过在src/routes目录中添加+layout.svelte文件来定义应用程序的布局。

在+layout.svelte文件中，导入global.css文件，将全局样式应用到应用程序中。

就像这样

<!--+layout.svelte-->
<script lang="ts">
    import '../styles/global.css'
</script>
  
<slot></slot>

槽元素为应用程序插入页面内容创建了一个空间。渲染页面时，应用程序会用页面内容填充槽元素，使其在布局中可见。

在项目的src/lib目录中，创建Card.svelte文件。这是用于呈现从报价 API 获取的数据的Card组件。

卡片组件应该是这样的

<!-- Card.svelte -->
<script lang="ts">
    export let author: string = ""; 
    export let content: string = "";
</script>

<main>
    <h4>{author}</h4>
    <p>{content}</p>
</main>

<style>
    main{
        inline-size: 80%;
        padding: 3rem;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background-color: #f2f2f2;
        color: #36454F;
    }
</style>

在卡片组件的脚本标签中，定义了两个道具，即作者道具和内容道具。它们都是字符串类型，初始值都是空字符串。

主元素定义了组件的模板。模板包括一个显示author属性值的h4元素和一个显示content属性值的p元素。最后，style标签包含 CSS 属性和值，用于对组件进行样式设置。

现在，导入并渲染+page.svelte文件中的Card组件。这是在渲染应用程序时显示的主页路径。

在+page.svelte文件中，您将从报价 API 获取数据，并使用道具将其传递给卡片组件。

就像这样

<!-- +page.svelte -->
<script lang="ts">
    import Card from "$lib/Card.svelte";
    import Icon from '@iconify/svelte';
    import { onMount } from "svelte";

    let quote: any = {};

    const fetchQuote = async () => {
        const response = await fetch('<https://api.quotable.io/random>');
        const data = await response.json();
        quote = data;
    }

    onMount( fetchQuote );
</script>

<main>
   <h1>Quote Generator</h1>
    <Card author={quote.author} content={quote.content}/>
   <div>
        <button on:click={fetchQuote}>
            <Icon icon="subway:random" color="#FFF" />
        </button>
    </div>
</main>

<style>
    main{
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        align-items: center;
    }

    h1{
        margin-block-end: 0.8rem;
    }
</style>

上面的代码块使用fetchQuote函数从报价 API 获取数据，然后将获取的数据赋值给报价变量。

将fetchQuote函数传递给onMount钩子可确保该函数在组件挂载（即组件的初始呈现）时运行。

卡片组件接受引用对象中的作者和内容属性值，并将其显示出来。点击按钮会触发fetchQuote函数，随机获取另一段引用来显示。

上面的代码块使用了@iconify/svelte软件包中的图标组件。要使用该组件，必须首先安装@iconify/svelte软件包，方法是在终端上的项目目录中运行以下命令：

npm install --save-dev @iconify/svelte

安装@iconify/svelte软件包后，在开发服务器上运行应用程序以查看应用程序。在终端上运行以下命令即可：

npm run dev

运行上述命令将启动http://localhost:5173/ 上的开发服务器。在网络浏览器中打开链接即可查看应用程序。

应用程序应该是这样的

将应用程序 Docker 化

在 Back4app CaaS 平台上部署应用程序之前，必须先对其进行 dockerize。要对 SvelteKit 应用程序进行 dockerize，首先需要安装 Svelte 的节点适配器。

在终端运行以下命令即可安装节点适配器：

npm i -D @sveltejs/adapter-node

运行此命令可将@sveltejs/adapter-node软件包作为开发依赖关系安装到您的 SvelteKit 项目中。当您想在 Node.js 环境中部署 SvelteKit 应用程序时，就需要使用此适配器。

安装完成后，将svelte.config.js文件中的第一行代码替换为下面的代码：

import adapter from '@sveltejs/adapter-node';

下一步是在项目根目录下创建.dockerignore文件。在.dockerignore文件中，指定构建 Docker 镜像时应排除的文件和目录。

就像这样

node_modules
.svelte-kit
build
public

指定应排除的文件和目录后。在项目根目录下创建名为Dockerfile的Docker文件。

在Dockerfile 中，添加这几行代码：

FROM node:18-alpine as build
WORKDIR /app
COPY ./package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM node:18-alpine AS production
COPY --from=build /app/build .
COPY --from=build /app/package.json .
COPY --from=build /app/package-lock.json .
RUN npm ci --omit dev
EXPOSE 3000
CMD ["node", "."]

该Dockerfile会进行多阶段构建，第一阶段构建应用程序，第二阶段创建一个较小的生产映像，其中只包含必要的依赖项。

现在，你可以在终端运行以下命令来构建应用程序的 docker 镜像：

docker build -t quote-generator .

部署应用程序

一旦完成应用程序的 docker 化并将其推送到 GitHub 仓库，就可以在 Back4app 上进行部署了。为此，如果还没有 Back4app 账户，请先创建一个。

要创建 Back4app 账户，请按以下步骤操作：

1. 访问Back4app 网站。
2. 点击 “注册 “按钮。
3. 填写报名表并提交。

创建 Back4app 账户后，登录 Back4app 网站账户并创建新应用程序。点击屏幕右上角的“新建应用程序 “按钮即可。

选择 “容器即服务 “选项。选择该选项后，网站会将您重定向到一个不同的页面，在这里您可以将 GitHub 账户链接到 Back4app。

将您的 GitHub 账户链接到 Back4app 后，请选择要部署的应用程序版本库。

在最终部署应用程序之前，为应用程序命名并配置其初始部署。

应用程序部署成功后，Back4app 将为您提供一个链接，以便您在网络浏览器上访问应用程序。

结论

总之，使用 Back4pp 的 CaaS 平台部署 SvelteKit 应用程序简化了开发过程。过程非常简单。

它包括创建应用程序、docker 化应用程序、将应用程序推送到 GitHub 仓库，最后部署应用程序。

在考虑部署 SvelteKit 应用程序时，Back4app CaaS 平台提供了一个可扩展且经济高效的解决方案。

如果您喜欢这篇文章，您可能还会喜欢阅读《如何使用 ChatGPT 构建 SvelteKit 应用程序》一文。

常见问题