前端 OSS 自动化部署脚本

部署脚本 (deploy.js 自己命名)

const co = require('co')
const OSS = require('ali-oss')
const path = require('path')
const fs = require('fs')
// const refreshCache = require('./refreshCache')
module.exports = function (config) {
    // get mode
    const mode = process.argv[process.argv.length - 1]

    // 当前bucket
    const currentBucket = config.bucket[mode]
    // 根据环境获取bucket
    config.ossConfig.bucket = currentBucket.name

    const client = new OSS(config.ossConfig)
    const root = path.resolve(__dirname, `./${config.path}`)
    const files = []

    //取出所有文件夹下所有文件的路径
    function readDirSync(p) {
        const pa = fs.readdirSync(p)
        pa.forEach((e) => {
            const cur_path = `${p}/${e}`
            const info = fs.statSync(cur_path)
            if (info.isDirectory()) {
                readDirSync(cur_path)
            } else {
                files.push(cur_path)
            }
        })
    }
    readDirSync(root)
    //上传文件
    co(function* () {
    // co(function () {
        const successFile = [] // 保存上传的成功的文件
        // eslint-disable-next-line no-unused-vars
        let indexFile = null
        const projectRootPath = currentBucket.projectPath ? currentBucket.projectPath : ''
        for (let i = 0; i < files.length; i++) {
            const file = files[i]
            //文件名取root后面的,添加项目文件夹，默认为空

            if (file.replace(root, projectRootPath) == '/index.html') {
              // indexFile = file.replace(root, projectRootPath)
              indexFile = file
              // console.log(file.replace(root, projectRootPath))
              continue
            }
            const result = yield client.multipartUpload(file.replace(root, projectRootPath), file, {
              progress: function (p) { //progress is generator
                console.log(`正在上传 [${file.replace(root, '')}] 文件: ${parseInt(p*100)} %'`)
              }
            })
            //上传成功后返回的message
            // console.log(result)
            successFile.push(result.name)

          // // 所有文件都上传成功后, 最后再上传index.html, 不然少一个文件,部署就容易出致命bug
          if ((files.length - 1) === successFile.length) {
            // console.log('最后再上传index')
            const result = yield client.multipartUpload(indexFile.replace(root, projectRootPath), indexFile, {
              progress: function (p) { //progress is generator
                console.log(`正在上传 [${indexFile.replace(root, '')}] 文件: ${parseInt(p*100)} %'`)
              }
            })
            //上传成功后返回的message
            // console.log(result)
            successFile.push(result.name)
          }
        }
        // 刷新缓存
        // if (currentBucket.refreshPath) {
        //     refreshCache({
        //         accessKeyId: config.ossConfig.accessKeyId,
        //         secretAccessKey: config.ossConfig.accessKeySecret,
        //     }, currentBucket.refreshPath)
        // }
        console.log('')
        console.log('================================================================')
        console.log(`总共 ${files.length} 个文件, 成功上传 ${successFile.length} 个文件`)
        if (files.length === successFile.length) {
          console.log('部署成功')
        } else {
          console.log('文件上传不完整,请再试一次')
        }
        console.log('================================================================')
    }).catch(function (err) {
        console.log(err)
        console.log('')
        console.log('=================================================================')
        console.log('部署失败')
        console.log('=================================================================')
    })
}

oss 配置文件（deployConfit.js)

/**
 * ===================================================================
 * 这个文件不要上传到代码仓库
 * ===================================================================
 */

module.exports.depConfig = {
  region: 'XXXX',
  accessKeyId: 'XXXXXXXXXX',
  accessKeySecret: 'XXXXXXXXXXXXXXXXX',
  bucket: 'XXXXXXXXXX',
  testBucket: XXXXXXXXXXXXXXXX',
}

调用

const config = require('./deployConfit.js')
const deploy = require('./deploy')

deploy({
  path: '../dist', // 改为自己的静态资源目录
  ossConfig: { // oss配置参数
    region: config.depConfig.region,
    accessKeyId: config.depConfig.accessKeyId,
    accessKeySecret: config.depConfig.accessKeySecret,
  },
  bucket: {
    pro: {
      name: config.depConfig.bucket, // 桶名
      // name: '', // 桶名
      refreshPath: '', // 可选，deploy后刷新缓存，必需保证url正确
    },
    test: {
      name: config.depConfig.testBucket, // 桶名
      projectPath: '', // 可选，添加项目文件夹(需修改webpack的baseUrl,以保证资源文件路径正确)，不填默认为空
    },
  }
})

在package.json中配命令

  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "deploy": "node ./deploy/index.js pro",  // 正式线
    "deploy:test": "node ./deploy/index.js test" // 测试线上的
  }

  npm run deploy
  npm run deploy:test