前端自动化部署——jenkins一键部署

Runningfyy

0.引言

大家好,我是肥羊羊,今天给大家介绍下jenkins一键部署。说来惭愧,之前说要写一篇jenkins的文章,这让大家一等就是半年,罪过罪过....

1.原理

前端利用jenkins部署其实很简单,用到的不外乎是ssh,git,git钩子,shell命令等一些知识。

之前我写过两篇文章,实际上已经在自动部署的原理上做了阐述,jenkins的自动部署原理其实都一样,大家如果想知道前因后果之前看我之前的文章吧。
git钩子与自动化部署(上)
git钩子与自动化部署(下)

2.流程

jenkins是开源CI&CD软件领导者, 提供超过1000个插件来支持构建、部署、自动化, 满足任何项目的需要。
程序员提交代码后,可以在jenkins上进行测试,打包,部署等操作

对于前端来说,jenkins使用相对简单,因为测试,打包都可以在本地完成,只需要使用到Jenkins的自动部署功能,后面的文章会先详细介绍本地打包怎么做,再简单介绍下如果想服务器上打包应该怎么做。

整体流程如下图,前端在本地开发,经测试、打包后传到git上,触发webhook钩子,向jenkins服务器发送请求,触发jenkins上响应的脚本,完成部署

WX20200514-154554@2x.png

下面分三个部分(本地,git,jenkins)介绍一下具体的做法

3.jenkins配置

先说下前置条件

由于是公司的项目,所以jenkins已经由ops搭建好了,包括ssh也设置好了

插件方面:Publish Over SSH(推送文件用的) 这个插件也安好了

1.创建好一个自由风格的项目,添加上对这个项目的描述
2.首先添加源码管理
通俗的讲就是从哪个地方拉代码,可以从svn,也可以从git,注意需要提前配置好ssh,然后选择拉取分支,我这里选dp分支,也就是gitlab上新建的专门用于部署的分支
WX20200519-182312@2x.png

拉代码前可以选择删除工作目录,看你项目有没有这个需要,如果需要删除的话在构建环境中勾选 Dele workspace before buld start
3. 添加触发器
WX20200519-182750.png
触发器就是设置什么时候开始构建

当然你可以不添加触发器,每次提交完代码在jenkins里点击左侧的立即构建。不过大家跟羊总这么久了,羊总像是逼格这么低的人吗

也可以选择轮询 SCM,也就是定时查看git分支,如果分支代码改变,则拉取代码到工作空间,工作空间就是jenkins服务器你这个项目的所在目录,你可以在控制面板的左侧找到它

如果你装了GitLab Plugin,也可以选择这个,gitlab代码更新通知jenkins构建,可惜咱就是个大头兵也没权限安装这个插件,不过咱也可以通过别的方式达到这个插件的作用
2.png

我这里选择的是使用脚本触发远程构建,令牌随便写,注意下面的触发URL格式,只要是这个格式的url请求,Jenkins就会自动构建,大家别忘了加上jenkins账号密码(http://username:password@xxxxxx),否则没权限,大家可以先在浏览器里试一试,看能不能触发Jenkins的构建
WX20200514-140539.png

4.构建操作
构建的时候干啥,一般可以测试,打包,部署等等

之前说过了,我们是本地打包,所以线上部署实际上就是把文件从jenkins服务器弄到测试服务器的一个过程,那么在Jenkins上构建实际只需要压缩下文件就行了,假设我们的dp目录是全部的打包后的文件

我们这里选择执行shell脚本,将所有当前文件打成tar包

WX20200514-140749.png

5.构建后操作
构建后大家可以看工作空间应该会多一个tar包文件,我们把这个tar包通过ssh传到测试服务器指定目录就行了(这个目录nignx已经提前配置过访问端口了)。由于公司配了传送的默认目录,所以我这里手动做了下转移,然后解压,删除原来的文件即可

WX20200519-184813.png

4.gitlab配置

  1. 新增一个bp分支
  2. 添加一个webhook(在setting/integration里面),每次bp分支更新了就向指定url发请求,url就是3.3触发器里面的url

WX20200519-185406.png

千万千万别忘了选bp分支更新代码触发,添加完钩子可以先测试下url能不能jenkins

5.本地项目配置

本地需要做的是:

本地打包完以后,进入打包dist目录,,新创建一个git仓库,将目录里所有内容强行推送到远程bp分支,然后删除.git文件,回到上层目录

下载 (1).jpeg

羊总,说好的一键部署呢???你这不是为难我胖虎吗???
为难胖虎.jpeg

莫急,莫急,我写了一个sh脚本,大家放到项目里面(gitignore里面可以添加忽略sh文件,因为这个sh里面有账号密码等私密信息,不应该共享,共同开发的时候每个人的也不一样!),然后添加一个npm script

//package.json中的配置
"scripts": {
    "dp": "sh dp.sh",
  },

mac用户直接运行npm run dp即可完成一键部署
windows用户也简单,稍微改一改sh命令,在gitbash里面运行npm run dp即可完成一建部署。
改动1, 去掉sudo,windows里面没有这个命令
改动2, cd后面的目录地址不对,自己在gitbash里面输入pwd看一下

sh脚本如下 //touch dp.sh

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 没有打包先打包,每次必须保证dist是新的
 npm run build
# 进入dist目录,注意路径别写错了,window用户特别注意
# cd path/to/dist
cd dist

git init
git add -A
git commit -m 'deploy'


# 如果ssh已配,直接走ssh推送
#git push -f git@xxxx/share.git master:dp (一定是master分支,因为这个是dist里面新建的git库,千万不要以为是外面的根目录下的git库)
# 如果ssh链接有问题,请走http链接推送
# git push -f http://yourCount:yourPassword@yourGitProjectUrl/share.git  master:dp

git push -f http://xxxx@xxxx/share.git  master:dp

# 删除.git 否则当前项目有两个.git文件 无法推送master
sudo rm -rf .git

cd -


6.jenkins线上测试/打包

线上打包很简单,jenkins简单改改就行了
第一个,构建环境需要支持node
第二个,构建的时候shell脚本改改就行了
WX20200519-191942.png

至于本地和git上怎么改,只要你们读懂文章了,我相信也不难配

7.一些思考

  • 打包应该放在本地还是线上

只要不是超大型项目,我觉得本地打包还是很不错的,原因有一下几点

  1. 不知道为啥,我本地打包比服务器快很多,mac就是香...
  2. Npm intall的时候,大家遇到过报错没有,本地怎么解决的,服务器上一般就怎么解决,也就是需要将修复命令放到shell脚本里。所以我个人觉得本地打包可控性更高,更方便。
  • 推什么目录到dp分支

这个也是由你的打包方案决定的,线上打包你肯定只能将dev分支(项目根目录层级)合到dp分支上,然后推到git上

其实这是第一个问题的延续,我的本地打包推送dist目录里的文件的方案有什么好处?
1、本地没有dp分支,干净
2、不用频繁合并分支,避免冲突,省心

  • 后续优化
  1. 大家发现没有,jenkins配置主要集中在目录和项目地址的不同上。

我能不能用参数化构建让用户去主动填这两个参数,然后自动生成配置构建项目,这样,我不用每次重新配置。

  1. dp.sh能用node自动生成吗?

8.总结

npm run dp ==> 一键部署

以上就是我给大家带来的Jenkins前端一建打包部署方案分享,如果文章有什么问题,欢迎在评论区支出。如果你觉得本文对你有很大的帮助,求点赞,求收藏 求打赏 ,你们的支持是作者写作的最大动力!

阅读 3.1k

前端小羊羊
爱健身,爱编码,爱生活,欢迎小妹妹来撩我
888 声望
277 粉丝
0 条评论
你知道吗?

888 声望
277 粉丝
宣传栏