前端工程化中的自动化部署

前言

       在前端工程化中,前端开发人员终于在不断的提高自己的地位,再也不是简单的切图仔了。当然,随之而来的就是我们的工作内容变得越来越多,变得越来越繁琐。不仅要不断的学习新的前端技术内容,而且还要独立维护前端的部署工作。因此,如何能快速的进行工程化内容的部署,就是一件非常有价值的事情。

快速部署

       对于前端的部署来说,其实主要就是将编译后的工程化项目(以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. 删除本地的压缩包

具体实现

为了在能够实现以上的几个步骤,我们需要引入一些依赖包,以此来进行相关步骤的操作和日志的打印输出

大致流程如下

基本配置

       为了能够将部署相关的内容,如服务器信息,部署的路径等内容进行统一的管理,以便进行未来的可视化配置。因此,在项目中创建一个独立的文件夹,统一管理部署相关的文件,并且建立一个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').Client
const 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)
  }
})()

你可能感兴趣的:(前端工程化,打包,node.js,vue.js,ssh)