記一次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 上的資源