前端工程化中的自動(dòng)化部署

遞歸讀取打包文件 // 讀取文件  readDir (obj, nowPath) {    const files = fs.readdirSync(nowPath) // 讀取目錄中的所有文件及文件夾（同步操作）    files.forEach((fileName, index) => {      // 遍歷檢測(cè)目錄中的文件      // console.log(fileName, index) // 打印當(dāng)前讀取的文件名      const fillPath = nowPath + '/' + fileName      const file = fs.statSync(fillPath) // 獲取一個(gè)文件的屬性      if (file.isDirectory()) {        // 如果是目錄的話，繼續(xù)查詢        const dirlist = zip.folder(fileName) // 壓縮對(duì)象中生成該目錄        this.readDir(dirlist, fillPath) // 重新檢索目錄文件      } else {        obj.file(fileName, fs.readFileSync(fillPath)) // 壓縮目錄添加文件      }    })  }壓縮文件夾下的所有文件// 壓縮文件夾下的所有文件  zipFile (filePath) {    return new Promise((resolve, reject) => {      let desc =         '*******************************************\n' +         '***                正在壓縮              ***\n' +         '*******************************************\n'      console.log(chalk.blue(desc))      this.readDir(zip, filePath)      zip        .generateAsync({          // 設(shè)置壓縮格式，開(kāi)始打包          type: 'nodebuffer', // nodejs用          compression: 'DEFLATE', // 壓縮算法          compressionOptions: {            // 壓縮級(jí)別            level: 9          }        })        .then(content => {          fs.writeFileSync(            path.join(rootDir, '/', this.fileName),            content,            'utf-8'          )          desc =            '*******************************************\n' +            '***                壓縮成功              ***\n' +            '*******************************************\n'          console.log(chalk.green(desc))          resolve({            success: true          })        }).catch(err => {          console.log(chalk.red(err))          reject(err)        })    })  }使用child_process的exec來(lái)運(yùn)行npm run build腳本打包// 打包本地前端文件  buildProject () {    return new Promise((resolve, reject) => {      exec(Config.buildCommand, async (error, stdout, stderr) => {        if (error) {          console.error(error)          reject(error)        } else if (stdout) {          resolve({            stdout,            success: true          })        } else {          console.error(stderr)          reject(stderr)        }      })    })  }連接ssh服務(wù)器通過(guò)ssh2的client來(lái)創(chuàng)建ssh連接 // 連接服務(wù)器  connectServer () {    return new Promise((resolve, reject) => {      const conn = this.conn      conn        .on('ready', () => {          resolve({            success: true          })        })        .on('error', (err) => {          reject(err)        })        .on('end', () => {          const desc =            '*******************************************\n' +            '***           SSH連接已結(jié)束        ***\n' +            '*******************************************\n'          console.log(chalk.green(desc))        })        .on('close', () => {          const desc =            '*******************************************\n' +            '***           SSH連接已關(guān)閉        ***\n' +            '*******************************************\n'          console.log(chalk.green(desc))        })        .connect(this.server)    })  }上傳壓縮的工程文件判斷上傳路徑是否存在// 判斷文件是否存在，如果不存在則進(jìn)行創(chuàng)建文件夾  await sshCon.execSsh(    `    if [[ ! -d ${sshConfig.catalog} ]]; then     mkdir -p ${sshConfig.catalog}    fi    `  )通過(guò)client的sftp講本地的壓縮包上傳到指定的服務(wù)器的對(duì)應(yīng)地址 // 上傳文件  uploadFile ({ localPath, remotePath }) {    return new Promise((resolve, reject) => {      return this.conn.sftp((err, sftp) => {        if (err) {          reject(err)        } else {          sftp.fastPut(localPath, remotePath, (err, result) => {            if (err) {              reject(err)            }            resolve({              success: true,              result            })          })        }      })    })  }解壓上傳的工程文件通過(guò)exec來(lái)執(zhí)行ssh命令的  // 執(zhí)行ssh命令  execSsh (command) {    return new Promise((resolve, reject) => {      return this.conn.exec(command, (err, stream) => {        if (err || !stream) {          reject(err)        } else {          stream            .on('close', (code, signal) => {              resolve({                success: true              })            })            .on('data', function (data) {
            })            .stderr.on('data', function (data) {              resolve({                success: false,                error: data.toString()              })            })        }      })    })  }解壓上傳的壓縮文件desc =   '*******************************************\n' +   '***       上傳文件成功，開(kāi)始解壓文件      ***\n' +   '*******************************************\n'  console.log(chalk.green(desc))  const zipRes = await sshCon    .execSsh(      `unzip -o ${sshConfig.catalog + '/' + fileName} -d ${sshConfig.catalog}`    )    .catch((e) => {})  if (!zipRes || !zipRes.success) {    console.error('----解壓文件失敗，請(qǐng)手動(dòng)解壓zip文件----')    console.error(`----錯(cuò)誤原因：${zipRes.error}----`)    return false  } else if (Config.deleteFile) {    desc =       '*******************************************\n' +       '***   解壓文件成功，開(kāi)始刪除上傳的壓縮包   ***\n' +       '*******************************************\n'    console.log(chalk.green(desc))刪除上傳的工程文件刪除對(duì)應(yīng)的壓縮包 desc =       '*******************************************\n' +       '***   解壓文件成功，開(kāi)始刪除上傳的壓縮包   ***\n' +       '*******************************************\n'    console.log(chalk.green(desc))    // 注意：rm -rf為危險(xiǎn)操作，請(qǐng)勿對(duì)此段代碼做其他非必須更改    const deleteZipRes = await sshCon      .execSsh(`rm -rf ${sshConfig.catalog + '/' + fileName}`)      .catch((e) => {})    if (!deleteZipRes || !deleteZipRes.success) {      console.log(chalk.pink('----刪除文件失敗，請(qǐng)手動(dòng)刪除zip文件----'))      console.log(chalk.red(`----錯(cuò)誤原因：${deleteZipRes.error}----`))      return false    }關(guān)閉ssh連接封裝關(guān)閉的服務(wù)器連接 // 結(jié)束連接  endConn () {    this.conn.end()    if (this.connAgent) {      this.connAgent.end()    }  }刪除本地的壓縮包文件封裝刪除本地的壓縮包 // 刪除本地文件  deleteLocalFile () {    return new Promise((resolve, reject) => {      fs.unlink(path.join(rootDir, '/', this.fileName), function (error) {        if (error) {          const desc =            '*******************************************\n' +            '***            本地文件刪除失敗          ***\n' +            '*******************************************\n'          console.log(chalk.yellow(desc))          reject(error)        } else {          const desc =            '*******************************************\n' +            '***              刪除成功               ***\n' +            '*******************************************\n'          console.log(chalk.blue(desc))          resolve({            success: true          })        }      })    })  }腳本命令的配置在項(xiàng)目的package.json中配置命令"ssh": "node ./build/ssh.js"完整的實(shí)現(xiàn)ssh流程// SSH連接，上傳，解壓，刪除等相關(guān)操作async function sshUpload (sshConfig, fileName) {  const sshCon = new SSH(sshConfig)  const sshRes = await sshCon.connectServer().catch((e) => {    console.error(e)  })  if (!sshRes || !sshRes.success) {    const desc =       '*******************************************\n' +       '*** ssh連接失敗 ***\n' +       '*******************************************\n'    console.log(chalk.red(desc))    return false  }  let desc =   '*******************************************\n' +   '***      連接服務(wù)器成功，開(kāi)始上傳文件     ***\n' +   '*******************************************\n'  console.log(chalk.green(desc))  // 判斷文件是否存在，如果不存在則進(jìn)行創(chuàng)建文件夾  await sshCon.execSsh(    `    if [[ ! -d ${sshConfig.catalog} ]]; then     mkdir -p ${sshConfig.catalog}    fi    `  )  const uploadRes = await sshCon    .uploadFile({      localPath: path.join(rootDir, '/', fileName),      remotePath: sshConfig.catalog + '/' + fileName    })    .catch((e) => {      console.error(e)    })
  if (!uploadRes || !uploadRes.success) {    console.error('----上傳文件失敗，請(qǐng)重新上傳----')    return false  }  desc =   '*******************************************\n' +   '***       上傳文件成功，開(kāi)始解壓文件      ***\n' +   '*******************************************\n'  console.log(chalk.green(desc))  const zipRes = await sshCon    .execSsh(      `unzip -o ${sshConfig.catalog + '/' + fileName} -d ${sshConfig.catalog}`    )    .catch((e) => {})  if (!zipRes || !zipRes.success) {    console.error('----解壓文件失敗，請(qǐng)手動(dòng)解壓zip文件----')    console.error(`----錯(cuò)誤原因：${zipRes.error}----`)    return false  } else if (Config.deleteFile) {    desc =       '*******************************************\n' +       '***   解壓文件成功，開(kāi)始刪除上傳的壓縮包   ***\n' +       '*******************************************\n'    console.log(chalk.green(desc))    // 注意：rm -rf為危險(xiǎn)操作，請(qǐng)勿對(duì)此段代碼做其他非必須更改    const deleteZipRes = await sshCon      .execSsh(`rm -rf ${sshConfig.catalog + '/' + fileName}`)      .catch((e) => {})    if (!deleteZipRes || !deleteZipRes.success) {      console.log(chalk.pink('----刪除文件失敗，請(qǐng)手動(dòng)刪除zip文件----'))      console.log(chalk.red(`----錯(cuò)誤原因：${deleteZipRes.error}----`))      return false    }  }  // 結(jié)束ssh連接  sshCon.endConn()  return true}實(shí)際運(yùn)行腳本// 執(zhí)行前端部署;(async () => {  const file = new File()  let desc =    '*******************************************\n' +    '***              開(kāi)始編譯               ***\n' +    '*******************************************\n'  if (Config.isNeedBuild) {    console.log(chalk.green(desc))    // 打包文件    const buildRes = await file      .buildProject()      .catch((e) => {        console.error(e)      })    if (!buildRes || !buildRes.success) {      desc =            '*******************************************\n' +            '***          打包出錯(cuò)，請(qǐng)檢查錯(cuò)誤         ***\n' +            '*******************************************\n'      console.log(chalk.red(desc))      return false    }    console.log(chalk.blue(buildRes.stdout))    desc =          '*******************************************\n' +          '***              編譯成功               ***\n' +          '*******************************************\n'    console.log(chalk.green(desc))  }  // 壓縮文件  const res = await file    .zipFile(path.join(rootDir, '/', Config.buildDist))    .catch(() => {})  if (!res || !res.success) return false  desc =   '*******************************************\n' +   '***              開(kāi)始部署               ***\n' +   '*******************************************\n'  console.log(chalk.green(desc))
  const bol = await sshUpload(Config.publishEnv, file.fileName)  if (bol) {    desc =     '\n******************************************\n' +     '***              部署成功              ***\n' +     '******************************************\n'    console.log(chalk.green(desc))    file.stopProgress()  } else {    process.exit(1)  }})()
完整的ssh.js代碼const { exec } = require('child_process')const path = require('path')const JSZIP = require('jszip')const fs = require('fs')const Client = require('ssh2').Clientconst Config = require('./config.js')const chalk = require('chalk')const zip = new JSZIP()// 前端打包文件的目錄const rootDir = path.resolve(__dirname, '..')
/** * ssh連接 */class SSH {  constructor ({ host, port, username, password, privateKey }) {    this.server = {      host,      port,      username,      password,      privateKey    }    this.conn = new Client()  }
  // 連接服務(wù)器  connectServer () {    return new Promise((resolve, reject) => {      const conn = this.conn      conn        .on('ready', () => {          resolve({            success: true          })        })        .on('error', (err) => {          reject(err)        })        .on('end', () => {          const desc =            '*******************************************\n' +            '***           SSH連接已結(jié)束        ***\n' +            '*******************************************\n'          console.log(chalk.green(desc))        })        .on('close', () => {          const desc =            '*******************************************\n' +            '***           SSH連接已關(guān)閉        ***\n' +            '*******************************************\n'          console.log(chalk.green(desc))        })        .connect(this.server)    })  }
  // 上傳文件  uploadFile ({ localPath, remotePath }) {    return new Promise((resolve, reject) => {      return this.conn.sftp((err, sftp) => {        if (err) {          reject(err)        } else {          sftp.fastPut(localPath, remotePath, (err, result) => {            if (err) {              reject(err)            }            resolve({              success: true,              result            })          })        }      })    })  }
  // 執(zhí)行ssh命令  execSsh (command) {    return new Promise((resolve, reject) => {      return this.conn.exec(command, (err, stream) => {        if (err || !stream) {          reject(err)        } else {          stream            .on('close', (code, signal) => {              resolve({                success: true              })            })            .on('data', function (data) {
            })            .stderr.on('data', function (data) {              resolve({                success: false,                error: data.toString()              })            })        }      })    })  }
  // 結(jié)束連接  endConn () {    this.conn.end()    if (this.connAgent) {      this.connAgent.end()    }  }}
/* * 本地操作 * */class File {  constructor () {    this.fileName = this.formateName()  }
  // 刪除本地文件  deleteLocalFile () {    return new Promise((resolve, reject) => {      fs.unlink(path.join(rootDir, '/', this.fileName), function (error) {        if (error) {          const desc =            '*******************************************\n' +            '***            本地文件刪除失敗          ***\n' +            '*******************************************\n'          console.log(chalk.yellow(desc))          reject(error)        } else {          const desc =            '*******************************************\n' +            '***              刪除成功               ***\n' +            '*******************************************\n'          console.log(chalk.blue(desc))          resolve({            success: true          })        }      })    })  }
  // 讀取文件  readDir (obj, nowPath) {    const files = fs.readdirSync(nowPath) // 讀取目錄中的所有文件及文件夾（同步操作）    files.forEach((fileName, index) => {      // 遍歷檢測(cè)目錄中的文件      // console.log(fileName, index) // 打印當(dāng)前讀取的文件名      const fillPath = nowPath + '/' + fileName      const file = fs.statSync(fillPath) // 獲取一個(gè)文件的屬性      if (file.isDirectory()) {        // 如果是目錄的話，繼續(xù)查詢        const dirlist = zip.folder(fileName) // 壓縮對(duì)象中生成該目錄        this.readDir(dirlist, fillPath) // 重新檢索目錄文件      } else {        obj.file(fileName, fs.readFileSync(fillPath)) // 壓縮目錄添加文件      }    })  }
  // 壓縮文件夾下的所有文件  zipFile (filePath) {    return new Promise((resolve, reject) => {      let desc =         '*******************************************\n' +         '***                正在壓縮              ***\n' +         '*******************************************\n'      console.log(chalk.blue(desc))      this.readDir(zip, filePath)      zip        .generateAsync({          // 設(shè)置壓縮格式，開(kāi)始打包          type: 'nodebuffer', // nodejs用          compression: 'DEFLATE', // 壓縮算法          compressionOptions: {            // 壓縮級(jí)別            level: 9          }        })        .then(content => {          fs.writeFileSync(            path.join(rootDir, '/', this.fileName),            content,            'utf-8')          desc =            '*******************************************\n' +            '***                壓縮成功              ***\n' +            '*******************************************\n'          console.log(chalk.green(desc))          resolve({            success: true          })        }).catch(err => {          console.log(chalk.red(err))          reject(err)        })    })  }
  // 打包本地前端文件  buildProject () {    return new Promise((resolve, reject) => {      exec(Config.buildCommand, async (error, stdout, stderr) => {        if (error) {          console.error(error)          reject(error)        } else if (stdout) {          resolve({            stdout,            success: true          })        } else {          console.error(stderr)          reject(stderr)        }      })    })  }
  // 停止程序之前需刪除本地壓縮包文件  stopProgress () {    this.deleteLocalFile()      .catch((e) => {        console.log(chalk.red('----刪除本地文件失敗，請(qǐng)手動(dòng)刪除----'))        console.log(chalk.red(e))        process.exit(1)      })      .then(() => {        const desc =           '*******************************************\n' +           '***          已刪除本地壓縮包文件        ***\n' +           '*******************************************\n'        console.log(chalk.green(desc))        process.exitCode = 0      })  }
  // 格式化命名文件名稱  formateName () {    // 壓縮包的名字    const date = new Date()    const year = date.getFullYear()    const month = date.getMonth() + 1    const day = date.getDate()    const timeStr = `${year}_${month}_${day}`    return `${Config.buildDist}-${timeStr}-${Math.random()      .toString(16)      .slice(2)}.zip`  }}
// SSH連接，上傳，解壓，刪除等相關(guān)操作async function sshUpload (sshConfig, fileName) {  const sshCon = new SSH(sshConfig)  const sshRes = await sshCon.connectServer().catch((e) => {    console.error(e)  })  if (!sshRes || !sshRes.success) {    const desc =       '*******************************************\n' +       '*** ssh連接失敗 ***\n' +       '*******************************************\n'    console.log(chalk.red(desc))    return false  }  let desc =   '*******************************************\n' +   '***      連接服務(wù)器成功，開(kāi)始上傳文件     ***\n' +   '*******************************************\n'  console.log(chalk.green(desc))  // 判斷文件是否存在，如果不存在則進(jìn)行創(chuàng)建文件夾  await sshCon.execSsh(    `    if [[ ! -d ${sshConfig.catalog} ]]; then     mkdir -p ${sshConfig.catalog}    fi    `)  const uploadRes = await sshCon    .uploadFile({      localPath: path.join(rootDir, '/', fileName),      remotePath: sshConfig.catalog + '/' + fileName    })    .catch((e) => {      console.error(e)    })
  if (!uploadRes || !uploadRes.success) {    console.error('----上傳文件失敗，請(qǐng)重新上傳----')    return false  }  desc =   '*******************************************\n' +   '***       上傳文件成功，開(kāi)始解壓文件      ***\n' +   '*******************************************\n'  console.log(chalk.green(desc))  const zipRes = await sshCon    .execSsh(      `unzip -o ${sshConfig.catalog + '/' + fileName} -d ${sshConfig.catalog}`)    .catch((e) => {})  if (!zipRes || !zipRes.success) {    console.error('----解壓文件失敗，請(qǐng)手動(dòng)解壓zip文件----')    console.error(`----錯(cuò)誤原因：${zipRes.error}----`)    return false  } else if (Config.deleteFile) {    desc =       '*******************************************\n' +       '***   解壓文件成功，開(kāi)始刪除上傳的壓縮包   ***\n' +       '*******************************************\n'    console.log(chalk.green(desc))    // 注意：rm -rf為危險(xiǎn)操作，請(qǐng)勿對(duì)此段代碼做其他非必須更改    const deleteZipRes = await sshCon      .execSsh(`rm -rf ${sshConfig.catalog + '/' + fileName}`)      .catch((e) => {})    if (!deleteZipRes || !deleteZipRes.success) {      console.log(chalk.pink('----刪除文件失敗，請(qǐng)手動(dòng)刪除zip文件----'))      console.log(chalk.red(`----錯(cuò)誤原因：${deleteZipRes.error}----`))      return false    }  }  // 結(jié)束ssh連接  sshCon.endConn()  return true}// 執(zhí)行前端部署;(async () => {  const file = new File()  let desc =    '*******************************************\n' +    '***              開(kāi)始編譯               ***\n' +    '*******************************************\n'  if (Config.isNeedBuild) {    console.log(chalk.green(desc))    // 打包文件    const buildRes = await file      .buildProject()      .catch((e) => {        console.error(e)      })    if (!buildRes || !buildRes.success) {      desc =            '*******************************************\n' +            '***          打包出錯(cuò)，請(qǐng)檢查錯(cuò)誤         ***\n' +            '*******************************************\n'      console.log(chalk.red(desc))      return false    }    console.log(chalk.blue(buildRes.stdout))    desc =          '*******************************************\n' +          '***              編譯成功               ***\n' +          '*******************************************\n'    console.log(chalk.green(desc))  }  // 壓縮文件  const res = await file    .zipFile(path.join(rootDir, '/', Config.buildDist))    .catch(() => {})  if (!res || !res.success) return false  desc =   '*******************************************\n' +   '***              開(kāi)始部署               ***\n' +   '*******************************************\n'  console.log(chalk.green(desc))
  const bol = await sshUpload(Config.publishEnv, file.fileName)  if (bol) {    desc =     '\n******************************************\n' +     '***              部署成功              ***\n' +     '******************************************\n'    console.log(chalk.green(desc))    file.stopProgress()  } else {    process.exit(1)  }})()