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

2019年7月3日 0 条评论 115 次阅读 0 人点赞

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

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

然后在存储空间中绑定一个你备案的域名,比如我这里绑定的就是 cdn.linwene.cn ,注意先别急着在域名解析中添加该记录

添加后在融合cdn的域名管理里面点击复制CNAME,然后在你域名解析里面添加记录(去你的域名供应商平台设置,我的是腾讯云),主机记录参考你上一步绑定的域名,比如我上一步是 cdn.linwene.cn,主机记录就是 cdn


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

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

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

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

存储空间回源设置(在存储空间的镜像存储里面)

打包上传服务器后访问你的要加速的对应网站

七牛存储空间结果

线上打包构建完删除指定前缀文件(目的是为了删除旧文件)

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

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供应商类似,这里就不多说

linwene

☑编程 ☑学习 ☑读书 ☑英语

文章评论(0)