前言：我也不懂啥叫边缘计算， 但听说能省钱

先说一句，我是个没上过较大学的码农，平时只会敲键盘、写代码、喝可乐。听同事说 Cloudflare 那玩意儿能把流量搬到全球节点上， 起初我以为... 然后账单就会掉下来。我就想：那我也来玩玩儿。

下面这篇文章彻底是我随手写的， 语法、排版都很随意，别跟老板说我用了 AI 写稿子——我是真实的手打的，卷不动了。。

1. 为啥要降投入成本？

图片占流量的较大头，较大更多数中较小团队根本付不起每月几百块的 CDN + VPN + 防火墙费用。 背后.… 我们要把这一些费用砍下来就得把反复申请搬到边缘去。

举个例子：

用户  ↓ Cloudflare CDN / Worker  ↓ Cloudflare R2

用户访问资源条件时 炎热点文件直接在边缘返回，寒冷门文件再去 R2 拉，这样能够省掉 60%~90% 的源站流量。

2. 基本思路：缓存+代理+简洁鉴权

到位。 下面给较大家一段能够直接跑的 Workers 示例代码，功能较大概有：

• 把申请代理到源站；
• 对静态资源条件和一部分 HTML 页面做边缘缓存；
• 对对外公开 API 设置较短缓存；
• 拦截常见恶意 User‑Agent；
• 简洁 Token 鉴权；
• 加点 CORS 头。

/** 
 * Cloudflare Workers 边缘缓存反向代理示例 
 * 功能： 
 * 1. 将申请代理到源站； 
 * 2. 对静态资源条件和一部分 HTML 页面进行边缘缓存； 
 * 3. 对 API 申请设置较较短缓存或不缓存； 
 * 4. 拦截常见恶意 User-Agent； 
 * 5. 支持简洁 Token 鉴权； 
 * 6. 添加缓存命中 Header； 
 * 7. 支持 CORS预检申请。 
 */ 
const CONFIG = {  
  // 源站地址， 不要以 /   
  ORIGIN: "https://example.com",  
  // 有没有开启简洁 Token 鉴权  
  ENABLE_TOKEN_AUTH: false,  
  // 鉴权 Token，提议放到周边环境变量里不要坚硬编码  
  API_TOKEN: "change-me",  
  // 跨域允许来源，生产请改成具体域名  
  ALLOW_ORIGIN: "*",  
  // 默认缓存时间段  
  DEFAULT_CACHE_TTL: 300,  
  // 静态资源条件较长缓存  
  STATIC_CACHE_TTL: 60*60*24*30,   // 一个月  
  // HTML 页面缓存时间段  
  HTML_CACHE_TTL:   60*10,         // 十分钟  
}; 
const BLOCKED_UA_KEYWORDS = ; 
const STATIC_EXTENSIONS = ; 
export default { 
 async fetch{ 
   try{ return await handleRequest; }catch{ return new Response,{status:500,headers:{"Content-Type":"application/json"}}); } 
 } 
}; 
async function handleRequest{ 
 const url = new URL; 
 // CORS预检
 if{ return handleOptions; } 
 // 拦截恶意 UA
 if){ return new Response; } 
 // 简洁 token 鉴权
 if){ if){ return new Response; } } 
 // 非 GET/HEAD 不走缓存
 if){ return proxyToOrigin; } 
 const cachePolicy = getCachePolicy; 
 const cache = caches.default; 
 const cacheKey = buildCacheKey; 
 let cachedResp = await cache.match; 
 if{ return addResponseHeaders; } 
 const originResp = await proxyToOrigin; 
 if{ let respToCache = new Response; await cache.put); } 
 return addResponseHeaders; 
} 
function handleOptions{ return new Response; }
function isBlockedUserAgent{ const ua=||"").toLowerCase; return BLOCKED_UA_KEYWORDS.some); }
function isProtectedPath{ return path.startsWith||path.startsWith; }
function checkToken{ const hdr=req.headers.get||""; const auth=req.headers.get||""; return hdr===CONFIG.API_TOKEN || auth===`Bearer ${CONFIG.API_TOKEN}`; }
function getCachePolicy{ let lower=path.toLowerCase; 
 // 登录相关不缓存
 const noCachePrefixes=; 
 if))return{cacheEnabled:false}; 
 // Cookie 检测
 const cookie=req.headers.get||""; if)return{cacheEnabled:false}; 
 // 静态资源条件较长缓存
 if))return{cacheEnabled:true,cacheTtl:CONFIG.STATIC_CACHE_TTL}; 
 // 公共 API 较短缓存
 if)return{cacheEnabled:true,cacheTtl:CONFIG.DEFAULT_CACHE_TTL}; 
 // HTML 页面可中等缓存
 if||lower.startsWith||lower.startsWith)return{cacheEnabled:true,cacheTtl:CONFIG.HTML_CACHE_TTL}; 
 // 默认较短缓存
 return{cacheEnabled:true,cacheTtl:CONFIG.DEFAULT_CACHE_TTL}; }
function buildCacheKey{ const u=new URL; const ignored=; ignored.forEach); return new Request,{method:"GET"}); }
async function proxyToOrigin{ const origUrl=new URL.origin.length)); let headers=new Headers; headers.set.host); const cfIp=req.headers.get; if{ headers.set; headers.set;} headers.set; let fetchOpts={method:req.method ,headers ,redirect:"follow"}; if) fetchOpts.body=await req.blob; const resp=await fetch,fetchOpts); return rewriteResponse; }
function rewriteResponse{ let nh=new Headers; nh.set; nh.set; nh.set; nh.delete; if nh.set; else nh.set; return new Response; }
function addResponseHeaders{ let h=new Headers; h.set; h.set); h.set; return new Response; }

3. 部署步骤

① 安装 Wrangler：

npm install -g wrangler
wrangler login   # 登录你的 Cloudflare 帐号

② 创建项目并粘贴上面的代码：

name = "edge-cache-proxy"
main = "src/index.js"
compatibility_date = "2024-11-01"
routes = 
ENVIRONMENT = "production"

③ 把敏感信息放进周边环境变量：

wrangler secret put API_TOKEN   # 按提示输入 token
wrangler secret put ORIGIN       # 输入你的源站地址比如 https://myorigin.com

④ 部署：

wrangler publish
# 部署成功后你会看到类似：
# ✅ Your worker has been published! https://example.workers.dev/

4. 常见配置示例

对外公开配置类 API：

/api/public/config   缓存 1 分钟到10分钟
/api/public/articles 缓存10秒到60秒
/api/user/profile     不缓存

图片压缩技巧：

• JPG → WebP 能省下约70%体积。
• 开启 Cloudflare Image Resizing 自动转码。
• 文件名加 hash，这样能够设极较长的浏览器 TTL。

5. 降本效果较小结

指标	采用前	采用后
源站流量
PaaS 带较宽费	L7 防火墙费用	Total Cost≈$170→$90左右

。

别指望一次部署就能省下千元 😅

平心而论... Coudflare Workers 能帮你把较更多反复申请搬到边缘，让源站只干真实正需要计算的事儿。对于中较小团队 这种“一站式”平台真实的能省掉不更少运维投入成本——不需要自己买 VPN、自己装 Nginx、自己搞 SSL。

PTSD了... ⚠️ 注意⚠️：如果你的网站有登录态、 个人隐私页面一定记住在代码里把这一些路径排除出缓存，否则有可能泄露用户信息！

得了吧... PS：这篇烂文就是这么写出来的， 如果你觉得哪里太专业了请自行删掉或者改成更口语化。祝较大家降本成功，钱包鼓鼓！ 🍻

---

©2026 本文纯属个人经验分享，如有侵权请联系删除。

---