在实际项目开发和部署过程中域名注册、解析、SSL证书申请以及应用托管是每个开发者都必须面对的基础设施问题。传统流程往往涉及多个服务商步骤繁琐且成本不低。如果你正在寻找一种能够简化流程、降低门槛甚至提供免费资源的解决方案那么将目光投向 Cloudflare 这样的平台会是一个明智的选择。它不仅仅是一个 CDN 和 DNS 服务商更是一个集成了域名注册、容器化应用托管、安全防护等功能的开发者平台。本文旨在为开发者提供一个基于 Cloudflare 平台从获取域名到部署容器化应用的全流程实战指南。我们将重点解析如何利用 Cloudflare 的特定服务如 Cloudflare Pages、Workers、R2 等构建一个低成本甚至免费的个人项目或小型应用。文章适合有一定 Web 开发基础希望了解现代云原生部署流程并寻求高效、经济解决方案的开发者。通过本文你将掌握如何一站式完成域名管理、前端部署、后端 API 托管以及静态资源存储。1. 理解 Cloudflare 的开发者生态系统不仅仅是 CDN在深入实操之前必须先厘清 Cloudflare 能为开发者提供什么。很多人对 Cloudflare 的认知停留在“免费的 CDN 和 DNS 解析服务”但这只是其庞大生态的冰山一角。对于开发者而言它是一个功能强大的 PaaS平台即服务和 FaaS函数即服务提供商。1.1 核心组件与服务Cloudflare 的开发者服务主要围绕以下几个核心组件它们共同构成了一个完整的应用托管栈Cloudflare DNS: 免费的权威 DNS 解析服务提供快速的全球解析能力。这是所有服务的基础。Cloudflare Registrar: 域名注册服务。其特点是提供“成本价”域名注册不额外加价并且免费提供 WHOIS 隐私保护。这是实现“低成本域名”的关键。Cloudflare Pages: 针对 Jamstack 架构的静态网站和前端应用托管平台。支持与 Git 仓库GitHub, GitLab自动集成实现持续部署。提供自定义域名、自动 HTTPS、预览部署等功能。Cloudflare Workers: 一个在全球边缘网络运行的 Serverless 函数计算平台。允许你在离用户最近的数据中心执行 JavaScript、Rust、C 或 Python 代码。常用于构建 API、处理请求、实现 AB 测试、边缘逻辑等。Cloudflare Workers KV: 一个低延迟、全球分布的键值存储数据库专为与 Workers 配合使用而设计用于存储配置、用户数据等。Cloudflare R2: 兼容 S3 API 的对象存储服务其最大特点是提供免费的流出流量无出口带宽费用这对于存储和分发图片、视频等静态资源极具成本优势。Cloudflare Tunnels: 一种无需在防火墙开放端口即可将本地服务安全暴露到公网的工具。对于内网穿透和本地开发调试非常有用。1.2 “容器托管”的准确含义在 Cloudflare 的语境下“容器托管”并非指直接运行 Docker 容器。传统的容器托管平台如 AWS ECS, Google Cloud Run管理的是完整的操作系统容器。而 Cloudflare 的“托管”更侧重于无服务器函数Workers和静态站点Pages的托管。Workers 可以视为一种极轻量级的“容器”它运行的是隔离的 V8 引擎实例。虽然不能运行任意二进制文件但对于基于 JavaScript/WebAssembly 的现代 Web 应用、API 服务来说它提供了极致的弹性、全球低延迟和按需付费的模型。因此当我们讨论在 Cloudflare 上“托管应用”时通常是指将应用拆分为前端托管在Cloudflare Pages静态资源或Workers Sites动态渲染。后端 API/业务逻辑托管在Cloudflare Workers。数据库/状态使用Workers KV、D1SQLite或第三方数据库。文件存储使用Cloudflare R2。这种架构正是现代 Jamstack 和无服务器架构的典型实践。2. 环境准备与账号配置开始之前你需要准备好以下环境并完成 Cloudflare 账号的初步配置。2.1 基础环境要求一个 Cloudflare 账号访问 cloudflare.com 注册。一个 GitHub 或 GitLab 账号用于代码仓库和与 Cloudflare Pages 的持续集成。本地开发环境Node.js (推荐 LTS 版本如 18.x, 20.x)用于运行前端构建工具和 Workers 本地开发。npm 或 yarn 或 pnpm包管理器。代码编辑器如 VS Code。一个可用于转移或注册的域名可选但推荐你可以将已有域名转移到 Cloudflare Registrar或在 Cloudflare 直接注册新域名。2.2 配置 Cloudflare 账号与初始设置登录并添加站点登录 Cloudflare 仪表板点击“添加站点”输入你已有的域名例如yourdomain.com。按照指引将其 DNS 记录从原注册商更改为 Cloudflare 提供的名称服务器。这个过程通常需要几分钟到几小时生效。探索开发者面板站点添加成功后点击顶部导航栏的“Workers Pages”进入开发者面板。这里是你管理 Workers、Pages、KV、R2 等服务的核心区域。验证邮箱与设置付款方式虽然很多服务有免费额度但为了使用某些高级功能或防止滥用Cloudflare 可能需要你验证邮箱并添加一个付款方式如信用卡。对于免费套餐通常不会产生费用但这是激活 Workers 等服务的必要步骤。3. 实战从零构建一个全栈应用并部署我们将通过一个简单的“待办事项Todo List”应用来演示全流程。该应用包含前端一个 React 静态页面。后端 API一个 Cloudflare Worker提供 RESTful API。数据存储使用 Workers KV 存储待办事项。部署前端部署到 Cloudflare Pages后端部署为 Worker。3.1 步骤一创建前端 React 应用并连接 Pages首先我们在本地创建前端项目。# 使用 create-react-app 快速创建项目 npx create-react-app cloudflare-todo-frontend cd cloudflare-todo-frontend编辑src/App.js创建一个简单的界面通过调用后端 Worker API 来获取和显示待办事项。这里只展示关键部分// src/App.js import React, { useState, useEffect } from react; import ./App.css; function App() { const [todos, setTodos] useState([]); const [newTodo, setNewTodo] useState(); // 后端 Worker 的地址部署后需要替换为你的 Worker 域名 const API_BASE https://todo-api.yourdomain.workers.dev; useEffect(() { fetchTodos(); }, []); const fetchTodos async () { const response await fetch(${API_BASE}/todos); const data await response.json(); setTodos(data); }; const addTodo async () { if (!newTodo.trim()) return; await fetch(${API_BASE}/todos, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ text: newTodo }) }); setNewTodo(); fetchTodos(); // 重新获取列表 }; return ( div classNameApp h1Cloudflare Todo List/h1 div input typetext value{newTodo} onChange{(e) setNewTodo(e.target.value)} placeholder输入新待办事项 / button onClick{addTodo}添加/button /div ul {todos.map(todo ( li key{todo.id}{todo.text}/li ))} /ul /div ); } export default App;接下来将项目推送到你的 GitHub 仓库。现在将其部署到 Cloudflare Pages在 Cloudflare 仪表板进入 “Workers Pages” - “Pages” - “创建应用程序”。选择“连接到 Git”授权并选择你刚创建的前端仓库。在配置构建设置页面项目名称todo-frontend会自动生成一个*.pages.dev的域名。生产分支main。构建设置框架预设Create React AppCloudflare Pages 会自动识别并填充。构建命令npm run build。构建输出目录build。点击“保存并部署”。Cloudflare Pages 会自动拉取代码、安装依赖、执行构建并将生成的静态文件部署到全球网络。部署完成后你会获得一个类似https://todo-frontend.pages.dev的临时地址。3.2 步骤二创建后端 Cloudflare Worker 与 KV 命名空间后端 Worker 将处理 API 请求。我们使用 Cloudflare 官方的命令行工具wrangler进行开发。# 全局安装 wrangler npm install -g wrangler # 登录 wrangler 到你的 Cloudflare 账号 wrangler login # 创建一个新的 Worker 项目 wrangler generate todo-api cd todo-api初始化项目后我们需要创建一个 KV 命名空间来存储数据。# 创建生产环境的 KV 命名空间 wrangler kv:namespace create TODO_KV # 命令会输出一个配置片段将其添加到 wrangler.toml 中编辑生成的wrangler.toml文件# wrangler.toml name todo-api compatibility_date 2024-03-20 # 添加上面命令输出的 KV 命名空间绑定配置 kv_namespaces [ { binding TODO_KV, id xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx } ]现在编写 Worker 的主要逻辑文件src/index.js// src/index.js export default { async fetch(request, env) { const url new URL(request.url); const path url.pathname; const method request.method; // 简单路由 if (path /todos method GET) { // 获取所有待办事项 const list await env.TODO_KV.list(); const todos []; for (const key of list.keys) { const value await env.TODO_KV.get(key.name); todos.push({ id: key.name, text: value }); } return new Response(JSON.stringify(todos), { headers: { Content-Type: application/json, Access-Control-Allow-Origin: * } }); } else if (path /todos method POST) { // 创建新的待办事项 const body await request.json(); const id Date.now().toString(); // 简单生成 ID await env.TODO_KV.put(id, body.text); return new Response(JSON.stringify({ id, text: body.text }), { headers: { Content-Type: application/json, Access-Control-Allow-Origin: * } }); } else { return new Response(Not Found, { status: 404 }); } }, };注意上述代码为了简洁没有进行错误处理、输入验证和复杂的 CORS 配置。生产环境需要完善这些部分。在本地测试 Workerwrangler dev访问http://localhost:8787/todos应该能看到空数组[]。使用curl或 Postman 测试 POST 请求。测试无误后发布到 Cloudflare 网络wrangler publish发布成功后你会获得一个 Worker 子域名例如https://todo-api.your-subdomain.workers.dev。记下这个地址。3.3 步骤三配置自定义域名与 DNS 解析现在我们有了前端 Pages (*.pages.dev) 和后端 Worker (*.workers.dev) 的临时地址。为了让应用拥有统一的专业域名我们需要配置自定义域名。前提你拥有一个域名例如yourdomain.com并且其 DNS 由 Cloudflare 管理即完成了 2.2 节的步骤。为 Pages 配置自定义域名进入 Pages 项目todo-frontend的设置 - “自定义域”。点击“设置自定义域”输入你想要的子域名例如todo.yourdomain.com。Cloudflare 会自动为你创建并配置一条CNAME记录指向 Pages 的部署。等待几分钟让 SSL 证书自动签发完成。为 Worker 配置自定义域名路由进入 Worker 项目todo-api的设置 - “触发器”。在“路由”部分点击“添加路由”。输入路由模式例如api.yourdomain.com/todos/*。这意味着所有发送到api.yourdomain.com/todos/及其子路径的请求都会被这个 Worker 处理。保存后Cloudflare 会自动配置 DNS 和 SSL。更新前端代码中的 API 地址回到前端项目将src/App.js中的API_BASE常量更新为你的自定义 Worker 域名。const API_BASE https://api.yourdomain.com;提交代码并推送到 GitHub。Cloudflare Pages 会自动触发新的构建和部署。至此你的全栈应用已经部署完毕并通过自定义域名提供服务前端访问https://todo.yourdomain.com后端 APIhttps://api.yourdomain.com/todos4. 关键配置、参数详解与生产环境考量4.1 Workers 的配置与限制wrangler.toml是 Worker 的核心配置文件以下是一些关键参数参数说明生产环境建议nameWorker 的名称也是子域名的一部分。使用有意义的名称如project-api。compatibility_date指定 Worker 运行时环境的兼容性日期。必须设置。随着时间更新以使用新的 API 和特性。kv_namespaces绑定 KV 命名空间。区分开发和生产环境命名空间避免数据污染。vars定义环境变量。将敏感信息如 API 密钥放在这里而不是代码中。limits设置 CPU 时间、内存等限制。监控 Worker 的用量根据需求调整。免费套餐限制每日请求数100,000 次。CPU 时间每请求最多 10 毫秒 CPU 时间在免费套餐下超过可能导致1101错误。脚本大小1 MB。KV 操作每日 100,000 次读取1,000 次写入/删除/列出。R2 存储10 GB 月存储量无出口流量费用。4.2 Pages 的构建优化与环境变量在 Pages 项目的设置中“构建和部署”部分可以优化环境变量可以设置构建时和运行时环境变量。例如将后端 API 的基地址设置为环境变量避免硬编码。构建缓存对于 Node.js 项目可以配置node_modules缓存以加速构建。分支预览每个 Git 分支的合并请求都会生成一个唯一的预览 URL非常适合代码审查和测试。4.3 域名管理与 SSL/TLSCloudflare 的一个巨大优势是 SSL/TLS 证书的自动化管理。通用 SSL为所有通过 Cloudflare 代理的域名提供免费的、自动续签的 SSL 证书。证书由 Cloudflare 签发浏览器和源站之间的连接可以是灵活Flexible、完全Full或完全严格Full (strict)模式。自定义主机名 SSL如果你使用 SaaS 或自定义源站可以使用此功能。始终使用 HTTPS在 Cloudflare 的 SSL/TLS 设置中开启将所有 HTTP 请求重定向到 HTTPS。5. 常见问题排查与解决方案在开发和部署过程中你可能会遇到以下典型问题。5.1 部署与运行问题问题现象可能原因检查与解决步骤Pages 构建失败1. 依赖安装失败网络问题。2. 构建命令错误。3. Node.js 版本不兼容。1. 查看 Pages 部署日志定位错误阶段。2. 检查package.json中的engines字段确保 Node 版本兼容。3. 尝试在本地运行npm run build复现问题。Worker 返回1101错误1. Worker 脚本执行超时CPU 时间超限。2. 脚本运行时错误如未捕获的异常。1. 优化 Worker 代码逻辑减少计算量。2. 使用try...catch包裹可能出错的代码。3. 检查wrangler dev本地运行是否有错误。自定义域名访问显示“重定向过多”Cloudflare 的“始终使用 HTTPS”与源服务器如 Nginx的 HTTPS 重定向形成循环。1. 在 Cloudflare 的 SSL/TLS 设置中将加密模式从“灵活”改为“完全”或“完全严格”。2. 确保你的源服务器如果存在没有强制 HTTPS 重定向。API 请求跨域CORS错误前端页面域名与后端 API 域名不同浏览器因同源策略阻止请求。在 Worker 的响应头中正确设置Access-Control-Allow-Origin。生产环境应指定具体的前端域名而不是*。KV 数据读写失败1. KV 命名空间未正确绑定。2. Worker 没有对应命名空间的读写权限。1. 检查wrangler.toml中的kv_namespaces配置确保id正确。2. 使用wrangler kv:key list --bindingTODO_KV测试 KV 连接。5.2 域名与 DNS 问题问题现象可能原因检查与解决步骤域名解析不生效1. DNS 记录未正确配置或未保存。2. 本地 DNS 缓存。3. 域名未完全转移到 Cloudflare。1. 在 Cloudflare 仪表板检查 DNS 记录状态是否为“已代理”。2. 使用dig或nslookup命令查询全球 DNS 解析情况。3. 等待 TTL 时间过期或刷新本地 DNS 缓存。SSL 证书未签发或显示不安全1. 域名未正确代理灰色云朵。2. 证书签发需要时间最长24小时。3. 源服务器有无效的 SSL 证书。1. 确保 Cloudflare 代理已开启橙色云朵。2. 在 SSL/TLS 设置中查看证书状态。3. 如果使用“完全”模式确保源服务器有有效证书。6. 最佳实践与扩展方向6.1 开发与部署最佳实践环境分离为开发、预览、生产环境配置不同的 KV 命名空间、R2 桶和 Worker 路由。可以使用wrangler.toml的环境配置功能。秘密管理切勿将 API 密钥、数据库密码等硬编码在代码或仓库中。使用 Workers 的环境变量、秘密功能或第三方秘密管理服务。本地优先开发充分利用wrangler dev进行本地开发和调试它支持热重载和本地 KV 模拟。监控与日志免费套餐包含基本的 Workers 请求日志。对于生产应用考虑集成更详细的日志服务如 Sentry, Logtail并将日志发送到 R2 或外部服务进行分析。错误处理与重试在 Worker 中实现健壮的错误处理。对于可能失败的外部 API 调用考虑加入指数退避重试机制。6.2 架构扩展方向当你的应用增长时可以考虑以下扩展使用 D1 数据库对于关系型数据需求可以使用 Cloudflare D1基于 SQLite 的分布式数据库它比 KV 更适合复杂的查询。使用 R2 存储用户文件将用户上传的图片、文档等存储到 R2利用其免费流出流量的优势。实现身份认证使用 Cloudflare Access 或第三方 Auth0 等服务为你的 Worker API 和 Pages 应用添加登录保护。构建更复杂的边缘逻辑利用 Workers 的地理位置信息 (request.cf.country)、设备类型等实现个性化的边缘 A/B 测试、路由或缓存策略。集成第三方服务Workers 可以轻松调用外部 REST API你可以将邮件发送、支付、AI 模型推理等能力通过无服务器函数集成进来。Cloudflare 的开发者平台提供了一套高度集成且对开发者友好的工具链将域名、托管、存储、计算和安全能力打包在一起。通过将应用架构设计为基于 Pages、Workers、KV 和 R2 的无服务器模式你可以极大地降低运维复杂性和成本同时获得全球分布的优异性能。对于个人项目、初创公司或任何希望快速验证想法的团队这是一个极具吸引力的起点。开始实践时建议从一个像本文示例一样的小项目入手逐步熟悉各个服务的特性和限制再将其应用到更复杂的场景中。