Cloudflare Workers+Pages+D1：构建无服务器边缘应用完整方案

Cloudflare WorkersPagesD1构建无服务器边缘应用完整方案本教程通过制作一个简单的“留言板”学习 Cloudflare 三个核心产品Cloudflare Pages部署前端页面Cloudflare Workers编写后端 APICloudflare D1保存留言数据最终架构一、Cloudflare Pages、Workers、D1 分别是什么组件角色可部署 / 运行内容本项目承担功能Pages前端静态托管HTML、CSS、JS、Vue、React、静态网站展示留言板标题、姓名输入框、留言输入框、提交按钮、留言列表Workers边缘后端 API 服务JavaScript / TypeScript处理 HTTP 请求接口GET/api/helloGET/api/messagesPOST/api/messagesPOST/api/echo数据校验、读写 D1、返回 JSON、对接 KV/R2D1边缘 SQLite 数据库SQLite 结构化数据存储替代传统数据库存储字段留言编号、留言人姓名、留言内容、创建时间二、准备 GitHub 仓库本教程使用 GitHub 保存代码并让 Cloudflare 自动部署。需要创建两个仓库my-worker保存 Workers 后端代码my-pages保存 Pages 前端代码进入 https://github.com/new 两个仓库可以设置为 Public也可以设置为 Private。三、创建D1数据库1、创建数据库进入**【cloudflare主页】——【存储与数据库】——【D1 SQLite数据库】——【创建数据库】**创建后记录你的Database name和Database UUID2、创建数据表进入 D1 数据库的控制台或 SQL 编辑器执行CREATETABLEmessages(idINTEGERPRIMARYKEYAUTOINCREMENT,nameTEXTNOTNULL,messageTEXTNOTNULL,created_atTEXTNOTNULLDEFAULTCURRENT_TIMESTAMP);创建索引CREATEINDEXidx_messages_created_atONmessages(created_at);插入测试数据INSERTINTOmessages(name,message)VALUES(测试用户,这是第一条留言);查询测试SELECT*FROMmessagesORDERBYidDESC;如果可以查询到数据说明表创建成功。四、创建Worker项目进入 Cloudflare 控制台【计算】——【Workers 和 Pages】——【创建应用程序】——【Continue with GitHub】授权 GitHub 后选择【my-worker】仓库如果仓库为空先在 GitHub 中添加以下文件。my-worker/ ├── src/ │ └── index.js ├── wrangler.jsonc └── package.json代码示例wrangler.jsonc{name:my-worker,//Worker 名称main:src/index.js,//入口文件compatibility_date:2026-08-26,d1_databases:[{binding:DB,database_name:my-database,//填写上面的D1数据库名称database_id:22d7ad3f-cb4e-4aea-b47f-ae3f30674a28//填写上面的D1数据库UUID}]}package.json{name:my-worker,private:true,version:1.0.0,devDependencies:{wrangler:^4.26.0}}index.jsconstallowedOrigins[https://app.xxxx.fun,//你的worker自定义域https://e5fa97a5.my-pages-d7q.pages.dev];functiongetCorsHeaders(request){constoriginrequest.headers.get(Origin);constheaders{Access-Control-Allow-Methods:GET, POST, OPTIONS,Access-Control-Allow-Headers:Content-Type,Vary:Origin};if(originallowedOrigins.includes(origin)){headers[Access-Control-Allow-Origin]origin;}returnheaders;}functionjsonResponse(request,data,status200){returnResponse.json(data,{status,headers:getCorsHeaders(request)});}exportdefault{asyncfetch(request,env){consturlnewURL(request.url);constoriginrequest.headers.get(Origin);// CORS 预检if(request.methodOPTIONS){if(origin!allowedOrigins.includes(origin)){returnnewResponse(CORS origin denied,{status:403});}returnnewResponse(null,{status:204,headers:getCorsHeaders(request)});}// 测试接口if(request.methodGETurl.pathname/api/hello){returnjsonResponse(request,{success:true,message:Hello from Cloudflare Workers,time:newDate().toISOString()});}// 查询留言if(request.methodGETurl.pathname/api/messages){try{constresultawaitenv.DB.prepare(SELECT id, name, message, created_at FROM messages ORDER BY id DESC).all();returnjsonResponse(request,{success:true,messages:result.results});}catch(error){returnjsonResponse(request,{success:false,message:查询数据库失败,error:error.message},500);}}// 新增留言if(request.methodPOSTurl.pathname/api/messages){try{constdataawaitrequest.json();constnameString(data.name||).trim();constmessageString(data.message||).trim();if(!name||!message){returnjsonResponse(request,{success:false,message:name 和 message 不能为空},400);}if(name.length50||message.length1000){returnjsonResponse(request,{success:false,message:内容长度超出限制},400);}constresultawaitenv.DB.prepare(INSERT INTO messages (name, message) VALUES (?, ?)).bind(name,message).run();returnjsonResponse(request,{success:true,id:result.meta.last_row_id},201);}catch(error){returnjsonResponse(request,{success:false,message:写入数据库失败,error:error.message},500);}}// 原来的 echo 接口if(request.methodPOSTurl.pathname/api/echo){try{constdataawaitrequest.json();returnjsonResponse(request,{success:true,received:data});}catch{returnjsonResponse(request,{success:false,message:请求体必须是合法 JSON},400);}}returnjsonResponse(request,{success:false,message:Not Found},404);}};在 Cloudflare 部署设置中填写配置项内容生产分支main根目录/构建命令留空部署命令npx wrangler deploy五、部署并测试 Worker部署成功后Cloudflare 会提供类似地址https://my-worker.你的账号.workers.dev后续也可以绑定自定义域名【计算】——【Workers 和 Pages】——【my-worker】——【域】这里我们添加了一个自定义域名1、测试GET接口curl-ihttps://api.xxxx.fun/api/hello2、测试POST接口curl-i-XPOST https://api.xxxx.fun/api/echo\-HContent-Type: application/json\-d{name:张三,message:你好}六、绑定D1数据库到Worker进入【Workers 和 Pages】——【my-worker】——【绑定】——【添加绑定】——选择【D1 database】配置项内容变量名称DB和wrangler.jsonc 中的bindingDB一致D1 数据库选择my-database七、测试D1 API#测试查询接口curl-ihttps://api.xxxx.fun/api/messages#测试写入接口curl-i-XPOST https://api.xxxx.fun/api/messages\-HContent-Type: application/json\-d{name:张三,message:这条数据保存到D1了}正常返回200成功查询和写入八、创建 Pages 前端在 GitHub 的my-pages仓库中创建index.htmlh2留言板/h2inputidnameplaceholder你的名字brbrtextareaidmessageplaceholder留言内容/textareabrbrbuttononclicksubmitMessage()提交留言/buttonbuttononclickloadMessages()加载留言/buttonpreidresult等待操作……/prescriptconstAPI_BASEhttps://api.xxxx.fun;//你的pages自定义域asyncfunctionsubmitMessage(){constnamedocument.getElementById(name).value.trim();constmessagedocument.getElementById(message).value.trim();if(!name||!message){alert(请填写姓名和留言);return;}constresponseawaitfetch(${API_BASE}/api/messages,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({name,message})});constdataawaitresponse.json();document.getElementById(result).textContentJSON.stringify(data,null,2);if(response.ok){document.getElementById(name).value;document.getElementById(message).value;awaitloadMessages();}}asyncfunctionloadMessages(){constresponseawaitfetch(${API_BASE}/api/messages);constdataawaitresponse.json();document.getElementById(result).textContentJSON.stringify(data,null,2);}loadMessages();/script九、部署Pages进入 Cloudflare【Workers 和 Pages】——【创建应用程序】——【Pages】——【连接 Github】——【选择my-pages】配置填写配置项内容生产分支main构建命令留空输出目录/根目录/部署成功后也同样绑定一个自定义域名app.xxxx.fun。绑定后前端地址为https://app.xxxx.fun十、最终测试打开前端页面https://app.xxxx.fun测试填写姓名填写留言点击“提交留言”页面请求 WorkersWorkers 写入 D1页面重新查询并显示留言。功能均正常总结本项目实现了从 GitHub 自动部署到 Pages 前端、Workers API、D1 数据库存储的完整闭环完成了一个可实际使用的 Cloudflare Serverless 留言板。