部署 TanStack Start 应用
TanStack 全栈 React 框架，文件路由和 SSR，部署到 Vercel、Netlify、Cloudflare。
平台高级
为什么
TanStack Start 将 TanStack Router 类型安全路由带入全栈框架，含 SSR 和服务端函数。用 Vinxi（基于 Vite）构建，适配器部署。
平台即服务采用率 2024 年增长 24%，团队从虚拟机管理转向 git push 部署。the cloud infrastructure market reached $330B in 2024, growing 22% year-over-year (Synergy Research)，PaaS 层捕获了大多数新工作负载。
何时使用
类型安全全栈 React 应用用 TanStack Start。重视 TanStack Router 100% 类型安全胜过生态成熟度时选。
如何做
1. 构建 — vinxi build 生成 .output/
2. Vercel — @tanstack/start/vercel 适配器
3. Netlify — @tanstack/start/netlify 适配器
4. Cloudflare — @tanstack/start/cloudflare 适配器
5. Node — node .output/server/index.mjs
6. 服务端函数 — createServerFn 用于 RPC
示例
// app.config.ts
import { defineConfig } from "@tanstack/start/config";
export default defineConfig({ vite: { plugins: [] } });
// src/routes/index.tsx — 类型安全路由
import { createFileRoute } from "@tanstack/router";
export const Route = createFileRoute("/")({ component: () => <h1>Home</h1> });
// 部署：vinxi build && vercel --prod
常见问题
- ⚠适配器未配置 — 默认 Node，边缘平台失败
- ⚠路由类型未生成 — 构建前运行 tanstack router generate
- ⚠环境间配置漂移 — 使用基础设施即代码（Terraform/Pulumi）保持 dev/staging/prod 一致
最佳实践
- ✓所有服务端逻辑用 createServerFn — 客户端服务端类型安全 RPC
- ✓prebuild 运行 tanstack router generate — 确保路由类型最新
- ✓设置健康检查和优雅关闭 — 处理 SIGTERM 以在退出前排空进行中的请求