盒子
盒子
文章目录
  1. 1. CDN供应商端设置(以七牛云为例)
  2. 2. 代码修改(这里以Webpack为例,不是的可以举一反三)

Webpack如何配置CDN加速(以七牛云为例)

1. CDN供应商端设置(以七牛云为例)

在七牛云中新建一个对象存储空间

image-20210110161308032
然后在存储空间中绑定一个你备案的域名,比如我这里绑定的就是 cdn.linwene.cn ,注意先别急着在域名解析中添加该记录
image-20210110161359861
添加后在融合cdn的域名管理里面点击复制CNAME,然后在你域名解析里面添加记录(去你的域名供应商平台设置,我的是腾讯云),主机记录参考你上一步绑定的域名,比如我上一步是 cdn.linwene.cn,主机记录就是 cdn

image-20210110161454914
image-20210110161519214
然后在存储空间中的内容管理设置默认域名为你刚刚绑定的域名
image-20210110161544843

2. 代码修改(这里以Webpack为例,不是的可以举一反三)

更改webpack打包输出路径publicPath为你所设置的CDN服务器域名

1
2
3
4
const CDN = {
assetsSubDirectory: 'static',
assetsPublicPath: '//cdn.linwene.cn/cdn_test/'
}

存储空间回源设置(在存储空间的镜像存储里面)
image-20210110161613188
打包上传服务器后访问你的要加速的对应网站
image-20210110161630937
七牛存储空间结果
image-20210110161647252
线上打包构建完删除指定前缀文件(目的是为了删除旧文件)

记得先安装七牛的npm包npm install qiniu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var qiniu = require("qiniu");

var accessKey = 'accessKey'; //开发者平台上面提供的accessKey
var secretKey = 'secretKey'; //开发者平台上面提供的secretKey

var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
var config = new qiniu.conf.Config();
//config.useHttpsDomain = true;
config.zone = qiniu.zone.Zone_z2;//z2是华南区
var bucketManager = new qiniu.rs.BucketManager(mac, config);

// 获取指定前缀文件
bucket = 'lwe_blog'; //bucket为存储空间名字
var options = {
prefix: 'cdn_test/',//这里指定的前缀就是cdn_test/
};

bucketManager.listPrefix(bucket, options, function(err, respBody, respInfo) {
if (err) {
console.log(err);
throw err;
}
if (respInfo.statusCode == 200) {
var nextMarker = respBody.marker;
var commonPrefixes = respBody.commonPrefixes;
var items = respBody.items;
items.forEach(function(item) {
// 删除对应文件
bucketManager.delete(bucket, item.key, function(err, respBody, respInfo) {
if (err) {
console.log(err);
//throw err;
} else {
console.log(`${item.key}删除成功`);
}
});
});
} else {
console.log(respInfo.statusCode);
console.log(respBody);
}
});

删除后刷新下cdn缓存(如果除index.html外的文件都有hash值就少了这一步骤)

也可以在上面的代码中加上刷新缓存的语句,具体可以查看七牛的开发者文档

之后后用户访问就会自动回源最新文件了

其他CDN供应商类似,这里就不多说

赞赏
扫一扫,支持小林同學
  • 微信扫一扫
  • 支付宝扫一扫