Jenkins自动构建部署vue项目
Jenkins简介
Jenkins是一个开源软件项目，是基于Java开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件项目可以进行持续集成
Jenkins功能包括：
1、持续的软件版本发布/测试项目。
2、监控外部调用执行的工作。
工作原理
开始安装
# 安装jenkins
docker pull jenkins/jenkins
# 启动jenkins
docker run -d -p 9000:8080 -p 9001:5000 --name myjenkin jenkins/jenkins备注：启动的时候最好挂载目录
打开浏览器，在地址栏输入ip+端口，例如：192.168.0.121:9000，打开页面如下：
进入指定目录，复制管理员密码，并且输入，然后等待jenkins初始化
安装完成
自动构建部署Vue项目
安装nodeJs插件
安装nodeJs 插件 如下图
安装连接SSH的插件
Publish Over SSH 用于连接远程服务器
配置NodeJs环境
1、进入全局工具配置
2、配置NodeJs环境
创建一个新的任务
1、创建任务
2，配置任务
第一次配置 需要添加凭据提供者 也就是git的账号密码，如下图
2.1、在源码管理选项配置远程仓库地址，如下图：
2.2、选择构建环境以及编写shell命令
2.3 编写shell指令
node -v &&
npm install -g npm &&
npm install &&
npm run build 编写完指令，点击保存，返回到任务列表，执行任务构建，如下图：
打包构建结果成功如下图：
扩展：
淘宝镜像cnpm
由于一些依赖需要访问外网，国内访问外网又比较慢，如果npm执行安装依赖一直不成功，可以安装cnpm淘宝镜像加速访问
如果使用淘宝镜像shell指令如下：
node -v &&
npm install -g cnpm --registry=https://registry.npm.taobao.org &&
cnpm install &&
npm run build &&
cd dist &&
tar -zcvf dist.tar.gz *到这里我们已经实现了本地代码提交到git，然后在jenkins上手动点击构建，可以拉取代码并且打包
下一步实现打包后的dist目录放到目标服务器上
配置 Publish Over SSH 插件
安装完成后在系统管理-> 系统设置->Publish over SSH，里设置服务器信息，我们将通过这个工具实现服务器部署功能
点击测试，结果执行成功，说明我们的配置是对的
参数
| 字段 | 描述 |
|---|---|
| Passphrase | 服务器的密码 |
| Path to key | 连接远程服务器密钥文件的路径 |
| Key | 密钥文件的内容 |
| Name | 自定义服务器名 |
| HostName | 服务器IP外网地址 |
| UserName | 服务器用户名 |
| Remote Directory | 连接上ssh后的默认路径 |
| Port | 端口（默认22） |
| Timeout(ms) | 超时时间（毫秒）默认300000 |
配置构建后指令
进入到任务配置，新增shell指令，构建成功后，进入dist文件夹打包压缩文件
node -v &&
npm install -g npm &&
npm install &&
npm run build &&
cd dist &&
tar -zcvf dist.tar.gz *
填完后执行构建。成功后登录我们目标服务器发现/vue目录下有了要运行的文件
#Source files
dist/dist.tar.gz
#Remove prefix
dist
#Remote directory
/vue/vue # 这里可以不填写
#Exec command
cd /vue
tar -zxvf dist.tar.gz
rm -f dist.tar.gz 参数
| 字段 | 描述 |
|---|---|
| Source files | 项目构建后在工作空间的相对目录(我这边构建时候打包的文件名是dist,所以填写的 dist/dist.tar.gz) |
| Remove prefix | 去前缀 (如果不去除的话,会在发布的目录后面新增dist目录) |
| Remote directoty | 发布的目录 (系统配置的路径/这个目录, 由于我配置ssh根路径写了/,所以我这里写的路径是usr/local/nginx/jenkins/www/ocrweb) |
| Exec command | 发布完执行的命令 (先cd切换到文件发布的目录,然后执行解压操作,然后删除压缩包) |
监听代码提交触发代码自动构建编译
接下来实现开发本地push代码到git上后，触发Webhook，jenkins自动执行构建。
jenkins安装Generic Webhook Trigger 插件
下载安装对应插件，安装完成后，回到任务配置–>构建触发器–>选择Generic Webhook Trigger，填写token
添加 git web钩子
到这里，已经可以实现代码提交，自动触发构建指令了
