前端项目资源文件使用cdn加速

背景：

前端项目代码在上传到服务器以后

资源文件往往会很大

而使用的云服务一般带宽都会很小（带宽很贵）

所以资源往往需要放到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的内容 的情况