阅读 288

Vue项目打包部署到七牛CDN

如果不清楚可以私信我或者可以查看七牛官方文档node js SDK表单方式上传,七牛官网文档地址: developer.qiniu.com/kodo/sdk/12…

1.目的

1.解决带宽报警(服务器带宽小,如何保证网站稳定)

2.解决项目上线问题(项目出现Bug,必须当时上线,上线成功之后,一下会有大量请求进来,如何保证网站正常运行)

3.访问速度(js、css、图片比较大,加载速度慢)

2.解决问题

如何解决CDN缓存问题?

如何保证文件全部上传成功?

如何替换vue项目中的静态资源访问路径?

文件上传之后所有文件类型都变成了一样的问题?

上传成功之后,如何测试?

3.项目环境

vue-cli3

node js

4.实现过程

项目结构

qiniu.js 上传vue文件脚本,编译之后可以直接运行qiniu.js即可上传

qiniu-upload-prefiex.js 上传文件的前缀配置

上线脚本qiniu.js

**

var fs = require('fs');

var path = require('path');

var qiniu = require("qiniu");

var qiniuPrefix = require("./qiniu-upload-prefix");

//自己七牛云的秘钥

var accessKey = '***************************************'

var secretKey = '***************************************';

var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);

var config = new qiniu.conf.Config();

// 空间对应的机房,zone_z1代表华北,其他配置参见七牛云文档

config.zone = qiniu.zone.Zone_z1;

// 是否使用https域名

config.useHttpsDomain = true;

// 上传是否使用cdn加速

config.useCdnDomain = true;

var formUploader = new qiniu.form_up.FormUploader(config);

var putExtra = new qiniu.form_up.PutExtra();

//文件前缀

const prefix = qiniuPrefix.prefix;

main()

function main(){

displayFile('./dist');

}

//upload('static/css/app.qwer.css',"./dist/static/css/app.qwer.css")

function upload(key,localFile) {

//这里base-html是存储空间名

// var Bucket = `cfun:${key}`;

var Bucket = key;

var options = {

scope: Bucket,

// detectMime:0

// MimeType: 'text/html;text/css;text/javascript;application/x-gzip',

};

var putPolicy = new qiniu.rs.PutPolicy(options);

var uploadToken = putPolicy.uploadToken(mac);

//windows

let str = null;

if(localFile.indexOf("./dist\\") >=0){

str = localFile.replace("./dist\\","");

}else if(localFile.indexOf("./dist/") >= 0){

//苹果

str = localFile.replace("./dist/","");

}else{

str = localFile;

}

key = prefix+str;

//上传之后的文件名

key = key.replace("\\","/");

formUploader.putFile(uploadToken, key, localFile, null, function (respErr,

respBody, respInfo) {

if (respErr) {

// console.log(uploadToken);

console.log(localFile+"文件上传失败,正在重新上传-----------");

// console.log(respInfo.statusCode);

// console.log(respBody);

upload('file2',localFile);

// throw respErr;

}else{

if (respInfo.statusCode == 200) {

console.log(respBody);

} else {

console.log(respInfo.statusCode);

console.log(respBody);

if (respBody.error) {

console.log(respBody.error)

}

}

}

});

}

//遍历文件夹

function displayFile(param) {

//转换为绝对路径

//var param = path.resolve(param);

fs.stat(param, function (err, stats) {

//如果是目录的话,遍历目录下的文件信息

if (stats.isDirectory()) {

fs.readdir(param, function (err, file) {

file.forEach((e) => {

//遍历之后递归调用查看文件函数

//遍历目录得到的文件名称是不含路径的,需要将前面的绝对路径拼接

var absolutePath = path.join(param, e);

//var absolutePath = path.resolve(path.join(param, e));

displayFile(absolutePath)

})

})

} else {

//file2/这里是空间里的文件前缀

var key ='file2';

var localFile = './' + param;

if(!localFile.endsWith(".gz")){

upload(key,localFile);

}

}

})

}

**

qiniu-upload-prefiex.js脚本

因为七牛上传文件不可以重复,重复将导致文件上传失败,经过再三商议,最终以每天开始时间作为一个时间串

//七牛文件上传前缀,使用时间戳作为文件上传前缀

let date = new Date();

date.setSeconds(0);

date.setMinutes(0);

date.setMilliseconds(0);

date.setHours(0);

const time = date.getTime();

module.exports = {

prefix: 'cms-easy/'+time+'/'

}

编译打包,上传七牛云

在package.json文件夹中配置

"build-qiniu": "vue-cli-service build && node ./qiniu.js"

然后在控制台中执行: npm run build-qiniu,最后坐等成功就行了

5.解决以上问题

如何解决CDN缓存问题?

做这个功能的时候,查看了很多博客,总结以下两种实现解决办法:

1.写一个脚本,循环调用七牛刷新接口,去刷新需要刷新的文件,但是七牛云有次数限制,一天刷新次数是500,而且我用过控制台刷新,刷新很慢

2.相比之下,我觉得使用第二种方式,换路径,保证每次上传路径不一致,就不考虑缓存问题了,就是qiniu-upload-prefiex.js文件,一来解决缓存问题,二是方便统一管理,将项目放在同一文件夹下,三是可以随时回退版本

如何保证文件全部上传成功?

有时候因为文件太大,或者网络不好的原因可能导致上传失败,这个问题折磨了我很久,一直报错,状态码-1,最后的解决办法时,报错之后再重新上传没成功的文件

如何替换vue项目中的静态资源访问路径?

在vue.config.js文件中使用publicPath配置,所有静态资源访问或编译时都会加上这里配置的前缀(配置规则:资源访问域名+qiniu-upload-prefiex.js配置的前缀 eg:easks.file.com/20201126/)

文件上传之后所有文件类型都变成了一样的问题?

文件上传之后,发现所有的文件类型都变成了一样的,后来是通过提交七牛工单解决的,可以将第四个参数设置为空,然后在传,就会发现所有上传了的文件类型都对了

上传成功之后,如何测试?

编译成功之后可以到dist文件夹下,用浏览器打开index.html,可以正常打开,并且所有资源都加载成功,页面可以正常访问,则部署成功,否则没成功

文章分类
前端
文章标签