前言：当穷逼遇上Cloudflare
"为什么选择Cloudflare？"
因为它就像程序员的乐高积木——免费、模块化，而且拼错了还能重来！
第一章：Cloudflare全家桶点菜指南
1.1 食材准备（注册与安装）
第一步：注册Cloudflare账号
- 访问Cloudflare官网（别担心，不会要你卖肾）
- 虽然大部分服务免费，但R2需要信用卡验证（就像超市试吃要先出示会员卡）
第二步：安装Wrangler CLI工具
npm install -g wrangler
wrangler login
温馨提示：如果安装失败，请先检查自己是不是把npm拼成了nmp——这是程序员的第一道智商测试题
1.2 核心组件功能对比
| 服务名称 | 免费额度 | 相当于餐厅里的 | 使用场景 |
|---|---|---|---|
| D1数据库 | 500万行/天读取 | 无限续杯的汤 | 用户数据存储 |
| R2存储 | 10GB空间 | 自助沙拉吧 | 图片/文件存储 |
| Workers | 10万请求/天 | 自动炒菜机 | 后端API服务 |
| Pages | 500次构建/月 | 外卖打包台 | 前端部署 |
第二章：厨房实操（配置详解）
2.1 D1数据库：你的SQL玩具箱
创建数据库（就像在宜家组装家具）
wrangler d1 create my-database
初始化表结构（schema.sql）
CREATE TABLE "User" (
"id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
"email" TEXT NOT NULL,
"name" TEXT,
"password_hash" TEXT NOT NULL
);
执行迁移（让数据找到自己的家）
wrangler d1 execute my-database --local --file=./schema.sql
踩坑预警：如果报错"table already exists"，说明你和我一样手快点了两次——数据库界的"薛定谔的猫"现象
2.2 R2存储：云端的储物间
创建存储桶步骤：
- 在Cloudflare控制台进入R2
- 创建存储桶（名称如
my-media-bucket） - 启用公共访问URL（不然你的图片会比国家机密还难访问）
配置示例（wrangler.toml）：
[[r2_buckets]]
binding = "MY_BUCKET" # 前端调用的变量名
bucket_name = "my-media-bucket" # 你的储物间编号
第三章：魔法烹饪（代码实战）
3.1 Workers后端示例
export default {
async fetch(request, env) {
// 当用户访问/api/panic时...
if (new URL(request.url).pathname === "/api/panic") {
return new Response("Don't panic! Here's your towel.", {
headers: { "content-type": "text/plain" }
});
}
// 默认返回404，因为程序员最熟悉这个状态码
return new Response("404 - 页面不存在，就像你的人生目标", { status: 404 });
}
};
3.2 前端调用Worker
// 获取恐慌安慰语
async function getPanicAdvice() {
const response = await fetch('/api/panic');
const advice = await response.text();
console.log(advice); // 输出："Don't panic! Here's your towel."
return advice;
}
// 上传文件到R2（比如你的辞职信）
async function uploadResignationLetter(file) {
const formData = new FormData();
formData.append('resignation', file);
await fetch('/api/upload', {
method: 'POST',
body: formData
});
}
第四章：自动化流水线（GitHub Actions）
4.1 创建部署工作流（.github/workflows/deploy.yml）
name: Deploy to Cloudflare
on:
push:
branches: [ main ] # 只在主分支推送时触发
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3 # 第一步：把代码从GitHub仓库拿出来
- name: Install dependencies
run: npm install # 第二步：安装依赖（就像做饭前要买菜）
- name: Build project
run: npm run build # 第三步：构建项目（把食材做成菜）
- name: Publish to Cloudflare
uses: cloudflare/wrangler-action@2.0.0
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} # 厨房门禁卡
command: publish # 大喊一声："上菜！"
如果部署失败，GitHub会给你发邮件，就像你妈催你结婚一样频繁
第五章：前后端分离架构
graph TD
A[用户浏览器] -->|请求| B(Cloudflare Pages)
B -->|静态文件| A
A -->|API调用| C[Cloudflare Workers]
C -->|查询| D[D1数据库]
C -->|文件操作| E[R2存储]
架构解析：
前端（Pages）就像餐厅的门面
Workers是厨师兼服务员
D1是冰箱，R2是储物柜
用户就是那个永远不满意菜品的食客
第六章：那些年我们踩过的坑
-
坑一：D1查询超时
症状：你的API比树懒还慢
解药：给查询加索引，就像给老爷爷配拐杖 -
坑二：R2文件权限问题
症状：你的图片比FBI档案还难访问
解药：检查桶的公共访问设置，就像检查你家大门锁没锁 -
坑三：Worker冷启动延迟
症状：第一次请求比Windows开机还慢
解药：设置定期ping保持活跃，就像不让服务器睡懒觉
结语：白嫖者的自我修养
通过这套方案，我的个人网站每月节省了约$50的服务器费用——足够我买两杯奶茶了！虽然免费套餐有限制，但对于个人项目完全够用。记住：
"真正的程序员不是不花钱，而是能把别人的基础设施当成自己的用"
