Skip to content
返回部署

部署 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 以在退出前排空进行中的请求

常见问题解答