SuperAPI AI 工具集

cloudflare-pages

部署与运维

查看项目

更新于 10-15 19:48

技能介绍

用途:在 Cloudflare 网络上部署前端项目,支持预览构建、边缘函数与全局 CDN 分发。适用于静态站点(React、Vue、Astro、Hugo、Next.js 静态导出)、使用 Pages Functions 的全栈应用、需要按 PR 自动预览部署的项目,以及希望零配置 CDN、自定义域名与 TLS 的团队,也可从 Vercel、Netlify、GitHub Pages 迁移。

前提:本地 Node.js 18+ 与 npm;Cloudflare 账号(多数项目免费层可用);安装 Wrangler CLI:npm install -g wrangler;通过 wrangler login 或 CLOUDFLARE_API_TOKEN 环境变量认证;源码位于 Git 仓库(GitHub 或 GitLab 用于面板集成)。

用法:用 Wrangler 创建项目 npx wrangler pages project create my-site,先 npm run build 再 npx wrangler pages deploy dist --project-name=my-site,可用 --branch 触发预览 URL;也可在面板 Workers & Pages 连接 Git 仓库,配置生产分支、构建命令与输出目录。框架预设包括 React CRA(build)、Vite(dist)、Next.js(npx @cloudflare/next-on-pages,.vercel/output/static)、Astro(dist)、Hugo(public)、SvelteKit(.svelte-kit/cloudflare)。非生产分支自动获得预览 URL,格式为 https://<commit-hash>.<project-name>.pages.dev 或 https://<branch-name>.<project-name>.pages.dev。

Pages Functions:在项目根目录 functions/ 放置文件提供服务器端逻辑,支持 onRequestGet 等处理函数、动态路由参数、_middleware.ts 中间件,以及 KV、D1、R2 绑定(在 wrangler.toml 中配置)。

其他能力:public/_headers 自定义响应头与缓存,public/_redirects 重定向,面板或 API 添加自定义域名,GitHub Actions 通过 cloudflare/wrangler-action@v3 部署。

限制与排错:构建内存上限 1 GB,函数体积上限 1 MB;functions/ 必须位于仓库根目录否则返回 404;自定义域名需开启 Cloudflare 代理(橙色云)否则出现 SSL 错误;_headers 需放在 public/ 以复制到构建输出目录;绑定未定义需检查 wrangler.toml 并重新部署。