Cloudflare Pages Functions 全栈

Q: 什么是Cloudflare Pages Functions 全栈？它解决什么问题？

通过 functions/ 目录为 Pages 站点添加 API 路由 — 基于文件路由带边缘绑定。 它可帮助开发者在不自建基础设施的前提下完成部署、存储与扩展，是云服务选型的核心参考。

Q: Cloudflare Pages Functions 全栈 的最佳实践有哪些？

Cloudflare Pages Functions 全栈 的最佳实践包括：用 _routes.json 限制 Function 调用 — 跳过静态路径，省 CPU 成本；中间件就近放置 — functions/api/_middleware.ts 仅 /api 范围认证；用 @cloudflare/workers-types 类型 — env、params、next 自动补全。其中首条「用 _routes.json 限制 Function 调用 — 跳过静态路径，省 CPU 成本」应作为团队默认规范写入 IaC 模板。

通过 functions/ 目录为 Pages 站点添加 API 路由 — 基于文件路由带边缘绑定。

Cloudflare进阶

为什么

Pages Functions 把静态站变全栈应用而不离开 Pages — 同部署、同预览 URL、同绑定（KV/D1/R2）。无需管理独立 Worker。

Cloudflare 网络覆盖 125+ 国家的 330+ 城市，服务 20% 的互联网流量。Workers 冷启动为 0ms（基于 isolate），免费套餐覆盖每天 10 万请求。

何时使用

前端和 API 一体时用（Next.js、Astro、Remix）。避免跨多前端共享的 API（用独立 Worker）。

如何做

1. 仓库根创建 functions/ — functions/api/users.ts → 路由 /api/users 2. 方法 — 导出 onRequestGet、onRequestPost、onRequestPut、onRequestDelete 3. 动态 — functions/api/[id].ts → /api/:id，通过 context.params.id 访问 4. 中间件 — functions/_middleware.ts 在该目录所有路由前运行 5. 绑定 — wrangler.toml [[d1_databases]] 等，通过 context.env 可用 6. 静态资源 — _routes.json 控制哪些路径调 Functions vs 静态 7. 部署 — git push 触发构建 + Functions 一起部署

示例

// functions/api/feedback.ts — POST 创建，GET 列表 export const onRequestGet = async ({ env }) => { const { results } = await env.DB.prepare("SELECT * FROM feedback ORDER BY created_at DESC").all(); return Response.json(results); }; export const onRequestPost = async ({ request, env }) => { const { message, email } = await request.json(); await env.DB.prepare("INSERT INTO feedback (message, email) VALUES (?, ?)").bind(message, email).run(); return Response.json({ ok: true }, { status: 201 }); }; // functions/_middleware.ts — 所有 /api 路由的认证检查 export const onRequest = async (context) => { const token = context.request.headers.get("Authorization"); if (!token) return new Response("未授权", { status: 401 }); return context.next(); };

常见问题

⚠functions/ 位置错误 — 须仓库根，不在 src/ 或 public/
⚠动态路由语法 — [id].ts 非 :id.ts，参数通过 context.params 访问
⚠静态资源触发 Functions — 用 _routes.json exclude 跳过 /assets/*

最佳实践

✓用 _routes.json 限制 Function 调用 — 跳过静态路径，省 CPU 成本
✓中间件就近放置 — functions/api/_middleware.ts 仅 /api 范围认证
✓用 @cloudflare/workers-types 类型 — env、params、next 自动补全

常见问题解答

什么是Cloudflare Pages Functions 全栈？它解决什么问题？

通过 functions/ 目录为 Pages 站点添加 API 路由 — 基于文件路由带边缘绑定。它可帮助开发者在不自建基础设施的前提下完成部署、存储与扩展，是云服务选型的核心参考。

如何在 5 分钟内上手Cloudflare Pages Functions 全栈？

两步即可跑通：① 仓库根创建 functions/ — functions/api/users.ts → 路由 /api/users；② 方法 — 导出 onRequestGet、onRequestPost、onRequestPut、onRequestDelete。建议先用免费套餐验证流程，再接入生产环境。