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表单验证之禁止input输入框输入空格
Dec 03 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
Vue3实现简易音乐播放器组件
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警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
react基本安装与测试示例
2020/04/27 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
Python中django学习心得
2017/12/06 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
Django 自定义分页器的实现代码
2019/11/24 Python
python温度转换华氏温度实现代码
2020/12/06 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
汽车专业毕业生自荐信
2013/11/03 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
内科护士节演讲稿
2014/09/11 职场文书
中学生学习保证书
2015/02/26 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
MySQL Server层四个日志的实现
2022/03/31 MySQL
vue 自定义组件添加原生事件
2022/04/21 Vue.js