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

大家好，我是欧阳瑞（Rich Own）。今天想和大家聊聊边缘计算这个热门话题。作为一个全栈开发者，边缘计算正在改变我们构建和部署应用的方式。今天就来分享一下CDN和边缘函数的实战经验。

边缘计算概述

什么是边缘计算？

复制代码

边缘计算是一种分布式计算架构
将计算任务从中心服务器移向网络边缘
靠近数据产生和消费的地方

核心优势

优势	说明
低延迟	减少网络往返时间
高可用	分布式部署
带宽优化	减少回源流量
隐私保护	数据本地化处理

CDN加速

工作原理

复制代码

用户请求 → CDN节点 → 缓存命中 → 返回内容
                     ↓
              缓存未命中 → 回源 → 缓存 → 返回内容

配置示例

javascript 复制代码

// 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'
    }
  ]
};

缓存策略

javascript 复制代码

// 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

javascript 复制代码

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

javascript 复制代码

// 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' }
  });
}

实战案例：实时个性化

javascript 复制代码

// 使用边缘函数实现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. 静态资源优化

javascript 复制代码

// 图片优化
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. 安全防护

javascript 复制代码

// 边缘层安全防护
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