前言：
一般来说，我们前端是不需要关心部署的事情的，只需要把打包后的文件直接丢给后台去部署就可以了。但是呢，如果频繁修改一点东西就要叫后台进行部署，这样后台会很烦（毕竟人家还有其他工作嘛），我们也会很不好意思。
或许有些公司会给前端配置可视化操作服务器文件的软件（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 if
let 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); // 使这个类继承EventEmitter
const 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,
// 配置部署应用包时的基本 URL
publicPath: 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 自动部署你的项目(实战)