您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

从零搭建vue + jenkins 超详细教程

时间:2020-10-17 12:09:20  来源:  作者:

相信vue很多人都已经很熟悉了,利用脚手架很容易搭建一个vue项目
但项目多了以后每次部署测试环境就相当麻烦,还容易出错
所以趁这两天不忙,研究一下jenkins,也总算是入门了

 

从零搭建vue + jenkins 超详细教程

 

jenkins官网传送门

初步了解了jenkins是干什么的以后,直接开干
步骤:

0.服务器安装JAVA,并配置环境变量

  1. 下载

打开oracle官网

从零搭建vue + jenkins 超详细教程

 


我一般习惯新建一个文件夹专门用于存放安装包文件(以个人喜好为准,可忽略)

cd /
// 创建并切换至安装包文件夹
mkdir java-package && cd java-package
123
// 下载源文件
wget https://download.oracle.com/otn/java/jdk/8u261-b12/a4634525489241b9a9e1aa73d9e118e6/jdk-8u261-linux-x64.tar.gz?AuthParam=1602751770_7c097e4bf112ac61ba04b7a40aa7a988
12

由于该下载链接会失效,请自行去官网下载获取下载链接
提示:wgwt下载jdk有坑(我是下载次数多了,后面直接无法不让我下载了),建议下载到本地再上传服务器

  1. 安装
// 创建安装目录
mkdir /usr/local/java 
// 解压至安装目录
tar -zxvf jdk-8u261-linux-x64.tar.gz -C /usr/local
cd /usr/local
// 重命名
mv jdk-8u261-linux-x64 java 
1234567
  1. 设置环境变量
  • 打开文件
vim /etc/profile
1
  • 添加你的路径(别忘了保存)
# set for java
export JAVA_HOME=/usr/local/java
export JRE_HOME=${JAVA_HOME}/jre
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib
export PATH=${JAVA_HOME}/bin:$PATH
12345
  • 执行命令使环境变量生效
source /etc/profile
1
  • 添加软链接
ln -s /usr/local/java/bin/java /usr/bin/java
1
  • 检查
java -version
1

我这里使已经安装过的

从零搭建vue + jenkins 超详细教程

 

1.服务器安装jenkins

  1. 安装各版本下载地址
cd /
mkdir jenkins-package && cd jenkins-package
wget https://pkg.jenkins.io/redhat/jenkins-2.156-1.1.noarch.rpm
rpm -ivh jenkins-2.156-1.1.noarch.rpm
1234
从零搭建vue + jenkins 超详细教程

 


从零搭建vue + jenkins 超详细教程

 

  1. 配置
    修改监听端口
vim /etc/sysconfig/jenkins
# 监听端口
JENKINS_PORT="8080"
123
  1. 权限

使用root权限,避免后面出现权限不足问题

JENKINS_USER="root"
1

2.启动jenkins服务

systemctl start jenkins
1

我第一次搭建的时候没有java环境,一直报错还不明所以

如果第一步java环境变量没配置好,此处会报错:

Starting Jenkins bash: /usr/bin/java: No such file or directory
1

浏览器输入http:<ip或者域名>:8080访问jenkins
如果无法访问,请检查防火墙、安全组是否放开

  1. 检查jenkins运行状态
// 查看jenkins运行状态
systemctl status jenkins
12

可以看到jenkins是正常运行的

从零搭建vue + jenkins 超详细教程

 

  1. 检查防火墙
systemctl status firewalld
1

防火墙是开着的

从零搭建vue + jenkins 超详细教程

 

// 查看是否开放8080端口
firewall-cmd --list-ports
// 如果没有,配置8080端口
firewall-cmd --permanent --zone=public --add-port=8080/tcp
// 重启防火墙
systemctl reload firewalld
123456

再访问我们的8080,终于看到了这个界面解锁jenkins,按提示在服务器上找到初始密码,继续下一步

从零搭建vue + jenkins 超详细教程

 

  1. 此处可能会出现一直卡在SetupWiazrd阶段,页面一直 loading 或者白屏,经过各种baidu,google,发现可能原因是jenkins需要更新安装一些组件,但是请求得不到相应。
    解决办法:浏览器访问http:<ip或者域名>:8080/pluginManager/advanced如http://localhost:8080/pluginManager/advanced即http://updates.jenkins.io/update-center.json,点击submit。然后重启jenkinsservice jenkins restart,再来访问我们的8080端口,解决了

此处我选择推荐的插件进行安装

从零搭建vue + jenkins 超详细教程

 


有些可能会安装失败,先不用管,后面有需要再安装

从零搭建vue + jenkins 超详细教程

 

 

从零搭建vue + jenkins 超详细教程

 


这里还有两个步骤没有截图,按提示走即可

从零搭建vue + jenkins 超详细教程

 

3.服务器安装nodejs

由于我们要部署vue项目,那肯定少不了node环境

  • 下载nodejs
    nodejs下载地址
cd /
mkdir node-package && cd node-package
// 下载最新版nodejs
wget https://nodejs.org/dist/v12.19.0/node-v12.19.0-linux-x64.tar.xz
1234
// 解压至/usr/local/nodejs
tar -xvf node-v12.19.0-linux-x64.tar.xz -C /usr/local/nodejs
12
// 创建软连接
ln -s /usr/local/nodejs/bin/node /usr/local/bin/
ln -s /usr/local/nodejs/bin/npm /usr/local/bin/
123
// 检查
node -v
npm -v
123

4.jenkins安装git,node插件,并在系统设置里应用node

从零搭建vue + jenkins 超详细教程

 


可能会看到很多报错,没关系,这些都是之前安装失败的,我们可以升级为最新版本

从零搭建vue + jenkins 超详细教程

 

 

从零搭建vue + jenkins 超详细教程

 

 

从零搭建vue + jenkins 超详细教程

 


从零搭建vue + jenkins 超详细教程

 


由于安装了新的版本,再次登录时如果刚才设置的密码不对,就去找到服务器中的初始密码,后面也可以在界面中修改密码

从零搭建vue + jenkins 超详细教程

 


点击系统管理-插件管理-可选插件-输入git,看你的源代码是用什么管理的,我这里勾选了GitLab,和Gitlab Authentication,直接安装

从零搭建vue + jenkins 超详细教程

 

 

从零搭建vue + jenkins 超详细教程

 


全局node插件配置

从零搭建vue + jenkins 超详细教程

 

关于汉化:直接搜索插件Localization: Chinese进行安装

5.jenkins创建项目,配置项目git源,配置构建脚本

注意:你的服务器需要安装git,用于拉代码

点击新建,选择构建自由风格的项目

从零搭建vue + jenkins 超详细教程

 


源码管理-选择git

从零搭建vue + jenkins 超详细教程

 


这里需添加 Credentials,输入你的git用户名和密码

从零搭建vue + jenkins 超详细教程

 


然后选择一个Credentials,并选择要构建的分支

从零搭建vue + jenkins 超详细教程

 


构建环境

从零搭建vue + jenkins 超详细教程

 


添加构建命令

从零搭建vue + jenkins 超详细教程

 


最后别忘了保存

尝试一次构建

从零搭建vue + jenkins 超详细教程

 


你可以点进度条-控制台输出

从零搭建vue + jenkins 超详细教程

 


每个项目的第一次构建由于需要下载依赖,过程会比较慢,后面就快很多了

从零搭建vue + jenkins 超详细教程

 


可以看到success,打包成功,再去服务器查看打包文件

从零搭建vue + jenkins 超详细教程

 

注意:打包时可能会遇到报错permission denied权限问题
解决方案:

  1. 建立全局文件夹配置
mkdir ~/.npm-global
 
npm config set prefix '~/.npm-global'
123
  1. 修改环境变量
vi /etc/profile 
# nodejs 配置
export PATH=~/.npm-global/bin:$PATH
// 激活环境变量
source /etc/profile
12345

再次构建

从零搭建vue + jenkins 超详细教程

 


可以看到第一次构建和第二次构建的速度差异

至此:第一次折腾jenkins到此告一段落,可见过程并不复杂



Tags:vue   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  Tags: vue  点击:(1)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Tags: vue  点击:(14)  评论:(0)  加入收藏
开头最近要研究有什么新奇的产品和项目,发现一个网站很有意思,可以纯前端一键随机生成头像,刚好他们的代码是开源,并且基于vue3,我想开源拿出来给大家分享。效果: 开始项目本身基...【详细内容】
2021-12-03  Tags: vue  点击:(15)  评论:(0)  加入收藏
问题后端已经配置好了跨域,前端本地搭建vue-cli测试环境的时候如何解决跨域?(前提进行了基本的axios封装)分析这个时候后端API是一个明确的外网环境(使用外网IP或固定域名访问),...【详细内容】
2021-11-03  Tags: vue  点击:(55)  评论:(0)  加入收藏
一、Vue框架的开发流程介绍 当我们从github上下载一个前端模板框架到本地后,框架中经常会自带有一些跳转显示类的功能,我们可以通过查看这些功能是如何实现的,进而一步步改造为...【详细内容】
2021-11-03  Tags: vue  点击:(34)  评论:(0)  加入收藏
一、Vue介绍1、什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架2、学习Vue的原因三大主流框架之一:Angular React Vue先进的前端设计模式:MVVM可以完全脱离服务器...【详细内容】
2021-10-22  Tags: vue  点击:(51)  评论:(0)  加入收藏
什么是vuevue是尤雨溪在2014年发布的一个渐进式的js框架,它有着双向绑定的特性,同时它的虚拟dom技术让性能得到大大提升。最重要的就是它是渐进式的应用,你可以在你的项目中逐...【详细内容】
2021-09-22  Tags: vue  点击:(77)  评论:(0)  加入收藏
前端框架:vue.js效果图: 图书管理显示,查询,删除 页面css样式:<style>* {margin: 0;padding: 0;}#app {width: 900px;padding: 20px;margin: 50px auto;box-shadow: 0 0 10px #82...【详细内容】
2021-09-17  Tags: vue  点击:(91)  评论:(0)  加入收藏
本文分享自华为云社区《【云驻共创】vue3相比 vue2 的十项优点》,作者: 海拥 。Vue3新版本的理念成型于 2018 年末,当时的 Vue 2 已经有两岁半了。比起通用软件的生命周期来这...【详细内容】
2021-09-16  Tags: vue  点击:(72)  评论:(0)  加入收藏
1.vue create demo2.vue ui3.搜索 vue-cli-plugin-electron-builder,勾选,安装4.npm run electron:serve5.npm run electron:build6.build complete!构建完成!构建完成后,看一...【详细内容】
2021-09-09  Tags: vue  点击:(63)  评论:(0)  加入收藏
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条