jenkins自动构建发布vue项目的方法步骤


Posted in Vue.js onJanuary 04, 2021

简介

Jenkins是一个开源的、提供友好操作界面的持续集成(CI)工具,起源于Hudson(Hudson是商用的),主要用于持续、自动的构建/测试软件项目、监控外部任务的运行(这个比较抽象,暂且写上,不做解释)。Jenkins用Java语言编写,可在Tomcat等流行的servlet容器中运行,也可独立运行。通常与版本管理工具(SCM)、构建工具结合使用。常用的版本控制工具有SVN、GIT,构建工具有Maven、Ant、Gradle。

jenkins安装

 1.安装JDK

yum install -y java

2.安装jenkins

把Jenkins库添加到yum库,然后安装

wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
 rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key
 yum install -y jenkins

如果yum安装jenkins出现签名认证失败,再启动命令后面加上- -nogpgcheck

yum install -y jenkins --nogpgcheck

3.配置jenkis的端口

vi /etc/sysconfig/jenkins
#此端口不冲突可以不修改 
JENKINS_PORT="8080"

4.启动jenkins

# start 启动 stop停止,restart重启
service jenkins start/stop/restart

安装成功后Jenkins将作为一个守护进程随系统启动
系统会创建一个“jenkins”用户来允许这个服务,如果改变服务所有者,同时需要修改/var/log/jenkins, /var/lib/jenkins, 和/var/cache/jenkins的所有者
启动的时候将从/etc/sysconfig/jenkins获取配置参数

5.打开jenkins

在浏览器中访问
http://127.0.0.1:8080/
首次进入会要求输入初始密码如下图

jenkins自动构建发布vue项目的方法步骤

初始密码在:/var/lib/jenkins/secrets/initialAdminPassword 文件里面

6.安装插件

登陆进去之后,然后就开始安装推荐插件了.

jenkins自动构建发布vue项目的方法步骤

发布vue项目

1.安装插件

如果jenkins和vue应用部署在同一台电脑,后面2个插件不用安装

安装NodeJS插件

点击系统管理,然后点击插件管理,在可选插件里面搜索NodeJS插件,然后安装

jenkins自动构建发布vue项目的方法步骤

安装连接SSH的插件

Publish Over SSH用于连接远程服务器

jenkins自动构建发布vue项目的方法步骤

安装把应用发布到远程服务器的插件

Deploy to container插件用于把打包的应用发布到远程服务器

jenkins自动构建发布vue项目的方法步骤

2.配置git和NodeJS环境

打开系统管理里面的全局工具配置

jenkins自动构建发布vue项目的方法步骤

安装配置git

如果 下载过就不需要再下载了。

#安装git
yum install git
#查看git的执行文件位置, 默认是在 /usr/bin/git
whereis git

配置git执行命令目录

jenkins自动构建发布vue项目的方法步骤

安装配置NodeJS

自动下载会出现在构建任务的时候卡半天 (不推荐)

自动下载的NodeJS文件保存在/var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/ 下面

jenkins自动构建发布vue项目的方法步骤

手动下载NodeJS压缩包上传到服务器指定位置

我本地开发环境用的NodeJS是 v12.18.3版本下载路径是https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.gz,你们可以去https://nodejs.org/dist/ 页面去找你们对应的版本文件
建议别用网页下载,网页下载特别慢,打开迅雷把文件链接放进去几秒钟就下完了.

#把下载好的压缩包上传到服务器的这个目录下面
/var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/
#压缩
cd /var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/
tar zxvf node-v12.18.3-linux-x64.tar.gz

3.配置git凭证信息

配置git账号密码信息

点击系统管理下面的 Manage Credentials

jenkins自动构建发布vue项目的方法步骤

点击Jenkins

jenkins自动构建发布vue项目的方法步骤

点击全局凭据

jenkins自动构建发布vue项目的方法步骤

点击添加凭据

jenkins自动构建发布vue项目的方法步骤

设置连接git的账号密码信息,然后再设置凭据的唯一ID

jenkins自动构建发布vue项目的方法步骤

4.新建任务

新建任务,然后点构建一个自由风格的软件项目

jenkins自动构建发布vue项目的方法步骤

配置git地址和凭证信息

点击源码管理,然后配置代码仓库和对应的凭据信息

jenkins自动构建发布vue项目的方法步骤

指定分支

jenkins自动构建发布vue项目的方法步骤

设置项目的自动发布的触发条件

目前使用的是轮询,
H/5 * * * * * 表示每5分钟去查看git代码有没有更新,有更新自动发布

jenkins自动构建发布vue项目的方法步骤

配置构建环境

选中之前在全局配置添加的NodeJS名称

jenkins自动构建发布vue项目的方法步骤

设置构建参数和执行的命令

下面2种情况,根据实际需求选择配置

发布项目到本机 设置构建命令

点击增加构建步骤,选择执行shell

jenkins自动构建发布vue项目的方法步骤

把构建项目的命令放进去,然后点击保存就行

jenkins自动构建发布vue项目的方法步骤

#切换目录(我的vue项目在git源码根路径的ocrweb目录下,你们的如果是在根路径下面,cd这个命令请忽略)
#cd ocrweb
#加载依赖
npm install 
#构建代码
npm run build
#复制构建后的文件到nginx里面项目对应的部署目录下
cp dist/* -rf /usr/local/nginx/jenkins/www/ocrweb

由于jenkins服务默认是有jenkins用户启动的,所以要给vue项目发布的目录授权

chmod 777 /usr/local/nginx/jenkins/www/ocrweb

立即构建项目

1.点击我的视图

jenkins自动构建发布vue项目的方法步骤

2.点击刚刚新建的任务

jenkins自动构建发布vue项目的方法步骤

3.点击立即构建

jenkins自动构建发布vue项目的方法步骤

4.点击查看控制台日志

jenkins自动构建发布vue项目的方法步骤

可以看到打印了我们之前配置命令

jenkins自动构建发布vue项目的方法步骤

看到下面的Finished: SUCCESS代表着已经发布成功了。

jenkins自动构建发布vue项目的方法步骤

最后看到文件已经发布到了我配置的nginx容器的目录下面了。

jenkins自动构建发布vue项目的方法步骤

发布项目到远程服务器 需要先设置远程服务器的host,账号,密码

点击系统管理->点击系统配置,找到Publish over SSH选项

jenkins自动构建发布vue项目的方法步骤

需要配置Name,Hostname,Username,Remote Directory
账号认证可以使用密码,key文件,key内容

jenkins自动构建发布vue项目的方法步骤

参数说明

字段 描述
Passphrase 服务器的密码
Path to key 连接远程服务器密钥文件的路径
Key 密钥文件的内容
Name 自定义服务器名
HostName 服务器IP外网地址
UserName 服务器用户名
Remote Directory 连接上ssh后的默认路径

设置构建命令

比上面写的单机部署的少了cp命令,多个打包命令

jenkins自动构建发布vue项目的方法步骤

#加载依赖
npm install 
#构建程序
npm run build
#切换了编译后的目录
cd dist
#移除之前的压缩包
rm -f ocrweb.tar.gz
#把当前目录的所有文件打包成ocrweb.tar.gz
tar -zcvf ocrweb.tar.gz *

构建后操作

点击增加构建后操作,选中Send build artifacts over SSH

jenkins自动构建发布vue项目的方法步骤

jenkins自动构建发布vue项目的方法步骤

#Source files
dist/ocrweb.tar.gz
#Remove prefix
dist
#Remote directory
usr/local/nginx/jenkins/www/ocrweb
#Exec command
cd /usr/local/nginx/jenkins/www/ocrweb
tar -zxvf ocrweb.tar.gz
rm -f ocrweb.tar.gz

参数说明

字段 描述
Source files 项目构建后在工作空间的相对目录(我这边构建时候打包的文件名是ocrweb,所以填写的 dist/ocrweb.tar.gz)
Remove prefix 去前缀 (如果不去除的话,会在发布的目录后面新增dist目录)
Remote directoty 发布的目录 (系统配置的路径/这个目录, 由于我配置ssh根路径写了/,所以我这里写的路径是usr/local/nginx/jenkins/www/ocrweb)
Exec command 发布完执行的命令 (先cd切换到文件发布的目录,然后执行解压操作,然后删除压缩包)

配置完成后,保存,然后点击立即构建,查看控制台日志,看到SSH: Transferred 1 file(s)
Finished: SUCCESS就代表文件已经上传到远程服务了。

jenkins自动构建发布vue项目的方法步骤

登录远程服务器验证文件是否存在。

jenkins自动构建发布vue项目的方法步骤

到这里,大概把jenkins部署vue项目步骤写的差不多了

到此这篇关于jenkins自动构建发布vue项目的方法步骤的文章就介绍到这了,更多相关jenkins自动构建vue内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 #Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 #Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 #Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 #Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 #Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 #Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 #Vue.js
You might like
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php编写简单的文章发布程序
2015/06/18 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
innerText 使用示例
2014/01/23 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
Vue中props的使用详解
2018/06/15 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
Django开发的简易留言板案例详解
2018/12/04 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
实例详解Python模块decimal
2019/06/26 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
自我鉴定的范文
2013/10/03 职场文书
数学专业毕业生自荐信
2013/11/10 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
解除处分决定书
2015/06/25 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书