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

---

0.引言

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

1.原理

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

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

2.流程

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

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

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

下面分三个部分（本地，git,jenkins）介绍一下具体的做法

3.jenkins配置

先说下前置条件

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

插件方面：Publish Over SSH（推送文件用的） 这个插件也安好了

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

拉代码前可以选择删除工作目录，看你项目有没有这个需要，如果需要删除的话在构建环境中勾选 Dele workspace before buld start
3. 添加触发器

触发器就是设置什么时候开始构建

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

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

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

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

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

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

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

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

4.gitlab配置

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

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

5.本地项目配置

本地需要做的是：

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

羊总，说好的一键部署呢？？？你这不是为难我胖虎吗？？？

莫急，莫急，我写了一个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脚本改改就行了

至于本地和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前端一建打包部署方案分享，如果文章有什么问题，欢迎在评论区支出。如果你觉得本文对你有很大的帮助，求点赞，求收藏， 求打赏 ，你们的支持是作者写作的最大动力！