AI 摘要
AI
正在生成摘要...

很多开发者其实并不缺“写点东西出来”的能力。

真正容易把人卡住的,往往是代码之外的那一圈东西。项目在本地跑通了,还得操心怎么部署、怎么配域名、数据库放哪。这些事很难绕过去,哪怕只是个小 Demo,只要想发出去,就迟早要处理。很多项目最后停住,不是因为想法不行,而是被“本地能跑”到“真正上线”之间的一堆零碎事磨掉了耐心。

本系列要介绍的“赛博大善人”,就是在这个阶段能拉你一把的平台。我会整理那些真正好用的免费资源,让你不用一上来就掏钱,也能先把项目发出去,把精力留在写代码和验证想法上。

1 前言

提到赛博大善人,首先让人想到的就是 Cloudflare,它对功能一站式的集成,让开发者在验证想法、搭建原型乃至运营早期产品的过程中,避免在不同平台间反复横跳,将精力最大限度地聚焦于构建产品本身。

在本篇正式开始前,你需要知情以下内容:

  1. Cloudflare 像 R2、Tunnel 等服务,首次使用需要添加支付信息,需要一张外币卡或者 PayPal
  2. Cloudflare 平台近期正在进行 UI 和路由的重新设计,一些功能入口可能有多个,甚至页面结构也有所不同
  3. Cloudflare 提供的免费服务实在太多了,难以用一篇文章涵盖所有,所以仅介绍常用功能

2 Cloudflare

Cloudflare 是全球最大的边缘网络基础设施提供商之一,核心能力覆盖 DNS、CDN、HTTPS、网络安全、边缘计算、对象存储 等多个层级。它最难得的地方,不是某一个单点能力强到不可替代,而是它把很多原本分散的事情——域名解析、站点加速、证书接入、缓存策略、轻量后端、静态资源存储、基础防护——收拢到了同一个平台里。

它的免费套餐之所以会被很多开发者记住,也不只是因为“送了很多功能”,而是因为这些能力对个人项目、小团队项目和早期产品真的很够用。你不一定会一次把所有功能都接上,但很容易在项目发展的不同阶段,反复用到它。

2.1 用 Pages 部署静态网站

如果你的项目是个人主页、博客、文档站这类前端静态网站,代码又已经托管在 GitHub 上,只想尽快把它自动发布出去,同时拿到默认域名、全球分发和 HTTPS,那 Cloudflare Pages 会是一个很顺手的选择。

当然,Vercel、Netlify 等平台也都能完成这类工作,而且同样成熟;Cloudflare Pages 更突出的地方在于,它能和域名管理、Workers、R2 放在同一套体系里。如果你后面还想继续扩展,整体会更省事。

连接 GitHub 实现静态网站自动化构建部署

  1. 准备代码仓库

先把项目推送到 GitHub 或 GitLab,并确认它在本地能够正常构建。你最好提前明确项目的构建命令,比如 npm run build

  1. 创建 Cloudflare Pages 项目

进入 Cloudflare 控制台,在侧边栏 Compute 找到 Workers & Pages,点击 创建应用程序,页面下方小字找到部署 Pages 并点击 开始使用,选择 导入现有 Git 存储库,然后连接你的 GitHub 账户并选择要部署的仓库

图片

  1. 配置构建参数

重点填写构建设置里的构建命令(如 npm run build)和构建输出目录(如 distpublic),若项目使用的框架在预设里,一般会自动选择并填充,其他配置项按需修改

需要注意的是,项目若修改过构建命令和输出目录,这里需要手动调整

图片

  1. 部署并验证可访问性

提交配置后,Cloudflare 会自动拉取代码并完成构建,同时为项目分配一个默认的 Pages 域名。部署完成后,打开该域名,确认页面、静态资源、样式和路由都能正常工作。

  1. 后续更新

以后只要继续向仓库 push 新代码,Pages 就会自动重新构建并发布。

2.2 自定义域名 + HTTPS + CDN

如果你已经通过 Pages,或者 Vercel、Netlify 等平台把网站部署上线,平台分配的默认域名虽然能用,但在国内的访问体验可能并不稳定,甚至有时无法直接访问。这个时候,自定义域名基本就是下一步的标准动作。

Cloudflare 就可以托管域名,并且最大的优势在于其提供完全免费的企业级 DNS 解析服务,同时集成了全球 CDN 加速、强大的安全防护功能,以及完全免费的 SSL 证书服务。

托管自定义域名并添加解析

  1. 购买域名

如果还没有域名,可以在任意注册商购买,比如 Spaceship、腾讯云等;如果已经有域名,则跳过此步

  1. 把域名接入 Cloudflare

进入 Cloudflare 控制台,在侧边栏 域注册 找到 管理域,点击 加入域,输入现有域,选择 Free 计划,等待自动扫描并导入当前 DNS 记录

图片

  1. 修改名称服务器

按 Cloudflare 提供的两条名称服务器,在域名注册商后台完成替换,等待解析权切换生效后,域名就会正式由 Cloudflare 托管

图片

  1. 配置 DNS 记录

根据网站实际托管位置,添加对应的 CNAME、A 或其他记录。如果希望由 Cloudflare 代理流量并启用 CDN 等能力,可以把记录右侧的小云朵切换成橙色。

图片

  1. 检查 HTTPS 与 SSL/TLS 模式

进入 SSL/TLS 页面,根据源站证书情况选择合适模式。大多数情况下,推荐使用 完全完全(严格),如果不知道如何选择,那就保持 自动 SSL/TLS(默认)

  1. 检查访问效果

打开自定义域名,或使用测速网站,确认网站能够正常访问,并检查访问速度是否符合预期。

2.3 用 Workers 写轻量 API

除了做 CDN、DNS 和托管静态站点,Cloudflare 还有一个很实用的能力,用 Workers 写一些轻量的服务端逻辑,它很适合补上纯前端项目里缺失的那一点“后端能力”。

常见用途包括:写一个简单 API、做 URL 重定向、处理表单提交、加一层鉴权判断、包装第三方接口,或者在请求和响应之间做一些中间处理。相比单独上服务器,这种方式更轻,也更适合这类小而明确的需求。

实现返回访问者的 IP 和国家/地区信息功能

  1. 创建 Worker

进入 Cloudflare 控制台,在侧边栏 Compute 找到 Workers & Pages,点击 创建应用程序,选择从 Hello World! 开始并进行部署

尝试功能、测试简单接口,通常使用在线编辑器就足够了,如果计划长期维护,可以选择 wrangler 本地开发或连接 Git 构建完整开发流程

  1. 写一个最简单的接口

部署完成后在页面右上角点击 编辑代码 进入在线编辑器,修改 worker.js 文件内容为以下代码

JS
export default {
  async fetch(request) {
    return Response.json({
      ip: request.headers.get("CF-Connecting-IP"),
      country: request.cf?.country
    })
  }
}
  1. 部署并测试访问地址

写好之后直接部署,Cloudflare 会为这个 Worker 生成一个默认访问地址,你可以在右侧预览,也可以直接访问默认地址

图片

  1. 将 Worker 接入真实环境

之后可以把 Worker 绑定到自己的域名或路由上,在设置页面也可以配置变量、连接 Git 仓库等操作

2.4 用 R2 存静态资源

当搭建的博客、图床、应用下载站等需要承载较多图片、视频、文档或其他大文件时,用服务器硬盘既占空间又费流量,通常会选择对象存储服务来解决这个问题。

Cloudflare 的 R2 对象存储服务,免费版拥有10GB/月免费存储空间,并且不收取外网流出流量费,这对于需要全球分发、流量不可预测的公开资源来说,是极大的成本优势,并且 R2 完全兼容 AWS S3 的 API,许多现有的工具、SDK 和最佳实践都可以直接迁移使用。

搭建零成本图床并获取兼容 S3 密钥

  1. 创建存储桶

进入 Cloudflare 控制台,侧边栏找到 存储和数据库 下的 R2,点击 创建存储桶,输入存储桶名称并选择区域,存储类选择标准

图片

  1. 自定义域名

若不自定义域名,将无法实现外部访问(可以用 r2.dev 但不推荐),需要注意的是,R2 仅支持自定义托管在 Cloudflare 的域名

  1. 上传并管理文件

在存储桶内,可以直接上传文件或创建文件夹,也可以通过兼容 S3 的工具进行管理,常见如 PicGo、OpenList等

  1. S3 连接

S3 API 调用操作需要先创建令牌,在存储桶列表页右下角看到 Account Details 点击 Manage,选择创建 User API 令牌,权限选择对象读和写,其他按需修改,最后获得访问密钥 ID 和机密访问密钥

图片

2.5 用 D1 存储结构化数据

当你的项目不再只是静态展示,而是需要存储用户资料、文章评论或任何有逻辑关联的数据时,就需要数据库。买云数据库贵且配置繁琐,D1 就是为了解决这个“数据库焦虑”而生的。

它是基于 SQLite 的无服务器数据库,优势在于与 Workers 无缝集成,无需配置连接字符串或处理驱动。它在边缘侧运行,查询延迟极低,且免费额度足以支撑绝大多数个人小项目的早期运行。

搭建一个简易 Todo 应用 API

  1. 创建数据库

进入 Cloudflare 控制台,侧边栏找到 存储和数据库 下的 D1,点击 创建数据库,输入名称并选择区域

图片

  1. 初始化表结构

在 D1 详情页点击 控制台,输入下方 SQL 语句来创建表

SQL
CREATE TABLE IF NOT EXISTS todos (id INTEGER PRIMARY KEY AUTOINCREMENT, task TEXT NOT NULL, done BOOLEAN DEFAULT 0);
  1. 绑定到 Workers

在 Workers 项目详情的 绑定 处,添加 D1 绑定,并起一个变量名(如 DB),然后选择刚才创建的 D1 数据库

图片

  1. 编写 API 代码

进入在线编辑器,修改 worker.js 文件内容为以下代码

JAVASCRIPT
export default {
  async fetch(request, env) {
    const db = env.DB;
    const url = new URL(request.url);

    // GET /api/todos - 获取所有待办
    if (url.pathname === '/api/todos' && request.method === 'GET') {
      const todos = await db.prepare('SELECT * FROM todos').all();
      return Response.json(todos.results);
    }

    // POST /api/todos - 新建待办
    if (url.pathname === '/api/todos' && request.method === 'POST') {
      const { task } = await request.json();
      await db.prepare('INSERT INTO todos (task) VALUES (?)').bind(task).run();
      return new Response('Added', { status: 201 });
    }

    // DELETE /api/todos/:id - 删除待办
    if (url.pathname.startsWith('/api/todos/') && request.method === 'DELETE') {
      const id = url.pathname.split('/').pop();
      await db.prepare('DELETE FROM todos WHERE id = ?').bind(id).run();
      return new Response('Deleted');
    }

    return new Response('Not Found', { status: 404 });
  }
};
  1. 测试 API

部署后使用 curl 或 Postman 测试,也可以使用在线编辑器里的 HTTP 标签页内提供的工具快速测试

BASH
# 创建待办
curl -X POST https://your-worker.workers.dev/api/todos \
  -H "Content-Type: application/json" \
  -d '{"task":"Learn Cloudflare D1"}'

# 获取所有待办
curl https://your-worker.workers.dev/api/todos

# 删除待办 (替换 :id 为实际ID)
curl -X DELETE https://your-worker.workers.dev/api/todos/1

图片

2.6 用 KV 存储配置与缓存

有些数据不需要 SQL 关联,只需要“根据名字找内容”,比如短链接映射、用户 Session 或配置开关,需要快速读写、但数据量小、结构简单的场景。

KV 能将一个键和对应的值持久化存储在 Cloudflare 的全球网络上。对这个值的读写操作都极快(毫秒级),并且能承受高并发访问。最关键的是,即使你的服务重启或重新部署,这个值也不会丢失,就像一个永久的记事本。

创建一个独立的人次计数器

  1. 创建命名空间

进入 Cloudflare 控制台,侧边栏找到 存储和数据库 下的 KV,点击 创建实例,输入命名空间名称

图片

  1. 绑定到 Workers

在 Workers 项目详情的 绑定 处,添加 KV 绑定,并起一个变量名(如 KV),然后选择刚才创建的 KV 命名空间

图片

  1. 编写核心代码

进入在线编辑器,修改 worker.js 文件内容为以下代码

JAVASCRIPT
export default {
  async fetch(request, env) {
    const counter = env.VISITOR_COUNTER;

    // 从 KV 读取当前数字
    let count = await counter.get("total");
    if (count === null) count = "0";

    // 将字符串转为数字,然后 +1
    let newCount = parseInt(count) + 1;

    // 将新数字存回 KV
    await counter.put("total", newCount.toString());

    // 返回纯文本的计数结果
    return new Response(`总人次: ${newCount}`);
  }
};
  1. 测试 API

保存部署后,在浏览器访问 Worker 地址,每次刷新数字都会增加 1,这个数字被永久记录在 KV 中

图片

2.7 用 Tunnel 映射本地服务

如果你在家里 NAS 或本地电脑跑了服务(比如个人网盘、开发回调),但没有公网 IP,也不想折腾内网穿透软件,Tunnel 就是最优雅的方案。

它不需要你开启任何路由器端口。通过在本地运行一个轻量客户端,主动建立加密隧道连接 CF。你的本地服务瞬间就能拥有带 HTTPS 的域名,安全性极高且完全免费。

将本地开发的网站临时发布到公网

  1. 创建隧道

进入 Cloudflare 控制台,侧边栏找到 联网 下的 Tunnels,点击 创建隧道,输入隧道名称

  1. 安装客户端

选择你的操作系统和架构,根据页面指示,下载应用程序并执行安装命令,在连接状态就可以看到隧道连接成功

图片

  1. 启动本地服务

打开本地项目目录,将项目跑起来,比如执行 npm run dev 运行在 3000 端口,并确保本地 http://localhost:3000 可访问,比如我使用 VS Code 的 Live Server 插件,将单页 HTML 运行在了 5500

  1. 添加路由

在隧道概况里点击 添加路由,选择 已发布的应用程序,选择你托管在 Cloudflare 的域名,自定义填写子域、路径,最后根据你本地运行端口填写服务 URL

图片

  1. 验证访问

直接访问该域名,就能看到本地运行的服务,全程自带 SSL 加密

图片

  1. 删除隧道

如果隧道不再使用,本地执行 cloudflared service uninstall 断开连接,再删除隧道

2.8 免费的域名邮箱

作为开发者,你一定想要个 hi@yourdomain.com 这样专业的邮箱挂在主页上。专门买企业邮箱太贵,这个功能能把发往域名的邮件自动转寄到你的私人邮箱里。

它完全免费,且配置极其简单。只要域名在 CF 托管,点几下鼠标就能完成解析。对外展示专业形象,对内依然使用你熟悉的收件箱,省去了管理多个邮箱的麻烦。

  1. 配置邮件路由

进入 Cloudflare 控制台,侧边栏找到 Compute 下的 电子邮件服务,点击 域名接入,选择已经托管在 Cloudflare 的域名,将自动添加 DNS 记录

图片

  1. 捕获所有地址

点击你绑定的域名进入详情控制台,进入 Routing Rules,编辑 Catch All,添加邮件转发的目标邮箱地址

图片

  1. 了解更多

除了常规的将所有邮箱的邮件转发到私人邮箱外,你还可以自定义地址的转发目标,除了发送到私人邮箱,还可以发送到 Worker 构建工作流

另外还有电子邮件发送功能,只是现在还需要加入排队等待名额

3 写在最后

至此,我们已经梳理了 Cloudflare 免费套餐中,最能直接帮助个人开发者和小型项目“从零上线”的核心服务。从静态部署、动态 API、数据存储到内网穿透和域名邮箱,这套工具链已经能覆盖一个完整产品早期阶段的大部分基础设施需求。

当然,Cloudflare 的“慷慨”远不止于此。其免费套餐中还包含许多同样强大但本文未及详述的服务,例如:

  • 安全与性能:全球分布的 DDoS 防护、可自定义的 WAF(Web 应用防火墙)规则、速率限制以及详细的流量分析(Analytics)。
  • 媒体处理:Stream 服务支持视频转码与播放,Image Resizing 能实现实时图片优化。
  • 其他工具:等待室(Waiting Room)、规则引擎(Rules)、以及用于监控的 Cron Triggers 等。

它们共同构成了一个完整、可靠且对开发者极其友好的边缘开发生态。选择 Cloudflare,不仅是选择了一系列免费工具,更是选择了一种“集成化”的解决思路——让基础设施的复杂度尽可能后移,使你能够更专注地验证想法与构建产品。

评论