背景:
前端项目代码在上传到服务器以后
资源文件往往会很大
而使用的云服务一般带宽都会很小(带宽很贵)
所以资源往往需要放到cdn上面来加速
节约服务器的带宽
这里我们使用回源的方式来实现cdn加速
假设:
oss(或其他云)的Bucket域名为https://static.hyf.cn
我们的站点域名为https://www.hyf.cn
项目名vue
资源文件名assets
思路:
尝试访问https://static.hyf.cn/vue/assets/jQuery.min.js时
oss中查询不到相应的文件
自动回源到https://www.hyf.cn/vue/assets/jQuery.min.js查找
www.hyf.cn的nginx指向/web/vue/assets/jQuery.min.js
oss成功取得文件 将文件保存在oss中
oss将文件返回给客户端
实现:
oss镜像配置
nginx目录配置
location ^~ /vue/assets/ {
root /web/vue/assets/;
}
项目代码修改
对于index.html中的静态js
使用下面的方法引入
<script src="https://static.hyf.cn/vue/assets/jQuery.min.js"></script>
对于编译生成的资源文件
需要修改相应webpack配置
以vue项目为例
找到config/index.js文件
修改build.assetsPublicPath="https://static.hyf.cn/vue/"
build.assetsSubDirectory="assets"
注意:
对于没有找到的资源文件一定要返回httpcode=404
千万不可只返回vue的404页面
否则可能出现 将这个404页面的html内容 当作js请求jQuery.min.js的内容 的情况