前言

       在前端工程化中，前端开发人员终于在一直的进步本人的位置，再也不是简略的切图仔了。当然，随之而来的就是咱们的工作内容变得越来越多，变得越来越繁琐。不仅要一直的学习新的前端技术内容，而且还要独立保护前端的部署工作。因而，如何能疾速的进行工程化内容的部署，就是一件十分有价值的事件。

疾速部署

       对于前端的部署来说，其实次要就是将编译后的工程化我的项目（以vue来说就是将npm run build的dist文件夹）间接部署到对应的服务器的指定目录下即可，其余的内容咱们临时不在此处做过多的解说。

       因而，目前个别会应用SFTP工具（如：FileZilla：https://www.filezilla.cn/，Cyberduck：https://cyberduck.io/）来上传构建好的前端代码到服务器。这种形式尽管也是比拟快的，然而每次要本人进行打包编译=》压缩=》关上对应的工具=》找到对应的门路，手动的将相干的文件上传到对应的服务中。并且为了部署到不同的环境中（个别我的项目开发包含：dev开发环境、test测试环境、uat测试环境、pro测试环境等）还要反复的进行屡次的重复性操作。这种形式不仅繁琐，而且还升高了咱们程序员的身份。所以咱们须要用自动化部署来代替手动 ，这样一方面能够进步部署效率，另一方面开发人员能够少做一些他们认为的无用功。

筹备工作

       话不多说，说干就干。首先，咱们先梳理一下个别的部署流程，次要是先将本地的工程化代码进行打包编译=>通过ssh登录到服务器=>将本地编译的代码上传到服务器指定的门路中，具体流程如下：

       因而，通过代码实现自动化部署脚本，次要须要实现如下，上面以vue我的项目来为工程项目来具体解说：

  1. 实现本地代码编译；可间接配置npm run build即可进行相干的打包
  2. 实现本地编译的代码压缩

3.通过ssh连贯近程服务器

  1. 查看对应的近程部署门路是否存在，不存在须要创立
  2. 上传本地的压缩包
  3. 解压上传的压缩包
  4. 删除上传的压缩包
  5. 敞开ssh连贯
  6. 删除本地的压缩包

具体实现

为了在可能实现以上的几个步骤，咱们须要引入一些依赖包，以此来进行相干步骤的操作和日志的打印输出
  • chalk：格式化输入日志的插件，能够通过配置不同的色彩来显示不同的日志打印。https://www.npmjs.com/package/chalk
  • child_process：nodejs的一个子过程模块，能够用来创立一个子过程，并执行一些工作，能够间接在js外面调用shell命令。http://nodejs.cn/api/child_process.html
  • jszip：一个轻量级的zip压缩库,用于压缩编译后的脚本。https://stuk.github.io/jszip/
  • ssh2：用于通过ssh来连贯近程服务器的插件。https://github.com/mscdex/ssh2

大抵流程如下：

根本配置

       为了可能将部署相干的内容，如服务器信息，部署的门路等内容进行对立的治理，以便进行将来的可视化配置。因而，在我的项目中创立一个独立的文件夹，对立治理部署相干的文件，并且建设一个config.js和ssh.js文件，别离用于配置相干的部署信息和具体的部署脚本。其中，config.js中的配置具体如下：

  const config = {  // 开发环境  dev: {    host: '',    username: 'root',    password: '',    catalog: '', // 前端文件压缩目录    port: 22, // 服务器ssh连贯端口号    privateKey: null // 私钥，私钥与明码二选一  },  // 测试环境  test: {    host: '', // 服务器ip地址或域名    username: 'root', // ssh登录用户    password: '', // 明码    catalog: '', // 前端文件压缩目录    port: 22, // 服务器ssh连贯端口号    privateKey: null // 私钥，私钥与明码二选一  },  // 线上环境  pro: {    host: '', // 服务器ip地址或域名    username: 'root', // ssh登录用户    password: '', // 明码，请勿将此明码上传至git服务器    catalog: '', // 前端文件压缩目录    port: 22, // 服务器ssh连贯端口号    privateKey: null // 私钥，私钥与明码二选一  }}module.exports = {  // publishEnv: pro,  publishEnv: config.pro, // 公布环境  buildDist: 'dist', // 前端文件打包之后的目录，默认dist  buildCommand: 'npm run build', // 打包前端文件的命令  readyTimeout: 20000, // ssh连贯超时工夫  deleteFile: true, // 是否删除线上上传的dist压缩包  isNeedBuild: true // s是否须要打包}

压缩打包内容

       压缩打包的内容，应用JSZIP插件，初始化一个const zip = new JSZIP()，而后在依照对应的语法进行具体的实现，其实现过程次要是通过的先递归读取相干的文件，而后退出到zip对象中，最初通过插件进行具体的压缩，最初写入到磁盘中。具体代码如下：
递归读取打包文件

 // 读取文件  readDir (obj, nowPath) {    const files = fs.readdirSync(nowPath) // 读取目录中的所有文件及文件夹（同步操作）    files.forEach((fileName, index) => {      // 遍历检测目录中的文件      // console.log(fileName, index) // 打印以后读取的文件名      const fillPath = nowPath + '/' + fileName      const file = fs.statSync(fillPath) // 获取一个文件的属性      if (file.isDirectory()) {        // 如果是目录的话，持续查问        const dirlist = zip.folder(fileName) // 压缩对象中生成该目录        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({          // 设置压缩格局，开始打包          type: 'nodebuffer', // nodejs用          compression: 'DEFLATE', // 压缩算法          compressionOptions: {            // 压缩级别            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来运行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服务器

通过ssh2的client来创立ssh连贯

 // 连贯服务器  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连贯已完结        ***\n' +            '*******************************************\n'          console.log(chalk.green(desc))        })        .on('close', () => {          const desc =            '*******************************************\n' +            '***           SSH连贯已敞开        ***\n' +            '*******************************************\n'          console.log(chalk.green(desc))        })        .connect(this.server)    })  }

上传压缩的工程文件

判断上传门路是否存在

// 判断文件是否存在，如果不存在则进行创立文件夹  await sshCon.execSsh(    `    if [[ ! -d ${sshConfig.catalog} ]]; then     mkdir -p ${sshConfig.catalog}    fi    `  )

通过client的sftp讲本地的压缩包上传到指定的服务器的对应地址

 // 上传文件  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            })          })        }      })    })  }

解压上传的工程文件

通过exec来执行ssh命令的

  // 执行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' +   '***       上传文件胜利，开始解压文件      ***\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('----解压文件失败，请手动解压zip文件----')    console.error(`----谬误起因：${zipRes.error}----`)    return false  } else if (Config.deleteFile) {    desc =       '*******************************************\n' +       '***   解压文件胜利，开始删除上传的压缩包   ***\n' +       '*******************************************\n'    console.log(chalk.green(desc))

删除上传的工程文件

删除对应的压缩包

 desc =       '*******************************************\n' +       '***   解压文件胜利，开始删除上传的压缩包   ***\n' +       '*******************************************\n'    console.log(chalk.green(desc))    // 留神：rm -rf为危险操作，请勿对此段代码做其余非必须更改    const deleteZipRes = await sshCon      .execSsh(`rm -rf ${sshConfig.catalog + '/' + fileName}`)      .catch((e) => {})    if (!deleteZipRes || !deleteZipRes.success) {      console.log(chalk.pink('----删除文件失败，请手动删除zip文件----'))      console.log(chalk.red(`----谬误起因：${deleteZipRes.error}----`))      return false    }

敞开ssh连贯

封装敞开的服务器连贯

 // 完结连贯  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          })        }      })    })  }

脚本命令的配置

在我的项目的package.json中配置命令

"ssh": "node ./build/ssh.js"

残缺的实现ssh流程

// SSH连贯，上传，解压，删除等相干操作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' +   '***      连贯服务器胜利，开始上传文件     ***\n' +   '*******************************************\n'  console.log(chalk.green(desc))  // 判断文件是否存在，如果不存在则进行创立文件夹  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('----上传文件失败，请从新上传----')    return false  }  desc =   '*******************************************\n' +   '***       上传文件胜利，开始解压文件      ***\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('----解压文件失败，请手动解压zip文件----')    console.error(`----谬误起因：${zipRes.error}----`)    return false  } else if (Config.deleteFile) {    desc =       '*******************************************\n' +       '***   解压文件胜利，开始删除上传的压缩包   ***\n' +       '*******************************************\n'    console.log(chalk.green(desc))    // 留神：rm -rf为危险操作，请勿对此段代码做其余非必须更改    const deleteZipRes = await sshCon      .execSsh(`rm -rf ${sshConfig.catalog + '/' + fileName}`)      .catch((e) => {})    if (!deleteZipRes || !deleteZipRes.success) {      console.log(chalk.pink('----删除文件失败，请手动删除zip文件----'))      console.log(chalk.red(`----谬误起因：${deleteZipRes.error}----`))      return false    }  }  // 完结ssh连贯  sshCon.endConn()  return true}

理论运行脚本

// 执行前端部署;(async () => {  const file = new File()  let desc =    '*******************************************\n' +    '***              开始编译               ***\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' +            '***          打包出错，请查看谬误         ***\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' +   '***              开始部署               ***\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()  }  // 连贯服务器  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连贯已完结        ***\n' +            '*******************************************\n'          console.log(chalk.green(desc))        })        .on('close', () => {          const desc =            '*******************************************\n' +            '***           SSH连贯已敞开        ***\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            })          })        }      })    })  }  // 执行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()              })            })        }      })    })  }  // 完结连贯  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) => {      // 遍历检测目录中的文件      // console.log(fileName, index) // 打印以后读取的文件名      const fillPath = nowPath + '/' + fileName      const file = fs.statSync(fillPath) // 获取一个文件的属性      if (file.isDirectory()) {        // 如果是目录的话，持续查问        const dirlist = zip.folder(fileName) // 压缩对象中生成该目录        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({          // 设置压缩格局，开始打包          type: 'nodebuffer', // nodejs用          compression: 'DEFLATE', // 压缩算法          compressionOptions: {            // 压缩级别            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('----删除本地文件失败，请手动删除----'))        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连贯，上传，解压，删除等相干操作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' +   '***      连贯服务器胜利，开始上传文件     ***\n' +   '*******************************************\n'  console.log(chalk.green(desc))  // 判断文件是否存在，如果不存在则进行创立文件夹  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('----上传文件失败，请从新上传----')    return false  }  desc =   '*******************************************\n' +   '***       上传文件胜利，开始解压文件      ***\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('----解压文件失败，请手动解压zip文件----')    console.error(`----谬误起因：${zipRes.error}----`)    return false  } else if (Config.deleteFile) {    desc =       '*******************************************\n' +       '***   解压文件胜利，开始删除上传的压缩包   ***\n' +       '*******************************************\n'    console.log(chalk.green(desc))    // 留神：rm -rf为危险操作，请勿对此段代码做其余非必须更改    const deleteZipRes = await sshCon      .execSsh(`rm -rf ${sshConfig.catalog + '/' + fileName}`)      .catch((e) => {})    if (!deleteZipRes || !deleteZipRes.success) {      console.log(chalk.pink('----删除文件失败，请手动删除zip文件----'))      console.log(chalk.red(`----谬误起因：${deleteZipRes.error}----`))      return false    }  }  // 完结ssh连贯  sshCon.endConn()  return true}// 执行前端部署;(async () => {  const file = new File()  let desc =    '*******************************************\n' +    '***              开始编译               ***\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' +            '***          打包出错，请查看谬误         ***\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' +   '***              开始部署               ***\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)  }})()