部署 SvelteKit 应用
Svelte 元框架,适配 Vercel、Netlify、Cloudflare、Node 和静态 SSG。
平台进阶
为什么
SvelteKit 结合 Svelte 编译输出与文件路由、SSR 和适配器。适配器系统让同一代码库一次配置变更部署到边缘、serverless 或 Node。
平台即服务采用率 2024 年增长 24%,团队从虚拟机管理转向 git push 部署。the cloud infrastructure market reached $330B in 2024, growing 22% year-over-year (Synergy Research),PaaS 层捕获了大多数新工作负载。
何时使用
需要路由、SSR 或表单 action 的全栈 Svelte 应用用 SvelteKit。纯 SSG 博客/文档选 adapter-static。
如何做
1. 构建 — npm run build 生成 .svelte-kit/output/(适配器特定)
2. Vercel — @sveltejs/adapter-vercel,git push 自动部署
3. Netlify — @sveltejs/adapter-netlify
4. Cloudflare — @sveltejs/adapter-cloudflare,运行于 Workers
5. Node — @sveltejs/adapter-node,node build/index.js
6. 静态 — @sveltejs/adapter-static 用于 SSG,配置 pages/fallback
7. 表单 action — +page.server.ts default action 处理表单 POST
示例
// svelte.config.js — Vercel 适配器
import adapter from "@sveltejs/adapter-vercel";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
export default {
preprocess: vitePreprocess(),
kit: { adapter: adapter() },
};
// src/routes/+page.server.ts — 表单 action
import type { Actions } from "./$types";
export const actions: Actions = {
default: async ({ request }) => {
const data = await request.formData();
return { success: true, name: data.get("name") };
},
};
// Dockerfile — Node 适配器
FROM node:20-alpine AS build
WORKDIR /app
COPY . .
RUN npm ci && npm run build
FROM node:20-alpine
WORKDIR /app
COPY --from=build /app/build ./build
COPY --from=build /app/package*.json ./
RUN npm ci --omit=dev
EXPOSE 3000
CMD ["node", "build/index.js"]
常见问题
- ⚠适配器未安装 — 默认 auto,平台失败,显式安装设置
- ⚠表单 action CSRF 失败 — origin 检查,设 csrf.checkOrigin 或配置允许 origin
- ⚠静态适配器动态路由 404 — 忘记 +page.ts 中 prerender entries
最佳实践
- ✓固定适配器版本匹配 @sveltejs/kit — 版本不匹配导致构建失败
- ✓数据获取用 load 函数 — 服务端 SSR 运行,客户端导航水合
- ✓设置健康检查和优雅关闭 — 处理 SIGTERM 以在退出前排空进行中的请求