记一次node+react项目发布过程(二)--将静态资源放到CDN上

先附上项目效果：

项目地址： 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 上的资源