跳到主要内容

谈谈CDN

  • CDN加速域名，加快域名访问
  • CDN静态存储缓存
  • OSS上传，也通过自定义CDN加速域名

CDN缓存策略​

  • 只需要缓存JS、CSS等静态资源
  • 禁止缓存index.html
    • 如果缓存了index.html，会导致index.html引用的js、css等静态资源都是旧的，没办法拿到最新的静态资源
    • 在源站配置禁止缓存index.html
      • 一般是在nginx中配置
  • 禁止缓存接口内容数据
    • 如果接口内容缓存了，可能会导致用户看到的数据异常
    • 用户看到的是缓存的数据，没法看到最新的数据

CDN缓存配置​

  • 登录CDN管理控制台：进入域名配置页面的“缓存策略”模块。
  • 创建排除规则
    • 路径匹配：例如/index.html或/*.html
  • 创建包含规则
    • 扩展名匹配：如/*.js、/*.css、/*.png。
    • 设置缓存时间、启用缓存压缩gzip

CDN缓存问题​

缓存哪些文件​

只缓存前端的静态资源

  • 1、只缓存js、css等静态文件
  • 2、不缓存index.html
  • 3、不缓存接口数据，避免接口数据缓存，造成每个用户看到的数据都是一样

缓存过期CDN如何处理​

  • 1、浏览器请求CDN节点资源
  • 2、CDN 检查自己缓存是否仍有效
    • 有效期内 => CDN 返回缓存内容
    • 过期 => CDN 回源（请求源站）并刷新缓存

CDN资源缓存在哪个地方？​

是缓存在用户浏览器，还是CDN节点服务器？

  • CDN缓存是存在CDN 节点服务器

缓存文件问题​

  • 如果在缓存时间内，CDN缓存了HTML，即使用无痕浏览器打开也是会返回旧的HTML，需要手动刷新CDN，才能保证拿到最新的资源

CDN缓存和浏览器缓存​

CDN缓存和浏览器缓存属于两层缓存机制，通过CDN缓存，减轻源站的压力，而浏览器缓存，减少用户重复请求，提升页面加载速度

  • 1、浏览器请求资源 → 先查本地是否有缓存
  • 2、若本地缓存过期 → 向 CDN 请求资源
  • 3、CDN 命中缓存 → 直接从CDN节点服务端返回缓存资源；
  • 4、CDN 也过期 → 请求回源，从源站拿到最新的资源，再返回浏览器

CDN的TTL​

  • TTL = Time To Live（存活时间）、
  • 配置cdn的TTL缓存时间
  • CDN 控制台 配缓存规则
    • 按路径配置
text
/play/*
TTL = 60 秒

/_nuxt/*
TTL = 30 天

*.js / *.css
TTL = 30 天

*.jpg / *.webp
TTL = 7 天
  • 从HTTP响应头能看到TTL的缓存时间
    • 900：CDN 当前缓存时间约为 900 秒，也就是 15 分钟
    • X-Cache: HIT：本次请求命中 CDN
    • Age: 21：该缓存对象已经在 CDN 中存在约 21 秒
    • Via: ens-cache...：请求经过阿里云 CDN
text
X-Swift-CacheTime: 900
Cache-Control: max-age=900
X-Cache: HIT TCP_MEM_HIT
Age: 21

CDN和源站​

  • 当CDN配置了遵循源站缓存行为，则源站策略会影响CDN的行为
  • CDN可配置是否遵循源站策略
    • 默认是关闭缓存遵循源站功能
  • 双重校验机制
    • 1、源站强制设置缓存策略，配置缓存头
    • 2、配置CDN缓存策略，来覆盖源站缓存策略

CDN挂了，如何解决？​

CDN服务不稳定，如果出现CDN挂掉了如何解决？

  • 1、启用备用源 （Fallback 机制）
    • 当某个 CDN 资源加载失败时，自动切换到备选源或主站资源
  • 2、DNS 解析切换，切换一个 CDN 服务商
  • 3、将静态资源部署回自己的服务器

加速域名和源站域名​

  • 加速域名：指用户提供的需要使用CDN加速服务的域名，即终端用户访问的域名。
  • 源站域名：指服务器IP地址对应的域名，即CDN回源时访问的域名

加速域名和源站域名不能是同一个域名：用户访问加速域名的网站资源，当CDN节点上没有缓存对应的内容时，CDN节点会回到源站获取，然后再返回给用户。如果源站域名与加速域名一致，将会造成访问请求反复解析到CDN节点，导致CDN节点无法回源拉取请求内容

前端静态资源部署CDN​

  • 前端打包好的静态资源上传到源站服务器
  • CDN控制台配置加速域名、设置绑定对应源站地址
  • 配置CDN缓存策略
    • 设置缓存时间、回源规则
    • JS、CSS、图片等资源可以长时间缓存（例如 30 天）
    • index.html 不缓存
  • 浏览器访问 CDN 域名，判断缓存是否命中
    • 命中缓存 → 直接从CDN节点服务端返回缓存资源；
    • 未命中 → 回源获取 → 缓存到CDN → 返回资源
  • 前端重新发版本部署时，需要刷新CDN， 可以通过脚本来自动刷新CDN，不需要手动到控制台去刷新
    • 避免CDN存在缓存，导致用户没有及时访问最新的资源
    • CDN有提供刷新缓存的API

回源策略：当 CDN 节点上没有该资源时，会自动回源到源站去拉取, 拉取后会将该资源 缓存到 CDN 节点

注意：不需要手动上传资源到CDN，因为CDN如果没有命中资源，会直接从源站中获取， 只要源站上有最新资源