前端 CDN 实践
回源 OSS 的益处:
- 节省自己的带宽
- 前端独立部署
- 自动刷新 CDN
- 相应的省钱,不用物理机部署
CDN:
- 全国节点
- 缓存能力
- 自带访问限制等手段
步骤 - 一下以 vue SPA 为例
- 创建 OSS 选私有, 最好开通日志
- 配置 OSS 为静态站点模式, 这只默认首页和 404 页面都为 index.html
- CDN 设置 - 添加域名, 设置加速的域名, 我们一般就选择 图片小文件, 类型为 OSS 端口 80
- 回源配置 - 授权私有 Bucket
- 缓存配置重点配置 重写部分
- ^/\$ 目标为/index.html break 模式 - 访问跟域名的时候输出 index.html 否则会报 403
- ^/(?!..\$).\$ 目标为 /index.hmtl break 模式 - 把非静态资源当做前端路由, 输出 index.html 内容
- 配置 https 上传相关证书信息, 开启 http2 和强制跳转, 开启所有 TLS 版本支持
- 访问控制, 添加 Refer 白名单
- 性能优化, 开启 Brotli 压缩
Vue 项目修改
当需要上传 CDN 的时候, 需要修改 publicPath 的位置如: “//xxxx.yy.com/“