边缘计算：CDN与边缘函数实战

边缘计算CDN与边缘函数实战大家好我是欧阳瑞Rich Own。今天想和大家聊聊边缘计算这个热门话题。作为一个全栈开发者边缘计算正在改变我们构建和部署应用的方式。今天就来分享一下CDN和边缘函数的实战经验。边缘计算概述什么是边缘计算边缘计算是一种分布式计算架构 将计算任务从中心服务器移向网络边缘 靠近数据产生和消费的地方核心优势优势说明低延迟减少网络往返时间高可用分布式部署带宽优化减少回源流量隐私保护数据本地化处理CDN加速工作原理用户请求 → CDN节点 → 缓存命中 → 返回内容 ↓ 缓存未命中 → 回源 → 缓存 → 返回内容配置示例// Cloudflare CDN配置 const cdnConfig { zoneId: your-zone-id, cacheRules: [ { urlPattern: /*.js, cacheTTL: 86400, cacheLevel: aggressive }, { urlPattern: /*.css, cacheTTL: 86400, cacheLevel: aggressive }, { urlPattern: /*.{jpg,png,webp}, cacheTTL: 604800, cacheLevel: aggressive } ] };缓存策略// HTTP缓存头设置 app.use((req, res, next) { // 静态资源缓存1年 if (req.path.match(/\.(js|css|png|jpg)$/)) { res.setHeader(Cache-Control, public, max-age31536000, immutable); } // HTML不缓存 if (req.path.match(/\.html$/)) { res.setHeader(Cache-Control, no-cache, must-revalidate); } next(); });边缘函数Cloudflare WorkersaddEventListener(fetch, event { event.respondWith(handleRequest(event.request)); }); async function handleRequest(request) { const url new URL(request.url); // 缓存API响应 if (url.pathname.startsWith(/api/)) { const cache caches.default; let response await cache.match(request); if (!response) { response await fetch(request); response new Response(response.body, response); response.headers.set(Cache-Control, public, max-age60); event.waitUntil(cache.put(request, response.clone())); } return response; } return fetch(request); }Vercel Edge Functions// api/hello.js export default async function handler(request) { const { searchParams } new URL(request.url); const name searchParams.get(name) || World; return new Response(Hello, ${name}!, { headers: { Content-Type: text/plain } }); }实战案例实时个性化// 使用边缘函数实现A/B测试 addEventListener(fetch, event { event.respondWith(handleRequest(event.request)); }); async function handleRequest(request) { const cookie request.headers.get(Cookie); let variant default; // 根据用户ID分配变体 if (cookie) { const match cookie.match(/userId(\d)/); if (match) { const userId parseInt(match[1]); variant userId % 2 0 ? variant-a : variant-b; } } const response await fetch(request); const html await response.text(); // 根据变体修改页面内容 const modifiedHtml html.replace( !-- VARIANT --, div classbanner${variant variant-a ? 新版本A : 新版本B}/div ); return new Response(modifiedHtml, { headers: response.headers }); }最佳实践1. 静态资源优化// 图片优化 addEventListener(fetch, event { event.respondWith(optimizeImage(event.request)); }); async function optimizeImage(request) { const response await fetch(request); if (!response.ok) return response; const contentType response.headers.get(Content-Type); if (!contentType || !contentType.startsWith(image/)) { return response; } // WebP转换 const webpResponse await fetch(https://api.cloudflare.com/client/v4/accounts/..., { method: POST, body: response.body, headers: { Content-Type: contentType } }); return new Response(webpResponse.body, { headers: { Content-Type: image/webp } }); }2. 安全防护// 边缘层安全防护 addEventListener(fetch, event { event.respondWith(secureRequest(event.request)); }); async function secureRequest(request) { const ip request.headers.get(CF-Connecting-IP); // 黑名单IP if (blacklistedIPs.includes(ip)) { return new Response(Forbidden, { status: 403 }); } // 速率限制 const rateLimit await getRateLimit(ip); if (rateLimit.exceeded) { return new Response(Too Many Requests, { status: 429 }); } return fetch(request); }总结边缘计算正在改变我们构建应用的方式。通过CDN和边缘函数可以显著提高应用性能和用户体验。我的鬃狮蜥Hash对边缘计算也有自己的理解——它总是在最靠近蟋蟀的地方等待这也许就是自然界的边缘计算吧如果你对边缘计算有任何问题欢迎留言交流我是欧阳瑞极客之路永无止境技术栈边缘计算 · CDN · Cloudflare Workers