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 element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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 AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
php单例模式实现方法分析
2015/03/14 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
js密码强度校验
2015/11/10 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
python搭建微信公众平台
2016/02/09 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python操作 hbase 数据的方法
2016/12/18 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
揭牌仪式策划方案
2014/05/28 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
企业2014年度工作总结
2014/12/10 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
创建文明城市倡议书
2015/04/28 职场文书
预备党员入党感言
2015/08/01 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang
关于MySQL中的 like操作符详情
2021/11/17 MySQL