VOL. XIII · NO. 12 · Elixir · 01 JAN 1970

Cloudflare 速通 — 8 个 killer features

Elixir 编程 · 01 JAN 1970 · 11 min read · 1,985 words

· · ·

不是 CF 全家桶介绍，是对 agquant.com 真正有用的 8 个功能。

这课不讲”CDN 是什么”——你已经知道。讲的是 Cloudflare 表面下真正改变游戏规则的 8 个功能：

Cloudflare Tunnel — 0 公网 IP 暴露服务
Web Analytics — 免费、无 cookie、无须横幅的统计
Turnstile — 替代 reCAPTCHA 的智能 CAPTCHA
Workers + Durable Objects — 边缘”长连接” 状态机
Workers AI — 200+ 城市节点的 LLM 推理
R2 — S3 兼容、0 egress 流量费
Email Workers — 不需要 SES 也能发邮件
Image Resizing — on-the-fly 图片压缩 + WebP

**预计时间：**60 分钟。

视角

所有例子都假设你是 agquant.com/learning/ 站长，要把它从"普通静态站"升级成"高转化、高 SEO、有 AI 能力"的现代化站点。

一、Cloudflare Tunnel（你已经在用了）

Cloudflare Tunnel = 在你服务器上跑 cloudflared 守护进程，不需要公网 IP 就能把本地服务暴露到 agquant.com。

# 安装
brew install cloudflared  # macOS
# 或：curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64 -o /usr/local/bin/cloudflared

# 一次性：登录获取 cert
cloudflared tunnel login

# 创建 tunnel
cloudflared tunnel create learning-prod
# → 输出 UUID + credentials-file 路径

# 配 DNS：agquant.com → tunnel
cloudflared tunnel route dns learning-prod agquant.com

# 启动（指向本地 :8002）
cloudflared tunnel run learning-prod
# 或注册为系统服务
cloudflared service install
systemctl enable cloudflared
systemctl start cloudflared

3 个隐藏能力

0 公网 IP：VM 在 NAT 后面都行，cloudflared 出站连到 CF 边缘
0 TLS 配置：CF 自动签 + 自动续 TLS cert
0 防火墙：CF 边缘帮你抗 DDoS，VM 8002 端口只在 localhost 监听

详见 [extensions-serverless-architecture.md §3.2](../extensions-serverless-architecture/#32-cloudflare-tunnel-cloudflared)。

二、Web Analytics — 免费、无 cookie、零配置

CF Web Analytics = 跟你 GA4 一样统计 PV/UV/跳出率，但：

不写 cookie → 不需要 GDPR/CCPA cookie 横幅
不采样 → 100% 数据（GA4 默认采样到 60-70%）
无 JS 阻断 → 加载比 GA4 快 80%
完全免费（GA4 免费但要审广告标识）

接入方法（agquant.com）

CF Dashboard → Analytics → Web Analytics → Add a site
输入 agquant.com/learning/ → 拿到一段 HTML snippet：

<!-- 插入到所有页面 <head> 里 -->
<script defer src="https://static.cloudflareinsights.com/beacon.min.js"
        data-cf-beacon='{"token": "xxx-your-token-xxx"}'></script>

CF 自动从 nginx/access.log 推断指标，不需要 JS。即使 JS 失败也能统计（CF 边缘层就能数）。

适合谁

不想加 cookie 横幅的 EU 用户（GDPR）
对页面速度敏感（LCP / Core Web Vitals）
想看 100% 数据（不采样）
嫌 GA4 dashboard 太复杂

对比 GA4：

维度	CF Web Analytics	Google Analytics 4
价格	免费	免费（带广告）
Cookie	0	要 cookie 同意
采样	0%（全量）	默认 60-70%
JS 体积	~10 KB	~50 KB
GDPR 合规	✅（不写 cookie）	❌（需 consent）
数据延迟	实时（1 分钟）	24-48h

三、Turnstile — 替代 reCAPTCHA 的智能 CAPTCHA

reCAPTCHA v3 越来越难用（要 cookie、要同意、要挑战），CF Turnstile 是个干净的替代：

不写 cookie
无感挑战：95% 真实用户零点击通过
免费无限
CF 边缘机器学习判断”是不是机器人”

接入（agquant.com 表单示例）

<!-- 1. 前端：插入 CF Turnstile widget -->
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

<form action="/api/contact" method="POST">
  <input name="email" placeholder="your@email.com" required>
  <div class="cf-turnstile"
       data-sitekey="0x4AAAAAAA_你的_site_key"
       data-callback="onTurnstileSuccess"></div>
  <button type="submit">提交</button>
</form>

// 2. 后端验证（Elixir 示例）
defmodule Turnstile do
  def verify(token) do
    body = Jason.encode!(%{
      secret: System.fetch_env!("TURNSTILE_SECRET"),
      response: token
    })

    case HTTPoison.post("https://challenges.cloudflare.com/turnstile/v0/siteverify", body,
           [{"content-type", "application/json"}]) do
      {:ok, %{status: 200, body: resp}} ->
        %{"success" => success} = Jason.decode!(resp)
        success
      _ -> false
    end
  end
end

真实体验

CF 用 200+ 城市节点的 bot 数据库（Cloudflare 自己服务 20% 互联网），比 reCAPTCHA 准。我自己的小项目 spam 下降 90%。

四、Workers + Durable Objects — 边缘”长连接” 状态机

Cloudflare Workers = V8 isolate 跑 JS（不是 Node.js 容器），冷启动 5ms，0.5ms runtime。

但 Workers 是 stateless 的（每次请求新 isolate）。要 stateful？Durable Objects (DO) = 给你一个”保证单线程、单 VM、单进程”的状态对象。

杀手锏：DO 跟 BEAM 进程模型几乎 1:1

维度	Cloudflare Durable Object	Elixir GenServer
单线程	✅ 保证（一次只有一个请求）	✅
持久化	自动（SQLite-backed）	需要外部
位置	CF 边缘 200+ 节点	BEAM VM
冷启动	5ms	100ms+（首次）
创建数	无限制	百万级

实战：WebSocket chat 用 DO

// workers/chat-room.ts
export class ChatRoom {
  state: DurableObjectState;
  sessions: WebSocket[] = [];

  constructor(state: DurableObjectState) {
    this.state = state;
  }

  async fetch(request: Request) {
    if (request.headers.get("Upgrade") === "websocket") {
      const pair = new WebSocketPair();
      const [client, server] = [pair[0], pair[1]];
      this.sessions.push(server);
      server.accept();
      server.addEventListener("close", () => {
        this.sessions = this.sessions.filter(s => s !== server);
      });
      return new Response(null, { status: 101, webSocket: client });
    }
    return new Response("Use WebSocket");
  }

  async broadcast(message: string) {
    this.sessions.forEach(s => s.send(message));
  }
}

export default {
  async fetch(req: Request, env: Env) {
    const id = env.CHAT_ROOM.idFromName(new URL(req.url).pathname);
    const room = env.CHAT_ROOM.get(id);
    return room.fetch(req);
  }
};

一个 DO 就是一个”聊天室”，全球任何客户端连到同一 URL 都会到同一个 DO。State 持久化在 SQLite 里，VM 重启不丢。

五、Workers AI — 边缘 LLM 推理

Workers AI = 跑在 CF 边缘的 LLM，已经在 200+ 城市节点。支持开源模型：

模型	用途	价格
Llama 3.1 8B	通用对话	$0.30/1M tokens
Mistral 7B	代码/对话	$0.18/1M tokens
Whisper	语音转文字	$0.05/分钟
Stable Diffusion XL	图片生成	$0.07/张
BGE Embeddings	文本向量化	$0.02/1M tokens

// worker 调 Llama 3
export default {
  async fetch(req: Request, env: Env) {
    const { prompt } = await req.json();

    const response = await env.AI.run(
      "@cf/meta/llama-3.1-8b-instruct",
      {
        messages: [
          { role: "system", content: "你是金融问答助手" },
          { role: "user", content: prompt }
        ]
      }
    );

    return Response.json({ answer: response.response });
  }
};

跟 OpenAI API 的关键区别

不是 SaaS API，是 in-edge inference。请求在离用户最近的 CF 节点完成推理，latency 100-300ms（vs OpenAI 跨太平洋 1500ms+）。Llama 3.1 8B 推理约 200ms 出第一个 token。

六、R2 — S3 兼容、0 egress 流量费

R2 = 跟 AWS S3 API 完全兼容的对象存储，但 egress 流量费 = $0。

服务	存储	Egress 流量
AWS S3	$0.023/GB/月	$0.09/GB
GCP Cloud Storage	$0.020/GB/月	$0.12/GB
Vultr Object Storage	$0.020/GB/月	$0.01/GB
Cloudflare R2	$0.015/GB/月	$0

对 agquant.com 的意义：存课程视频、用户上传的 xlsx、PDF、播客——1TB 流量/月本来 $90 (S3) → R2 $0。

# 跟 S3 一样的 wrcli 工具
aws s3 --endpoint-url https://<accountid>.r2.cloudflarestorage.com \
  cp ./course-video.mp4 s3://agquant-courses/intro.mp4

# 公开访问
https://pub-xxx.r2.dev/agquant-courses/intro.mp4
# 或绑自定义域名：cdn.agquant.com/agquant-courses/intro.mp4

七、Email Workers — 0 成本发邮件

不用 SES / SendGrid / Mailgun 也能发邮件。CF 通过 MailChannels 合作提供免费邮件（CF Workers 中转）。

// workers/email.ts
export default {
  async email(message: ForwardableEmailMessage, env: Env) {
    const { to, from, raw } = message;

    // 1. 解析 MIME
    const parser = new MimeMessage(raw);

    // 2. 改写 From / Reply-To
    const newRaw = parser
      .setHeader("From", "no-reply@agquant.com")
      .setHeader("Reply-To", "support@agquant.com")
      .asRaw();

    // 3. 用 send_email binding 发出去
    await message.forward(newRaw);
  }
};

// routes:
//   email_route: "agquant.com/*"  →  worker@email.ts

Worker 配 send\_email binding → CF 帮你用 MailChannels 投递，不收钱，不暴露你的 IP。

限制

每分钟 100 封（够中小项目）
不能发到 Gmail/Yahoo 等大邮件商（会被 spam），只能 send-to / contact form
生产大量邮件还是用 SES / Resend

适合场景：注册确认、密码重置、评论通知——够用。

八、Image Resizing — on-the-fly 压缩 + WebP

agquant.com 有很多图（logo、课程封面、用户头像）— Image Resizing 让你用 URL 参数动态调整：

# 原图
https://cdn.agquant.com/courses/intro.jpg          # 200 KB, 1920x1080

# 客户端自动选合适尺寸
<img src="/cdn-cgi/image/fit=cover,width=800,height=450,quality=85,format=auto/cdn.agquant.com/courses/intro.jpg">
# → CF 自动返回 800x450 WebP，~30 KB

# 头像 50x50 圆角
<img src="/cdn-cgi/image/fit=cover,width=50,height=50,quality=90,roundcorners=10/cdn.agquant.com/avatars/user-123.jpg">

format=auto = CF 自动判断浏览器支持 WebP/AVIF 返回最优格式。LCP 提升 30-50%。

详见 [lesson 0009 SEO 速通 §三、性能优化](./0009-seo-essentials)。

九、其他 12 个常用但不那么”killer”的功能

这 8 个是真·花活。还有 12 个日常用：

功能	用途	价格
Pages	静态站托管（Git 集成）	免费
KV	低延迟 key-value（最终一致）	$0.50/GB-月
Queues	消息队列（事件驱动）	$0.40/1M 操作
Vectorize	向量数据库（语义搜索）	$0.05/1M query-vec
D1	SQLite at edge	免费 tier 5GB
Hyperdrive	分布式 Postgres 缓存	$0.02/查询
Stream	视频托管 + 转码	$1/1000 分钟存 + $1/1000 分钟播
Calls	WebRTC SFU（视频会议）	$0.05/分钟
Waiting Room	流量削峰（售票/课程发布）	免费
Rate Limiting	防 abuse（登录/API 限流）	免费
Bot Fight Mode	自动拦截坏 bot	免费
Zaraz	服务端 tag manager（GA/FB pixel 不污染客户端 JS）	免费

十、agquant.com 实战：先做这 5 件事

如果你只有 1 小时，按这个顺序动手：

10 分钟：开 Web Analytics → 插到所有页面 <head>（看 1 周基线数据）
15 分钟：开 Image Resizing → 替换课程封面 <img> src（LCP 立刻 +30%）
10 分钟：开 Turnstile → 替换 reCAPTCHA（无 cookie）
10 分钟：配 Rate Limiting → 防 API abuse
15 分钟：开 R2 → 放未来要存的课程视频 / 用户上传

Workers + DO + AI 那些”重武器”等你流量上来再做。

十一、测验（12 道）

Cloudflare Tunnel 解决什么问题？

CF Web Analytics 跟 GA4 最大的区别是？

Cloudflare Turnstile 跟 reCAPTCHA 比？

Durable Objects 的核心特性？

Workers AI 跑在？

R2 跟 S3 最大的成本差异？

Cloudflare Workers 跑在什么 runtime？

Image Resizing 的 format=auto 干什么？

Email Workers 通过谁发邮件？

Waiting Room 用途？

Cloudflare Workers 单次请求最大执行时间？

以下哪个是 CF 真·花活级别（其他人不知道的）？

**下一步：**看 Lesson 0008 · Vultr 速通。