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

公司运维没有给我们前端配置自动部署前端项目的实施,现阶段只有生产环境实现了一键部署,部署频率较高的开发、测试环境上的部署还是自己本地打包在上传到对应的服务器上。介于以前有用过利用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 [email protected]:/data/server/dailuobo-admin-web/build

远程执行shell脚本

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

ssh [email protected]
// 一系列远程的命令
...

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

ssh [email protected] "/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 [email protected]:/data/server/dailuobo-admin-web/build/buildTmp
ssh [email protected] "/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

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

你可能感兴趣的:(搭建自己的前端高效部署工具)