前端一键部署(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目录里的文件的方案有什么好处？
一、本地没有dp分支，干净
二、不用频繁合并分支，避免冲突，省心

• 后续优化

你们发现没有，jenkins配置主要集中在目录和项目地址的不一样上。
我应该是能够用参数化构建让用户去主动填这两个参数，而后自动生成配置构建项目
这样，我不用每次新项目都生成一个jenkins项目，同事的其余项目也均可以在个人这个jenkins项目上完成构建，是否是省了不少时间。

8.总结

npm run dp ==> 一键部署

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