SuperAPI AI 工具集

cloudflare-full-stack-integration

部署与运维

查看项目

更新于 10-15 22:39

技能介绍

用途:帮助开发者把 React 前端接入 Cloudflare Workers + Hono 后端,并使用 Clerk 做认证、D1 做数据库,解决 CORS、鉴权加载、环境变量与数据库绑定等集成问题。

主要能力:提供前端模板(lib/api-client.ts 自动附加令牌、components/ProtectedRoute.tsx 鉴权门与加载态)、后端模板(middleware/cors.ts、middleware/auth.ts 的 Clerk JWT 校验、routes/api.ts 示例路由)、配置模板(wrangler.jsonc、.dev.vars.example、vite.config.ts),以及 references/common-race-conditions.md 说明鉴权加载问题。

关键要点:@cloudflare/vite-plugin 开发时前后端同端口,应使用相对 URL 如 fetch('/api/data'),无需代理;CORS 中间件必须在路由之前注册;多数“竞态”实为缺少 isLoaded 检查,需先判断 isLoaded 与 isSignedIn 再请求;前端变量须以 VITE_ 开头放 .env,后端变量放 .dev.vars 或 wrangler secrets,通过 env 访问;D1 通过绑定直接使用,无需连接管理,且应使用参数化查询。

使用方式:npm create cloudflare@latest my-app 创建项目,安装 hono、@clerk/clerk-react、@clerk/backend 及 @cloudflare/vite-plugin、@tailwindcss/vite;复制各模板到项目,配置 wrangler.jsonc 绑定与 run_worker_first: ["/api/*"],设置环境变量,按顺序应用 CORS 与鉴权中间件,在 App 中调用 useApiClient(),用 ProtectedRoute 包裹受保护页面,最后 npm run dev 在 http://localhost:5173 测试。

适用场景:React 前端 + Workers 后端的全栈应用、需要 Clerk 登录与受保护 API 路由、使用 D1 的项目。

限制:资料未提供收费、价格与平台支持范围等信息;模板与版本号(如 hono 4.10.2、vite 7.1.11)以资料所述为准,实际使用需自行核对。