当前位置：首页 > news >正文

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

news 2026/6/3 12:55:48

边缘计算：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-age=31536000, immutable'); } // HTML不缓存 if (req.path.match(/\.html$/)) { res.setHeader('Cache-Control', 'no-cache, must-revalidate'); } next(); });

边缘函数

Cloudflare Workers

addEventListener('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-age=60'); 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 class="banner">${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); }