Nuxt 项目实战 - 16:利用CDN+OSS给网站全面提速
背景
我面试过一些前端同学,同时也看到网上很多前端同学说可以利用CDN加速,提高网站的访问速度,具体如何搞?具体如何配置?估计很多前端都是不知道的,一方面权限所限,另一方面可能只是知道可以利用CDN加速网站,具体如何搞完全不知道,其实我也不太清楚😅。现在我有权限操作打算好好实践一番,让CDN好好给我开发的Nuxt网站提提速。🥰
创建和配置OSS Bucket
注意:读写权限写成私有,避免被别人盗用,其他就按提示填就可以了
提示:记住这个OSS域名,方便后续配置CDN加速域名,需要让加速域名通过CNAME解析到这个OSS域名
创建CDN加速域名
提示:建议创建一个二级域名,类型设置成CNAME,记录值就填成上一步OSS对外公开的域名
上传CDN加速域名证书
说明:点击证书管理,上传你的CDN域名证书。
完善OSS Bucket配置
点击绑定域名配置,即可以看到域名转发调用过程,如下图所示:
点击Bucket授权策略,点击授权,否则会导致无权访问Bucket上的资源
开启TSL并配置TSL启用的版本,如下图所示:
开启防盗链,避免其他人引用咋们网站的静态资源(),如下图所示:
提示:为了避免中途出错,建议先不开启,等整个流程验证走通后再开启,避免问题太多搞不清具体哪步配的有问题。
配置CDN域名,域名管理配置
提示:刚开始进入会有提示,可以先使用推荐配置,然后再调整
缓存配置->配置节点响应头,避免网站访问cdn资源时报跨域错误,如下图所示:
说明:Access-Control-Allow-Origin 先配置成*,等流程跑通后再调整成你运行访问的域名。其他配置就根据自己的需求来配置。
缓存配置->性能优化,如下图所示:
Nuxt项目配置CDN
nuxt.config.ts配置cdn域名,如下图所示:
说明:如果你是将nuxt打包后前端静态资源public(提示:nuxt build后,会生成.output目录,至需要把.output/public里面的资源上传就可以了,不要一股脑的把所有资源都上传至OSS)直接上传至你创建OSS Bucket的根目录下的话,此处就直接填CDN加速域名即可。我这么配置的原因是可以动态控制是否使用CDN加速,比如:我测试环境不需要CDN加速,生成环境才需要CDN加速,而且我不想仅将打包后的前端静态资源放置在Bucket根目录下,所以我就动态根据环境加了一个前端,这样后面Bucket可以用于存其他东西,不至于仅存前端网站静态资源,添加前缀就相对比较灵活。
将打包产物上传OSSt,验证效果
优化前
优化后
总结
- CDN加速可以明显提高网站访问速度,减少服务器带宽压力,提高用户体验
为了提高网站访问速度,提升用户体验,大家赶快去试试吧~ 😄