先附上项目效果:
项目地址: http://47.105.144.204/index
github:github.com/dsying/reac…
cdn选用的是七牛CDN
yarn add qiniu
复制代码
创建一个空间
调用七牛SDK
七牛nodejs sdk 创建服务器端上传文件,将webpack打包生成的js文件 上传到 指定空间内
// qiNiuConfig.js
module.exports = {
cdn: {
ak: '你的AccessKey',
sk: '你的SecretKey',
bucket: '你的空间名',
host: 'http://pn0tnrsa8.bkt.clouddn.com/', // 你的cdn域名
}
}
复制代码
const qiniu = require('qiniu')
const fs = require('fs')
const path = require('path')
// 上传静态资源所需的配置
const cdnConfig = require('./qiNiu.config').cdn
// 不需要上传的文件
const noNeedUploadFileList = ['index.html', 'server.ejs', 'server-entry.js']
const {
ak, sk, bucket,
} = cdnConfig
// 创建各种上传凭证之前,我们需要定义好其中鉴权对象mac
const mac = new qiniu.auth.digest.Mac(ak, sk)
const doUpload = (key, file) => {
// 创建上传凭证token
const options = {
scope: bucket + ':' + key,
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)
// 服务端直传
/*
* 七牛存储支持空间创建在不同的机房,
* 在使用七牛的 Node.js SDK 中的FormUploader和ResumeUploader上传文件之前,
* 必须要构建一个上传用的config对象,在该对象中,可以指定空间对应的zone以及其他的一些影响上传的参数
* */
const config = new qiniu.conf.Config()
config.zone = qiniu.zone.Zone_z0 //z0代表 华东机房
const formUploader = new qiniu.form_up.FormUploader(config)
const putExtra = new qiniu.form_up.PutExtra()
return new Promise((resolve, reject) => {
formUploader.putFile(uploadToken, key, file, putExtra, (err, body, info) => {
if (err) {
return reject(err)
}
if (info.statusCode === 200) {
resolve(body)
} else {
reject(body)
}
})
})
}
// webpack打包后生成的 dist 目录下的文件
const files = fs.readdirSync(path.join(__dirname, '../dist'))
// 上传需要上传的文件至 七牛云 CDN
const uploads = files.map(file => {
if (noNeedUploadFileList.indexOf(file) === -1) {
return doUpload(
file,
path.join(__dirname, '../dist', file)
)
} else {
return Promise.resolve('no need upload file ' + file)
}
})
Promise.all(uploads).then(resps => {
console.log('upload success:', resps)
}).catch(errs => {
console.log('upload fail:', errs)
// process.exit(0)
})
复制代码
修改webpack配置
const cdnConfig = require('./qiNiu.config').cdn
// 让 打包生成的静态文件 前缀为 七牛CDN的域名
config.output.publicPath = cdnConfig.host
复制代码
该配置是为了让 index.html引入静态文件时直接访问cdn
运行上传脚本
dist目录
执行脚本后的反馈
我的七牛云 cnode 空间
修改package.json 配置 deploy script
依次执行命令 npm run deploy/ npm run start
打开浏览器访问项目,此时静态资源全部访问的是 七牛cdn 上的资源