前端自动化部署_前端自动化部署工具

应用场景

通常情况下，项目需要部署上下通常采用下面几种方式
以Vue项目为例，打包之后

利用指令/工具，利用Scp命令行或FTP将dist目录中的文件上传至服务器Web环境根目录下。
利用git服务器，ssh进入web服务器 -> 执行git clone或git pull将项目克隆至服务器 -> 执行npm install -> 执行npm run build。
1
2

以上两种方式都不是最优解，第一种方式操作步骤繁琐；第二种服务器需要安装node&git环境，并且多了项目源码，浪费服务器资源

前端自动化部署

1、首先安装shelljs和ssh2-sftp-client

npm i shelljs ssh2-sftp-client --save-dev
1

• Shelljs是Node.js下的脚本语言解析器，具有丰富且强大的底层操作(Windows/Linux/OS X)权限
• ssh2-sftp-client是一个用于node.js的SFTP客户端，一个用于SSH2的包装程序（提供高级便利抽象）以及一个基于Promise的API

2、新建sftp和index文件

sftp.js

module.exports = {
  production: {
    sftp: {
      host: '****', // 测试环境
      username: '****', // ssh 用户名
      port: '****', // 端口
      password: '****' // ssh 密码
    },
    pathConfig: {
      remotePath: '/usr/local/cl-platform/tomcat/webapps/web/suizhen', // 操作开始文件夹 可以直接指向配置好的地址
      remoteBackupPath: '/usr/local/cl-platform/tomcat/webapps/web/suizhen_backup', // 备份的文件夹
      localPath: '../dist'
    }
  }
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

index.js

const config = require('./sftp.js')
const shell = require('shelljs')
let Client = require('ssh2-sftp-client')
const path = require('path')
let client = new Client()
const PUBLISH_VERSON = process.env.PUBLISH_VERSON
const { sftp, pathConfig } = config[PUBLISH_VERSON]
// 打包 npm run build
const compileDist = async () => {
  if (shell.exec(`npm run build`).code === 0) {
    console.log('打包成功')
  }
}

const connectSSh = async () => {
  try {
    await client.connect(sftp)
    // 删除备份文件,如果有
    if (await client.exists(pathConfig.remoteBackupPath)) {
      await client.rmdir(pathConfig.remoteBackupPath, true)
      console.log('删除备份文件成功')
    }
    // 重命名之前的文件作为备份文件
    if (await client.exists(pathConfig.remotePath)) {
      await client.rename(pathConfig.remotePath, pathConfig.remoteBackupPath)
      console.log('新的备份文件重命名成功')
    }
    // 上传本地文件
    await client.uploadDir(path.resolve(__dirname, pathConfig.localPath), pathConfig.remotePath)
    console.log('上传成功')
  } catch (err) {
    console.log(err)
  } finally {
    client.end()
  }
}
async function runTask () {
  await compileDist() // 打包完成
  await connectSSh() // 提交上传
}
runTask()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

如果需要 PUBLISH_VERSON，则按照如下设置，若不需要，直接把实例中PUBLISH_VERSON 删掉即可

3、package.json里面新增命令 自动打包上传文件
如果不需要切换不同路径的版本：

"publish": "node publish/index.js",
1

如果需要更新不同路径的版本：
需要安装 cross-env，npm install cross-env --save-dev

"publish:prod": "cross-env PUBLISH_VERSON=production node publish/index.js",
1

参考链接1
参考链接2
参考链接3