jenkins对接github|gitlab实现vue打包

一需求

1 jenkins手动触发执行代码打包操作
2 上传到指定服务器更新（静态代码部署在nginx只需要覆盖即可）

二流程

1 配置jenkins服务器环境
2 配置github|gitlab
3 新建任务
4 服务器脚本以及测试

三步骤

1 服务器上软件安装：

node -v：v12.13.1
npm -v：6.12.1
vue -V：@vue/cli 4.4.1

如果vue版本为2，需要卸载后重装，否则打包时会报错
npm uninstall vue-cli -g
npm install @vue/cli -g
打包命令：
npm install
npm run build:prod  
注意run后面的参数和你package.json配置文件有关
手动测试jenkins服务器上是否可以正常打包再配置jenkins打包

2 jenkins配置环境：

1>插件安装

node插件——node项目打包

图片.png

git插件——github集成

图片.png

2> jenkins配置Node环境

打开“系统管理”——“全局工具配置”——“NodeJS”，配置node的相应版本即可

图片.png

3> jenkins配置ssh环境

3 新建任务

构建自由风格的软件项目

图片.png

配置的ssh方式连接，打包脚本如下

#!/bin/bash
DATE=`date +"%Y-%m-%d-%H"`
# 输出当前环境
echo '开始项目构建命令'
echo $PATH
node -v
npm -v
echo '当前分支'
git branch
# 切换拉取代码
echo '拉取代码'
git pull origin master
cd /tomcat/.jenkins/workspace/KFKPI-前端/fe-admin
# 安装依赖库
echo '安装依赖库'
npm install
# 执行打包
echo '开始打包'
npm run build:prod
# 打包构建后的文件
mv dist fe-admin
tar -cvf fe-admin$DATE.tar.gz fe-admin

传到服务器后再写一个脚本覆盖即可

参考：https://juejin.im/post/5c9dc0de6fb9a071105deeb2

四 jenkins连接gitlab

1 gitlab自动触发jenkind构建打包

测试环境中，开发人员一旦向gitlab仓库提交成功代码，gitlab就会自动触发jenkins构建项目，也可添加项目部署或者自动化测试脚本

安装插件
系统管理——管理插件——可选插件，安装gitlab插件

图片.png
源码管理
源码管理选择git，添加jenkins账户在gitlab上的凭据（用户名密码），打包的分支默认为master

图片.png
jenkins配置gitlab private token
系统管理——系统配置——然后找到系统设置页面找到gitlab

图片.png

参数解释：
Connection name：名称
Gitlab host URL：gitlab地址，没域名就是IP
Credentials：添加credentials之前，在gitlab中找到自己的private token
private token位置：
我的—— [User Settings]—— [Access Tokens]——生成Personal Access Tokens
注意：
类型：一定要选择gitlab API token
范围：默认就行
API token：从gitlab获取的Personal Access Tokens
ID：用来登录gitlab的账号
描述：都可以

图片.png

添加后测试成功即可

图片.png

构建触发器
勾选gitlab webhook，记住后面的连接“ http://192.168.1.201:8080/jenkins/project/gitlab-front-kfkpi”

图片.png

允许所有的分支触发这个job，生成token并记录：

图片.png
*gitlab配置
找到相应的项目——settings——Integrations ——将上面获取的URL和Secret Token填进去店家Addhook就可以和jenkins连接了，只要网络是通的即可

图片.png

图片.png

此时可以测试向gitlab提交代码后enkins是否可以自动构建项目