前端 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

巴特西

前端 OSS 自动化部署脚本

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

oss 配置文件（deployConfit.js)

调用

在package.json中配命令

最新文章

热门文章