08. Cloudflare 全栈落地：保持简洁

Cloudflare 部分维持第一版的重点：不是再讲一遍 Workers 入门，而是说明 TanStack Start 如何接入 Workers runtime 和 bindings。

官方路径

npm create cloudflare@latest -- my-tanstack-start-app --framework=tanstack-start
npm run dev
npm run deploy

已有项目接入 Cloudflare

npm i -D @cloudflare/vite-plugin wrangler

// vite.config.ts
import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { cloudflare } from '@cloudflare/vite-plugin'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    cloudflare({ viteEnvironment: { name: 'ssr' } }),
    tanstackStart(),
    react(),
  ],
})

// wrangler.jsonc
{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "my-tanstack-start-app",
  "compatibility_date": "2026-07-07",
  "compatibility_flags": ["nodejs_compat"],
  "main": "@tanstack/react-start/server-entry",
  "observability": { "enabled": true }
}

Bindings：为什么组合被推荐

TanStack server-side code 可以访问 Cloudflare bindings。于是 server functions/loaders 可以直接使用 D1、R2、KV、Queues、AI 等资源。

import { createServerFn } from '@tanstack/react-start'
import { env } from 'cloudflare:workers'

export const getProfile = createServerFn().handler(async () => {
  return env.DB.prepare('select * from profiles where id = ?')
    .bind('me')
    .first()
})

架构切片