我目前开发的平台的前端静态资源是使用 go embed 机制内嵌到后端服务中,
当访问量比较大的时候,服务器会有比较大的 IO 消耗,因此进行前端静态资源分离。
方案一 需要代理服务器
/*.(html|js|css) ┌───────────────┐
│ │
┌──────────▶│ CDN │
│ │ │
│ └───────────────┘
┌──────────┐ example.com ┌───────────────┐ │
│ │ │ │ │
│ user ├───────────────────▶│ proxy server │───────────┤
│ │ │ │ │
└──────────┘ └───────────────┘ │ ┌───────────────┐
│ │ │
└──────────▶│ api server │
│ │
/api/* └───────────────┘
调整事项:
- 前端静态资源 (.html, .js, .css, .png等) 直接上传到 CDN
- 前端静态资源按地区,版本目录分离,方便回滚,
/v1.0.0, /v2.0.0
- 前端静态资源的目录前缀可以在代理服务器转发,
/index.html => /v1.0.0/index.html
优点:
- 不太需要调整已有的代码
缺点:
- 需要一个代理服务器,同样有一定的压力
方案二 不需要代理服务器,入口文件放 CDN
┌──────────┐ example.com ┌────────────┐ /api/* ┌───────────────┐
│ │ │ │ │ │
│ user ├───────────────────▶│ CDN │──────────────────────▶│ api server │
│ │ │ │ │ │
└──────────┘ └────────────┘ └───────────────┘
调整事项:
- 前端静态资源 (.html, .js, .css, .png等) 直接上传到 CDN
- 前端静态资源按版本目录分离,方便回滚,
/v1.0.0, /v2.0.0
- 入口文件放到 bucket 下,比如
{bucket}/index.html
优点:
- 加快用户访问速度
- 方便部署回滚,避免 CDN 缓存问题
缺点:
- 如果接入一些第三方登录,可能会有跨域问题
方案三 不需要代理服务器,入口文件不放 CDN
┌──────────┐ example.com ┌───────────────┐
│ │ │ │
│ user │──────────┬──────────▶│ api server │
│ │ │ │ │
└──────────┘ │ └───────────────┘
│
│
│ ┌──────────────┐
│ │ │
└──────────▶│ CDN │
│ │
/*.(js|css) └──────────────┘
调整事项:
- 前端静态资源 (.js, .css, .png等) 直接上传到 CDN
- 前端静态资源按版本目录分离,方便回滚,
/v1.0.0, /v2.0.0
- 入口文件放到 api-server 下,比如
index.html
优点:
- 加快用户访问速度
- 方便部署回滚,避免 CDN 缓存问题
缺点:
- 需要等 CDN 上传成功才可以提供服务