场景已经进入公司一段时间了。过程还是不着急。上次测试版的质量还是不能保证，总会或多或少出现问题。于是想到了之前公司的一个做法。就是在测试上线之前部署一个预览环境。测试上线之前，大家先在本地验证一下，然后再在预览环境中验证一遍。实施一旦有了想法，就必须将其付诸行动。首先用公司的一台测试服务器架设了一个单独的服务，使用nginx作为反向代理。然后部署前端代码。整个部署过程是：使用xshell连接服务器，然后使用xftp连接服务器，然后在本地构建项目，然后通过xftp将构建的文件上传到服务器。整个过程感觉有点麻烦。而且对于不熟悉shell工具的同学也不友好。有没有重复性工作？改进由于前端是万能的，所以我们的前端工作流程中不允许这样的重复操作。正好项目进度不是那么忙。所以我准备抓拍一个build来完成自动发布预览环境工具。完成这个工具，我们先梳理一下需要实现的功能：本地文件压缩功能链接远程服务器压缩包上传远程服务器远程服务器解压本地构建完成后的回调，你可能会说，你是笨蛋，你不会直接上传，还要压缩解压。这里使用压缩包传输一方面方便备份。我考虑的是上传到一个备份文件夹里，用的时候再从这个文件夹里拿出来，然后解压到顶层目录。测试的时候也可以直接让测试来到这个目录下进行压缩包。另一方面，我不想写递归。如果要上传的目录结构不确定，就少不了递归，递归，递归。恐怕我脑袋大了。本地文件压缩创建一个ftp.js文件，用于将本地构建后dist目录下的文件上传到服务器。这里主要使用archiver模块来实现压缩功能。使用归档器压缩本地文件：letoutput=fs.createWriteStream(__dirname+'/../dist/'+fileName);letarchive=archiver('zip');output.on('end',function(){console.log('数据已被耗尽');});output.on('error',function(err){console.log('压缩失败');throwerr;});output.on('close',function(){console.log('压缩成功');});archive.pipe(output);archive.file(__dirname+'/../dist/index.html',{name:'index.html''});archive.directory(__dirname+'/../dist/static/','static');archive.finalize();fileName是一个标记变量：letfileName='dist'+newDate().getTime()+'.zip';说到这里，其实也可以把git的branch或者tag信息放在这个stamp里面。使用相关的nodejs模块获取git仓库信息即可。有时间我再优化一波。链接到远程服务器并上传文件。ssh2模块主要用于实现与远程服务器的交互。连接到远程服务器：conn.on('ready',function(){console.log('connected!')}).on('end',function(){console.log('done')})。connect({host:'ip',port:端口号,username:'用户名',password:'密码'});上传文件:conn.sftp(function(err,sftp){if(err)throwerr;//上传文件测试sftp.fastPut(__dirname+'/../dist/'+fileName,'/usr/share/nginx/htmlBackup/'+fileName,{},(err,result)=>{if(err){console.log(err);}if(result)console.log(result);});});删除旧版本解压并部署新版本原来，使用ssh2shell命令实现这两个功能应该很简单。但是，也不是没有道理。麻烦。所以我想到了shell脚本。说实话，在这之前，我并不知道怎么玩shell脚本。但我可以学习它。于是，学了一波后，有如下html.sh文件：#!/bin/bash#arg1:dirname#arg2:zipname#deleteoldfiledeleteFile=$1sudochmod-R777/usr/share/nginx/$deleteFilesudorm-rf/usr/share/nginx/$deleteFile/*#解压文件unzipFile=$2sudounzip-o/usr/share/nginx/htmlBackup/$unzipFile-d/usr/share/nginx/$deleteFile#exit其实shell脚本并不太复杂。大概一个上午就写了这几行。服务器权限设置有点严格，所以先用chmod给旧文件设置权限。我比较懒用777。然后，rm删除旧文件，并提取zip存档。其中$1和$2是传递给调用此shell的参数。好了，说了这么多，shell怎么用。当然，我们还是要回到ssh2。代码如下：//调用远程构建shellconn.exec('/usr/share/nginx/html.shhtml'+fileName,function(err,stream){if(err)throwerr;stream.on('close',function(code,signal){console.log('Stream::close::code:'+code+',signal:'+signal);conn.end();}).on('data',function(data){letdataStr=(''+data).trim();//列出上传的压缩包if(dataStr.length>5){console.log('STDOUT:'+(''+数据).trim());}}).stderr.on('data',function(data){console.log('STDERR:'+(''+data).trim());});流.on('end',function(){console.log('预览环境搭建完成');});});新功能基本完成。构建回调先找到vue-cli构建完成后的位置，在build/build.js配置中大概40行。然后将我们上面写的函数导出到模块中，再将ftp.js导入到build.js中。letftp=require('./ftp')注意，我这里不想破坏原来命令的功能，所以我通过执行命令时判断参数来控制是否启用该功能。process.argv该变量存储调用命令的参数。具体有什么用，console.log就知道了。于是就有了下图：然后命令输入太长了，打的手很疼。所以修改package.json的脚本。添加如下两行："bap":"nodebuild/build.jsbuildWithPublish","p":"nodebuild/ftp.jspublish"这样我们就可以直接运行npmrunbap来构建发布预览了环境。使用npmrunp直接将构建好的文件发布到预览环境。总结嗯，作为一个会用的懒人，代码有点乱，所以整个功能的代码就不贴出来了。基本上核心功能代码就是上面提到的那些。避免重复可以节省时间。实现这个功能大概用了一天的时间，觉得很值得。这样群里的其他同事就可以自己一个命令部署预览环境了。不用开xshell就开xftp。基于以上功能，还做了一个测试工具：https://segmentfault.com/a/11...
