实现前端项目自动化部署（webpack+nodejs）

前言：
一般来说，我们前端是不需要关心部署的事情的，只需要把打包后的文件直接丢给后台去部署就可以了。但是呢，如果频繁修改一点东西就要叫后台进行部署，这样后台会很烦（毕竟人家还有其他工作嘛），我们也会很不好意思。
或许有些公司会给前端配置可视化操作服务器文件的软件（FTP客户端），这时我们就可以打包后自己到服务器上部署了，如果不同环境需要部署到不同服务器，此时我们又需要区分打包再手动上传到服务器上。
这时我们就会想，有没有直接一句命令就能自动化部署到不同服务器上，根本不需要打开软件来手动上传的？？？
答案：必须有啊，接下来看看如何进行操作，一劳永逸~~

一、webpack + Nodejs实现前端自动部署 ——完整版（法一）

这种方式就是完全由我们前端工程师来实现的啦，通过写nodejs实现服务器操作，结合webpack打包完成自动部署。

1、首先我们用nodejs来封装一个能操作远程服务器的工具库

文件命名为：serverLib.js

/*** 该文件封装了对远程服务器的操作*/const util = require('util');const events = require('events');const { Client } = require('ssh2'); // ssh2模块需要使用npm安装const fs = require('fs');const path = require('path');/*** 描述：连接远程电脑* 参数：server 远程电脑凭证；then 回调函数* 回调：then(conn) 连接远程的client对象*/function Connect(server, then) {const conn = new Client();conn.on('ready', () => {then(conn);}).on('error', (err) => {// console.log("connect error!");}).on('end', () => {// console.log("connect end!");}).on('close', (had_error) => {// console.log("connect close");}).connect(server);}/*** 描述：运行shell命令* 参数：server 远程电脑凭证；cmd 执行的命令；then 回调函数* 回调：then(err, data) ： data 运行命令之后的返回数据信息*/function Shell(server, cmd, then) {Connect(server, (conn) => {conn.shell((err, stream) => {if (err) {then(err);} else { // end of iflet buf = '';stream.on('close', () => {conn.end();then(err, buf);}).on('data', (data) => {buf += data;}).stderr.on('data', (data) => {console.log(`stderr: ${data}`);});stream.end(cmd);}});});}/*** 描述：上传文件* 参数：server 远程电脑凭证；localPath 本地路径；remotePath 远程路径；then 回调函数* 回调：then(err, result)*/function UploadFile(server, localPath, remotePath, then) {Connect(server, (conn) => {conn.sftp((err, sftp) => {if (err) {then(err);} else {sftp.fastPut(localPath, remotePath, (err, result) => {conn.end();then(err, result);});}});});}/*** 描述：下载文件* 参数：server 远程电脑凭证；remotePath 远程路径；localPath 本地路径；then 回调函数* 回调：then(err, result)*/function DownloadFile(server, remotePath, localPath, then) {Connect(server, (conn) => {conn.sftp((err, sftp) => {if (err) {then(err);} else {sftp.fastGet(remotePath, localPath, (err, result) => {if (err) {then(err);} else {conn.end();then(err, result);}});}});});}/*** 描述：获取远程文件路径下文件列表信息* 参数：server 远程电脑凭证；*       remotePath 远程路径；*       isFile 是否是获取文件，true获取文件信息，false获取目录信息；*       then 回调函数* 回调：then(err, dirs) ： dir, 获取的列表信息*/function GetFileOrDirList(server, remotePath, isFile, then) {const cmd = `find ${remotePath} -type ${isFile == true ? 'f' : 'd'}\r\nexit\r\n`;Shell(server, cmd, (err, data) => {let arr = [];const remoteFile = [];arr = data.split('\r\n');arr.forEach((dir) => {if (dir.indexOf(remotePath) == 0) {remoteFile.push(dir);}});then(err, remoteFile);});}/*** 描述：控制上传或者下载一个一个的执行*/function Control() {events.EventEmitter.call(this);}util.inherits(Control, events.EventEmitter); // 使这个类继承EventEmitterconst control = new Control();control.on('donext', (todos, then) => {if (todos.length > 0) {const func = todos.shift();func((err, result) => {if (err) {throw err;then(err);} else {control.emit('donext', todos, then);}});} else {then(null);}});/*** 描述：下载目录到本地* 参数：server 远程电脑凭证；*       remotePath 远程路径；*       localDir 本地路径，*       then 回调函数* 回调：then(err)*/function DownloadDir(server, remoteDir, localDir, then) {GetFileOrDirList(server, remoteDir, false, (err, dirs) => {if (err) {throw err;} else {GetFileOrDirList(server, remoteDir, true, (err, files) => {if (err) {throw err;} else {dirs.shift();dirs.forEach((dir) => {const tmpDir = path.join(localDir, dir.slice(remoteDir.length + 1)).replace(/[//]\g/, '\\');// 创建目录fs.mkdirSync(tmpDir);});const todoFiles = [];files.forEach((file) => {const tmpPath = path.join(localDir, file.slice(remoteDir.length + 1)).replace(/[//]\g/, '\\');todoFiles.push((done) => {DownloadFile(server, file, tmpPath, done);console.log(`downloading the ${file}`);});// end of todoFiles.push});control.emit('donext', todoFiles, then);}});}});}/*** 描述：获取windows上的文件目录以及文件列表信息* 参数：destDir 本地路径，*       dirs 目录列表*       files 文件列表*/function GetFileAndDirList(localDir, dirs, files) {const dir = fs.readdirSync(localDir);for (let i = 0; i < dir.length; i++) {const p = path.join(localDir, dir[i]);const stat = fs.statSync(p);if (stat.isDirectory()) {dirs.push(p);GetFileAndDirList(p, dirs, files);} else {files.push(p);}}}/*** 描述：上传文件夹到远程目录* 参数：server 远程电脑凭证；*       localDir 本地路径，*       remoteDir 远程路径；*       then 回调函数* 回调：then(err)*/function UploadDir(server, localDir, remoteDir, then) {const dirs = [];const files = [];GetFileAndDirList(localDir, dirs, files);// 删除远程指定目录下的所有文件const deleteDir = [(done) => {const cmd = `rm -rf ${remoteDir}* \r\nexit\r\n`;console.log(cmd);Shell(server, cmd, done);}];// 创建远程目录const todoDir = [];dirs.forEach((dir) => {todoDir.push((done) => {const to = path.join(remoteDir, dir.slice(localDir.length)).replace(/[\\]/g, '/');const cmd = `mkdir -p ${to}\r\nexit\r\n`;console.log(cmd);Shell(server, cmd, done);});// end of push});// 上传文件const todoFile = [];files.forEach((file) => {todoFile.push((done) => {const to = path.join(remoteDir, file.slice(localDir.length)).replace(/[\\]/g, '/');console.log(`upload ${to}`);UploadFile(server, file, to, done);});});control.emit('donext', deleteDir, (err) => {if (err) {throw err;} else {control.emit('donext', todoDir, (err) => {if (err) {throw err;} else {control.emit('donext', todoFile, then);}});}});}exports.Shell = Shell;exports.UploadFile = UploadFile;exports.DownloadFile = DownloadFile;exports.GetFileOrDirList = GetFileOrDirList;exports.DownloadDir = DownloadDir;exports.UploadDir = UploadDir;

2、封装一个webpack插件

该插件实现webpack打包后将打包目录文件上传到服务器上。
文件命名为：uploadFileWebPackPlugin.js

/*** 上传打包后的文件到服务器上的webpack插件*/const { spawn } = require('child_process');const uploadDir = require('./serverLib').UploadDir;class UploadFileWebPackPlugin {constructor(options) {this.options = options;}apply(compiler) {// 定义在打包后执行这个webpack插件// 需要用到对应的钩子函数compiler.hooks.done.tap('upload-file-plugin', async (status) => {// console.log('this.options: ', this.options);this.deploy();});}deploy() {const chmod = spawn('chmod', ['-R', '777', this.options.buildFolder]);chmod.on('exit', (code, signal) => {console.log('\n服务器授权成功，开始自动化部署~~\n');uploadDir(this.options.serverConfig,this.options.buildFolder,this.options.servePath,(err) => {if (err) throw err;console.log('\n自动化部署成功~\n');},);});}}module.exports = UploadFileWebPackPlugin;

至于webpack插件如何编写，语法是什么？下面推荐几篇文章大家参考下。
怎样编写一个简单的webpack插件
Webpack原理-编写Plugin
webpack官网-编写自定义插件

3、在webpack配置文件的plugins配置项中引入上面自定义的插件

这里我们以vue-cli脚手架来举例，其他项目的引入方式雷同。
这里需要根据我们设定的运行命令参数，和远程服务器的信息进行对应修改即可。
对上面的截图进行代码更正，可根据实际测试结果进行修改。

// vue.config.js文件
/*** 自动化部署代码引入  start*/
// 引入自定义的上传文件webpack插件
const UploadFileWebPackPlugin = require('./webpack-plugin/uploadFileWebPackPlugin');// 获取运行命令的参数
const deployArgv = process.argv.pop();
// 通过参数判断是否要执行上传插件
let isNeedUpload = false;
let uploadServerConfig = {};
// 根据参数设置不同服务器信息
if (deployArgv === '-95') {isNeedUpload = true;uploadServerConfig = {host: 'xxx.xxx.xxx.95', // 服务器ip地址port: 55314, // 服务器端口号username: 'xxxxx', // 登录服务器的用户名password: 'xxxxxxx', // 登录服务器的密码};
} else if (deployArgv === '-114') {isNeedUpload = true;uploadServerConfig = {host: 'xxx.xxx.xxx.114',port: 55314,username: 'xxxxx',password: 'xxxxxxxxx',};
}
/*** 自动化部署代码引入  end*/
const webpackConfig = {configureWebpack: {// plugin配置项plugins: [// // 在npm run build的时候才执行这个插件（自动化部署插件）// ---- 尝试过这个方法使用插件，但是在不加参数的时候就会报错说webpack插件定义不正确的情况// (process.env.NODE_ENV === 'production' && isNeedUpload)//   && new UploadFileWebPackPlugin({//       // 服务器的配置信息//       serverConfig: uploadServerConfig,//       // 本地打包输出的文件夹路径//       buildFolder: 'dist/',//       // 上传到服务器上的路径//       servePath: '/home/sendi/fe/winne-test/',//   }),],},// 暂时关闭eslint校验, 方便测试devServer: {overlay: {warining: true,errors: true,},},lintOnSave: false,// 配置部署应用包时的基本 URLpublicPath: process.env.NODE_ENV === 'production'? '/winne-test/': '/',
};// webpack插件根据环境判断来使用改为这个方式（在加参数或者不加参数的情况都能正确运行）
if ((process.env.NODE_ENV === 'production' && isNeedUpload)) {webpackConfig.configureWebpack.plugins.push(new UploadFileWebPackPlugin({// 服务器的配置信息serverConfig: uploadServerConfig,// 本地打包输出的文件夹路径buildFolder: 'dist/',// 上传到服务器上的路径servePath: '/home/sendi/fe/winne-test/',}),);
}module.exports = webpackConfig;

4、运行打包命令，实现前端项目的自动化部署

1）、没用到自动化部署时，我们这样打包项目
使用npm打包：npm run build
使用yarn打包：yarn build

2）、需要自动化部署时，我们这样打包项目（打包命令后面加参数，识别不同参数部署到不同服务器）
使用npm打包：npm run build -- -95 或者 npm run build -- -114 （注意在参数前有两个中划线）
使用yarn打包：yarn build -95 或者 yarn build -114

最后

如果要更方便的使用，可以把自动部署功能代码直接封装成npm包发布到npm上，这样以后用到时可以直接使用npm下载，就可以使用啦。

二、jenkins实现前端自动部署（法二）

这个方法一般来说都是后端来配置的，此处不展开，感兴趣的伙伴们，自行百度解决，下面推荐几篇文章。

使用jenkins进行前端项目自动部署
一套基础自动化部署搭建过程(vue实战防坑版)
学会使用 Jenkins 自动部署你的项目(实战)