跳到主要内容

CDN原理与应用

· 阅读需 8 分钟
DingZhiyu
DingZhiyu
2023 Para team number

什么是CDN？​

CDN（内容分发网络，Content Delivery Network）是一种分布式服务器系统，旨在通过将内容缓存到全球各地的节点服务器上，加速内容交付，提高网站的加载速度和可靠性。CDN节点可以有效减轻源服务器的负载，改善用户体验。

CDN如何工作？​

  1. 缓存内容：CDN将静态内容（如图片、CSS、JavaScript文件）缓存到全球各地的节点服务器上。
  2. 就近分发：当用户请求内容时，CDN会将请求重定向到离用户最近的节点服务器，从而减少延迟。
  3. 动态加速：对于无法缓存的动态内容，CDN可以通过优化路由和协议，加速数据传输。

可以使用CDN的内容类型​

静态内容​

  • 图像文件：JPEG、PNG、GIF、SVG、WebP等。
  • 视频和音频文件：MP4、WebM、Ogg、MP3、AAC、OGG等。
  • 文档和文件下载：PDF、DOCX、PPTX、TXT、ZIP、RAR等。
  • 网页资源文件：HTML、CSS、JavaScript文件。
  • 字体文件：TTF、OTF、WOFF、WOFF2等。
  • 数据文件：JSON、XML、CSV等。
  • 图形和动画文件：SVG、Canvas等。
  • 3D 模型和资产：OBJ、FBX、GLTF等。
  • 静态网站生成器输出：使用静态网站生成器生成的内容。

是的，静态内容使用CDN分发通常不需要开发者添加额外的代码。CDN的工作原理和设置方式使得静态内容的分发相对简单。下面是一些详细说明：

静态内容使用CDN分发的设置步骤​

1. 选择CDN提供商​

选择一个合适的CDN提供商，如Cloudflare、Akamai、Amazon CloudFront、Google Cloud CDN等。

2. 配置DNS​

将你的网站的DNS设置指向CDN提供的服务器。通常，你需要在DNS管理控制台中添加CNAME记录，指向CDN提供的域名。

示例：

www.example.com CNAME cdn.example-cdn.com

3. 配置CDN​

在CDN提供商的管理控制台中配置你的站点，指定哪些内容需要通过CDN分发。通常，你可以设置一个或多个规则来匹配静态内容的路径。

4. 源站配置​

确保你的源服务器（origin server）配置正确，允许CDN节点请求静态内容。大多数情况下，不需要对源服务器进行特别的调整。

5. 测试和验证​

在CDN配置完成后，测试并验证CDN是否正确缓存和分发了静态内容。你可以使用浏览器的开发者工具检查请求头和响应头，确保内容通过CDN节点传输。

6. 缓存策略​

根据需要配置缓存策略，例如缓存的时间、哪些内容需要强制刷新等。

无需额外代码示例​

假设你有一个简单的网站，包含HTML、CSS、JavaScript、图片等静态文件。配置CDN后，这些文件的请求流程如下：

  1. 用户请求：用户浏览器请求网页内容。
  2. CDN节点检查缓存：CDN节点检查是否有缓存的版本。
  3. 缓存命中：如果缓存命中，CDN节点直接返回缓存内容。
  4. 缓存未命中：如果缓存未命中，CDN节点向源服务器请求内容，并缓存返回的内容以供后续请求使用。

示例请求流程：

  • 用户请求 https://www.example.com/index.html
  • CDN节点返回缓存的 index.html 文件
  • 用户请求 https://www.example.com/style.css
  • CDN节点返回缓存的 style.css 文件
  • 用户请求 https://www.example.com/image.jpg
  • CDN节点返回缓存的 image.jpg 文件

这些请求和响应过程中，开发者不需要在代码中做任何改动。

示例配置和响应头​

在使用CDN后，典型的响应头可能如下所示：

HTTP/1.1 200 OK
Date: Sat, 08 Jun 2024 10:00:00 GMT
Content-Type: text/html
Content-Length: 1024
Connection: keep-alive
Cache-Control: max-age=3600
CDN-Cache: HIT
Server: example-cdn

使用CDN处理动态内容​

动态内容​

  • 用户数据：用户个人资料、订单历史、消息、通知等。
  • 实时更新的内容：新闻、社交媒体动态、股票价格、天气预报等。
  • 个性化内容：推荐系统生成的个性化推荐、广告等。
  • 搜索结果：用户查询生成的搜索结果页面。
  • 购物车和结账页面：显示用户的购物车内容、订单详情等。

虽然动态内容不能像静态内容那样直接缓存，但可以通过以下方式优化：

配置缓存策略​

  • HTTP头配置：使用Cache-Control、Expires、ETag、Last-Modified等头部设置控制缓存。 
    Cache-Control: private, max-age=60
    ETag: "12345"
  • Vary 头：根据请求头（如Accept-Encoding、User-Agent）缓存不同版本的内容。 
    Vary: Accept-Encoding, User-Agent

边缘计算和自定义逻辑​

  • 边缘计算：在CDN节点上运行自定义脚本（如Cloudflare Workers、AWS Lambda@Edge）。 
    addEventListener('fetch', event => {
      event.respondWith(handleRequest(event.request))
    })

    async function handleRequest(request) {
      // 自定义逻辑
      return new Response('Hello from the edge!', { status: 200 })
    }

配置CDN规则​

  • 路径规则：在CDN控制台中设置路径规则，定义哪些内容应缓存，哪些应直接从源服务器获取。 
    /api/* - No Cache
    /static/* - Cache

动态内容缓存和过期​

  • 短期缓存：对动态内容进行短期缓存，以减少服务器负载。
  • 条件请求：利用条件请求头减少数据传输。 
    If-None-Match: "12345"
    If-Modified-Since: Wed, 21 Oct 2020 07:28:00 GMT

利用CDN的高级功能​

  • 实时日志和监控：使用CDN的日志和监控功能，调整策略。
  • 动态加速：优化动态内容的传输路径和速度。

示例配置​

以下是一个示例配置，展示如何在CDN中配置和利用缓存策略：

# 针对静态内容
Cache-Control: public, max-age=31536000

# 针对动态内容（短期缓存）
Cache-Control: private, max-age=60

# 针对不缓存的API请求
Cache-Control: no-store

总结​

CDN可以显著提升静态和动态内容的交付效率，通过合理配置缓存策略和利用CDN的各种高级功能，开发者可以改善用户体验，减轻服务器负载，并提高内容交付的速度和可靠性。