FE-CDN

最近把项目的前端部署策略优化了下,顺手对比了几种方式的优劣

策略 1

  • 打包产物全量推送 OSS
  • CDN 域名回源 OSS (阿里业务)
  • 前端跨域访问后端 api 服务

优点

  • 依托阿里云
  • 不需要前端用的 web 服务

缺点

  • CDN 缓存问题需要处理
  • 需要通过 CDN 上正则模拟 history 模式, 返回 index.html
  • 跨域 Option 请求


策略 2

  • 打包产物(非 index.htm)推送 OSS
  • 公用CDN 域名回源 OSS (阿里业务)
  • 用户访问自己的 nginx 服务(index.html)
  • index.html 上利用 script 标签调用 cdn 上的 js/css等静态资源
  • nginx 反向代理访问 api

优点

  • 绝大部分静态利用 CDN 资源
  • 自己控制缓存,增强可编程能力
  • 不跨域

缺点

  • 打包配置需要独立处理
  • 需要自己的 web 服务


策略 3

  • 打包产物放自己 nginx
  • 公用CDN域名回源自己的 web服务
  • 用户访问CDN
  • nginx 反向代理访问 api

优点

  • 利用 CDN 能力
  • 自己控制缓存,增强可编程能力
  • 不跨域

缺点

  • CDN 缓存问题
  • 回源还是会占用自己的流量带宽
  • 需要自己的 web 服务