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
图片.png
图片.png
图片.png
图片.png
图片.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

添加后测试成功即可

图片.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是否可以自动构建项目