字
字节笔记本
2026年5月3日
TanStack Start - 托管部署 (Hosting)
API中转
¥120
将 TanStack Start 应用部署到互联网,让用户可以访问。TanStack Start 基于 Vite 构建,可以部署到任何托管提供商。
官方托管合作伙伴
- Cloudflare ⭐ - 全球网络、边缘计算
- Netlify ⭐ - CI/CD、表单处理
部署平台对比
| 平台 | 类型 | 配置复杂度 | 成本 | 性能 |
|---|---|---|---|---|
| Cloudflare Workers | 官方合作伙伴 | 低 | 低 | 极高 |
| Netlify | 官方合作伙伴 | 低 | 低-中 | 高 |
| Nitro | 通用层 | 中 | 可变 | 可变 |
| Vercel | 第三方 | 低 | 中 | 高 |
| Railway | 第三方 | 中 | 中 | 中 |
| Node.js | 自托管 | 高 | 可变 | 可变 |
| Bun | 运行时 | 中 | 低 | 极高 |
Cloudflare Workers 部署
bash
pnpm add -D @cloudflare/vite-plugin wranglerts
// vite.config.ts
import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { cloudflare } from '@cloudflare/vite-plugin'
import viteReact from '@vitejs/plugin-react'
export default defineConfig({
plugins: [
cloudflare({ viteEnvironment: { name: 'ssr' } }),
tanstackStart(),
viteReact(),
],
})json
// wrangler.jsonc
{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "tanstack-start-app",
"compatibility_date": "2025-09-02",
"compatibility_flags": ["nodejs_compat"],
"main": "@tanstack/react-start/server-entry"
}bash
npx wrangler login
pnpm run deployNetlify 部署
bash
pnpm add --save-dev @netlify/vite-plugin-tanstack-startts
// vite.config.ts
import netlify from '@netlify/vite-plugin-tanstack-start'
export default defineConfig({
plugins: [tanstackStart(), netlify(), viteReact()],
})bash
npx netlify deployNitro 通用部署
Nitro 允许将应用部署到 Vercel、Cloudflare Workers、AWS Lambda、Azure Functions、Google Cloud Functions 等多种平台。
json
// package.json
"nitro": "npm:nitro-nightly@latest"ts
import { nitro } from 'nitro/vite'
export default defineConfig({
plugins: [tanstackStart(), nitro(), viteReact()],
})Bun 部署
需要 React 19+,使用 Nitro 部署时设置 'bun' 预设:
ts
export default defineConfig({
plugins: [tanstackStart(), nitro({ preset: 'bun' }), viteReact()],
})环境变量:
| 变量 | 描述 | 默认值 |
|---|---|---|
PORT | 服务器端口 | 3000 |
ASSET_PRELOAD_MAX_SIZE | 预加载最大文件大小 | 5242880 (5MB) |
ASSET_PRELOAD_ENABLE_ETAG | 启用 ETag | true |
ASSET_PRELOAD_ENABLE_GZIP | 启用 Gzip | true |
部署策略
| 需求 | 推荐 |
|---|---|
| 全球性能 | Cloudflare Workers |
| 开发者体验 | Netlify |
| 快速启动 | Vercel |
| 完全控制 | Node.js / Bun |
| 多平台支持 | Nitro |
分享: