关于自动化部署(gulp)

我刚进来公司的时候，不懂部署，后来自学了一下nginx，懂得基本的手动部署和一些与部署有关的webpack配置与loader。
而现在大佬用的一套gulp一键部署我感觉很方便，在这记录下来。

甘雨(Kinty from Pixivic)

首先需要安装gulp与gulp-ssh

// package.json
// ...
"devDependencies": {
    "gulp": "^4.0.0",
    "gulp-ssh": "^0.7.0",
}

在目录创建 gulpfile.js 与 gulp.config.js

// gulpfile.config.js
/**
* 远程服务器的配置文件
* "gulp": "4.0.0",
* "gulp-ssh": "0.7.0",
* https://www.jianshu.com/p/c30ff8592421
*
* root/password
*/
const data = new Date()
const time = data.getFullYear() + '-' + (data.getMonth() + 1) + '-' + data.getDate() + '-' + data.getHours() + '-' + data.getMinutes()
// 项目存放路径,如果是docker,应存放在docker的数据卷
const remoteProjectPath = '/usr/local/webserver/nginx/'
const projectName = 'dist' // 远程项目的名称，相当于dist
const historyProjectName = '2020-11-6-14-16' // 这个在回滚上一个版本的时候需要手动修改，滚动的版本号，例如：2019-4-17-20

const gulpConfig = {
  devServerSShConfig: {
    uploadFile: './dist/**',
    sshConfig: {
      //   remotePath:'/root/nginx_szcg/website/zhifa/dist',
      remotePath: remoteProjectPath + projectName, // 远程网站地址,会自动新建projectName文件夹
      ssh: { // 外网测试
        host: '192.168.1.145',
        port: 22,
        username: 'root',
        password: 'password'
      },
      commands: [
        // 删除现有文件
        // `rm -rf /root/nginx_szcg/website/zhifa/ dist` ( 1.删除项目目录 )
        'rm -rf ' + remoteProjectPath + projectName + '/*'
      ],
      backups: [
        // cd /root/nginx_szcg/website/zhifa/dist/  ( 2.进入项目目录 )
        'cd ' + remoteProjectPath + projectName + '/',
        // tar -zcvf /root/nginx_szcg/website/zhifa/dist-copy/2019-4-17-3-59.tar.gz  ( 3.压缩备份，不会自动创建备份目录 )
        'tar -zcvf ' + remoteProjectPath + projectName + '-copy/' + time + '.tar.gz *'
      ],
      rollback: [
        // tar -zxvf /root/nginx_szcg/website/zhifa/dist-copy/2019-4-17-3-59.tar.gz -C /root/nginx_szcg/website/zhifa/dist/（4.解压恢复）
        'tar -zxvf ' + remoteProjectPath + projectName + '-copy/' + historyProjectName + '.tar.gz -C ' + remoteProjectPath + projectName + '/'
      ],
      // 只有修改nginx服务器的配置文件才需要重启nginx
      reload: [
        // /usr/local/webserver/nginx/sbin/nginx -s stop ( nginx -s stop  OR  nginx -s reload OR nginx -s start)
        // remoteNginxPath + 'sbin/nginx -s stop',

        // /usr/local/webserver/nginx/sbin/nginx -c /usr/local/webserver/nginx/conf/nginx.conf
        // remoteNginxPath + 'sbin/nginx -c /usr/local/nginx/conf/nginx.conf'

        'docker restart nginx' // 重启服务器 etc/nginx/nginx.conf
      ]
    }

  },

  proServerSShConfig: {

  }
}

module.exports = gulpConfig

// gulpfile.js
// 在Node中不能使用ES6语法的模块化
const gulpConfig = require('./gulpfile.config.js')

const gulp = require('gulp')
const GulpSSH = require('gulp-ssh')
// 需要上传到服务器的路径
const config = gulpConfig.devServerSShConfig.sshConfig
// const config = systemConfig.proServerSShConfig.sshConfig;

const gulpSSH = new GulpSSH({
  ignoreErrors: false,
  sshConfig: config.ssh
})

/**
 * 1.备份：tar -zcvf  备份后文件的存储路径和名称  这里*代表压缩该命令所在文件夹下的所有内容
 *   备份时最好要进入到指定的文件夹在开始压缩，这样压缩后的文件解压不会带路劲目录
 *
 *   备份的文件夹必须已经是存在，才能进行备份
 */
gulp.task('execSSHBackup', () => {
  console.log('备份服务器上现有文件...')
  return gulpSSH.shell(config.backups, { filePath: 'log/commands-backup.log' })
    .pipe(gulp.dest('logs'))
})

/**
 * 2.解压: tar -zxvf  将这个文件夹下的压缩文件  解压到这个目录下
 * 执行这个脚本需要手动修改config/index 里面的historyProjectName属性，例如：2019-4-17-20，指定回滚到这个版本
*/
gulp.task('execSSHRollBack', () => {
  console.log('回滚上一个版本...')
  return gulpSSH.shell(config.rollback, { filePath: 'log/commands-unZip.log' })
    .pipe(gulp.dest('logs')) // 会自动新建该目录
})

gulp.task('reloadNginx', () => {
  console.log('重启服务器...')
  return gulpSSH.shell(config.reload, { filePath: 'log/commands-reloadNginx.log' })
    .pipe(gulp.dest('logs'))
})

/**
 *上传前先删除服务器上现有文件...
*/
gulp.task('execSSHDelete', () => {
  console.log('删除服务器上现有文件...')
  return gulpSSH.shell(config.commands, { filePath: 'log/commands-delete.log' })
    .pipe(gulp.dest('logs'))
})

/**
 * publish 发布代码
 */
gulp.task('publish', () => {
  console.log('开始上传文件到服务器...')
  return gulp.src([gulpConfig.devServerSShConfig.uploadFile])
    .pipe(gulpSSH.dest(config.remotePath))
})

/**
 * gulp自动化部署。gulp.series：按照顺序执行
 * 删除，发布，备份，重启
 * 'execSSHDelete', 'publish', 'execSSHBackup', 'reloadNginx'
 */
gulp.task('default', gulp.series('execSSHDelete', 'publish', 'execSSHBackup', 'reloadNginx', (done) => {
  console.log('发布完毕...', 'http://' + config.ssh.host + ':9090')
  // Did you forget to signal async completion? 报错后需要调用done,以结束task
  done() // 在不使用文件流的情况下，向task的函数里传入一个名叫done的回调函数，以结束task
}))

使用:控制台直接输入 gulp 回车就会执行脚本