搭建自己的前端高效部署工具

公司运维没有给我们前端配置自动部署前端项目的实施，现阶段只有生产环境实现了一键部署，部署频率较高的开发、测试环境上的部署还是自己本地打包在上传到对应的服务器上。介于以前有用过利用Jenkins的一键部署，清闲之余，自己尝试一步步完成自动部署的实现，让机器高效完成整个部署过程，解放自己，也学习下运维知识。

前奏

保险意见，确认自己的Java sdk是8，mac默认取最高版本

安装Jenkins

用过才知道它的方便，以前那套是前公司搭的，比较完善。试想定能解决我的问题，比如拉取gitlab上的代码，上传打包后的代码到指定服务器，远程运行shell命令。
安装Jenkins整个过程还算简单，按照向导来很快就装上了，顺带一提本人用的是mac，之后一系列的权限问题突入袭来，防不胜防。
安装完成后会生成一个名为jenkins的用户，但我不知道密码是啥，查看/etc/passwd也没有找到，但它明明就在那，在/Users/Shared里能找到。后面跑shell默认实在该用户下跑的，问了解决jenkins这个用户的权限问题，我先是通过报错的提示一个个去为这个用户开放权限，这样做简直是天灾，后来换了种思路，就是换成机器当前登录用户去执行shell命令，需要做法如下：

停止Jenkins
编辑 /Library/LaunchDaemons/org.jenkins-ci.plist，将GroupName和UserName的值设为当前用户，保存

sudo chown -R <用户>:<组> /Users/Shared/Jenkins/

sudo chown -R <用户>:<组> /var/log/jenkins/

启动Jenkins

可以用whoami验证jenkins执行shell的用户是谁。
Jenkins的启动和停止命令：

启动\重启
sudo launchctl load /Library/LaunchDaemons/org.jenkins-ci.plist
停止
sudo launchctl unload /Library/LaunchDaemons/org.jenkins-ci.plist

安装和admin登录基本没问题，安装过程可以顺便把插件都安装了，但我没有，后面在系统管理里面还可以一个个安装。登录之后，熟悉的操作页面就出现了。开始创建任务，创建一个自由风格的软件项目，进入配置页面，熟悉完成。

集成gitlab拉取代码

这时需要安装gitlab plugin了，进入系统管理/插件管理，搜索gitlab，找到并安装重启，会发现在创建任务中会多一个gitlab配置项，

image.png

这里我用的是ssh免密的方式设置。中途去看了下生成公私钥的使用方式，ssh-keygen生成密钥，在当前用户.ssh里面，~/.ssh查看，id_rsa是私钥，id_rsa.pub是对应的公钥，大致就是把公钥文本复制到gitlab上保存，如图复制私钥并保存就ok了。

image.png

配完后，再指定一个拉取分支。立即运行下任务，代码会被clone下来，放在该任务的文件夹中，第一步完成。

运行npm打包命令

我们的打包命令很简单，只要在项目根目录下运行npm run compile:qafc就行了，（qafc是环境测试），jenkins是有配置运行shell脚本的设置的，包括直接运行shell命令，按我设想，以下命令是能完成打包的，最后生成build文件夹，打包生成物。

cd /Users/Shared/Jenkins/Home/workspace/后台测试
npm install --unsafe-perm --registry=https://registry.npm.taobao.org --sass_binary_site=https://npm.taobao.org/mirrors/node-sass
npm run compile:qafc

结果连cd这种命令都报不存在，可能是执行环境的问题吧，一顿google百度，最后找到在开头加入这行"#!/bin/bash -ilex"就行了，果不其然，可行，现阶段的脚本是这样的，也是一行完成执行下一行，生成build成功，第一步完成。

#!/bin/bash -ilex
cd /Users/Shared/Jenkins/Home/workspace/后台测试
npm install --unsafe-perm --registry=https://registry.npm.taobao.org --sass_binary_site=https://npm.taobao.org/mirrors/node-sass
npm run compile:qafc

上传文件夹到远程服务器

要解决眼下问题，我选择的是通过scp命令。首先要解决的是免密上传的问题，先得搞一下ssh密钥配置。如果我知道远程服务器连接密码，可以通过ssh-copy-id将公钥添加到了服务器的authorized_keys文件中就很好办了，可惜我不知道，运维给的是跳板机还有利用动态密码的方式去连接，幸运的是这步我可以手动完成，即复制公钥文本添加到authorized_keys中就完成了，以后通过命令上传到对应的目录中，Nginx指向的根目录：

scp -r build www@xxx.xxx.xxx.xxx:/data/server/dailuobo-admin-web/build

远程执行shell脚本

本来打算就行打住了，已经能通过Jenkins达到一键部署的目的，还是试图改进下，不如清除build文件夹（不然build会一直增大），这时要考虑清除的时机，当新的build上传完再删除替换那是极好的，就要远程执行shell脚本了。
一步步开始尝试，首先是直接执行如下命令：

ssh www@xxx.xxx.xxx.xxx
// 一系列远程的命令
...

尝试之后发现不行，还是在本地环境跑的，之后找一个插件貌似可以执行远程命令，经过一番尝试后ssh一直没连上，但我相信这种方式是可行的，只不过我又换了一种简单的方式，命令如下：

ssh www@10.111.0.208 "/bin/bash /data/server/dailuobo-admin-web/build/deploy.sh"

其中deploy.sh放在远程服务器上，所以，最后的执行shell是这个样子的：

#!/bin/bash -ilex
cd /Users/Shared/Jenkins/Home/workspace/后台测试
whoami
npm install --unsafe-perm --registry=https://registry.npm.taobao.org --sass_binary_site=https://npm.taobao.org/mirrors/node-sass
npm run compile:qafc
scp -r build www@xxx.xxx.xxx.xxx:/data/server/dailuobo-admin-web/build/buildTmp
ssh www@xxx.xxx.xxx.xxx "/bin/bash /data/server/dailuobo-admin-web/build/deploy.sh"

deploy.sh里面是这样：

cd /data/server/dailuobo-admin-web/build
mv build build-`date +"%Y%m%d%H%M%S"`
mv buildTmp build

最后文件的状态会是这样：

image.png

大功告成，完结撒花。
现在只是一个项目的部署，很多配置是死的，可以设置变量配置拉取不同的项目、不同的分支和不同的打包命令。