本篇文章前端项目以vue为例(其实前端工程化项目的操作方法都相同),部署在Linux系统上(centos)。

之前做前端项目的部署,一直都是手动运行打包命令,打包完。再使用FTPXshell等这类的工具上传到服务器。这种方式不仅效率不高,而且容易出错,一不小心就放错地方了。或者公司有运维,只需要打包前端项目代码后发给运维就不管了,但是一般的小公司是没有运维的。所以呢,就在找有没有什么工具可以自动帮我完成这些操作,于是就找到了下面这货,名字叫做Jenkins。随着用的越来越多,越来越顺心,这小老头也是越看越顺眼了!!!

这篇文章的主要目的,就是实现往github push代码或者合并代码到项目的master或者其他分支,jenkins就自动部署代码到对应服务器。

一、Jenkins的安装与配置

Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能。(摘自百度百科)

1. java环境的搭建

因为它是依赖于Java环境的,所以必须先安装java环境,否则启动Jenkins服务的时候会报错哦。

执行以下命令安装JDK,一步到位。建议安装版本1.8以上的

yum install java-1.8.0-openjdk

2. 安装Jenkins

我一般习惯使用yum安装软件。由于yumrepo中默认没有Jenkins,所以需要先将Jenkins库添加到yum repos中,依次执行下面的命令:

cd /etc/yum.repos.d/
wget http://pkg.jenkins.io/redhat/jenkins.repo
rpm --import http://pkg.jenkins.io/redhat/jenkins.io.key
yum install -y jenkins

赋予Jenkins在网站根目录的读写权限,我这边网站的根目录为/usr/share/nginx/hxkj

chown -R jenkins.jenkins /usr/share/nginx/hxkj

启动Jenkins

service jenkins start

因为jenkins默认使用8080端口,如果使用的是云服务器,还需要在安全组中开放8080端口(如果不想使用8080端口,或者端口被占用了,可以在Jenkins的配置文件里修改默认端口)

3. Jenkins的初始化使用

3.1、在浏览器输入http://服务器IP:8080 打开jenkins,首次打开需要获取管理员的密码,如图:

可以根据页面提示在服务器中找到该密码,输入如下命令:(cat命令后面的路径为页面上显示的标红文字,每个人的可能不一样)

cat /var/lib/jenkins/secrets/initalAdminPassword
3.2、安装默认插件:输入密码,提交完成之后会跳转到插件安装页面,选择第一个然后进行安装,如图:

这一步,啥都不用做,慢慢等吧。。。

接下来默认插件安装完成之后,创建一个管理员账户,完成配置后,就可以登录 Jenkins

3.3、安装 NodeJs插件,用于vue项目打包构建。

打开系统管理 => 管理插件 搜索 NodeJs然后勾选安装

打开系统管理 => 全局工具配置 拉到底部 配置 node 版本,如图:

4. 配置自动部署任务

4.1、新建任务:点击新建任务 => 输入任务名称,选择构建一个自由风格的软件项目然后确定

4.2、配置git,进入任务配置,选择源码管理 ,因为我的项目是开源的,所以无需填写账号密码

4.3、设置构建环境,选择 Provide Node & npm bin/ folder to PATH 然后选择之前安装插件时候配置的node版本

4.4、配置项目自动化打包,选择 增加构建步骤 => Excute shell 这个是运行相关的sh命令(这一步建议耗时操作分离步骤)

所有命令

cd /var/lib/jenkins/workspace/hxkj #进入Jenkins工作空间下hxkj项目目录
node -v #检测node版本(此条命令非必要)
npm -v #检测npm版本(此条命令非必要)
npm config set registry https://registry.npm.taobao.org #把npm源设置为淘宝源(这个你懂的)
npm config get registry #检测npm是否切换成功(此条命令非必要)
npm install #安装项目中的依赖
npm run build #打包
cd dist
rm -rf hxkj.tar.gz #删除上次打包生成的压缩文件(一般建议备份,不要直接删除,这边测试就无所谓啦)
tar -zcvf hxkj.tar.gz * #把生成的项目打包成压缩包,方便移动到项目部署目录
cd /usr/share/nginx/hxkj #进入web项目根目录
mv /var/lib/jenkins/workspace/hxkj/dist/hxkj.tar.gz ./ #移动刚刚打包好的项目到web项目根目录
tar -zxvf hxkj.tar.gz -C dist/ #解压项目到dist目录
rm -rf hxkj.tar.gz #删除压缩包

步骤分离之后,如下图

4.5、保存后点击立即构建查看任务是否能够成功构建,控制台输出 菜单可以查看构建日志。

到现在为止,Jenkins构建已经配置完毕,接下来就是配合github来完成骚操作了!

二、GitHub+Jenkins联动配置

1. 创建 github AccessToken

进入 github 设置页,选择Developer settings

选择 Personal access tokens => Generate new Generate

勾选如下配置,然后点击Generate Generate ,一定要保存好这个token哦,它只显示一次。

2. Jenkins添加github插件

打开系统管理 => 管理插件 搜索 Github Plugin然后勾选安装

然后进入 系统管理 => 系统设置 => Github Server 添加信息

凭据 那里再点击 添加 添加如下信息

添加完毕之后记得选择我们刚刚添加的凭据信息

最后点击 连接测试 如果如下显示,说明配置是正确的

三、Git push测试

Git的push操作,这边就不演示了

当完成push操作之后,回到Jenkins管理页面,就会看到在构建队列中,新增了一条记录。



而且,查看构建日志,也提示成功!!!

At last,看完之后有什么不懂的,可以留言反馈。

转载请注明出处:https://www.jianshu.com/p/4c4f92209dd1

作者:TSY

个人空间:https://hxkj.vip

Github配合Jenkins,实现vue等前端项目的自动构建与发布的更多相关文章

  1. Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架

    在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框 ...

  2. 在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表

    在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用, ...

  3. 在Vue&Element前端项目中,对于字典列表的显示处理

    在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如 ...

  4. github 上有趣又实用的前端项目(持续更新,欢迎补充)

    github 上有趣又实用的前端项目(持续更新,欢迎补充) 1. reveal.js: 幻灯片展示框架 一个专门用来做 HTML 幻灯片的框架,支持 HTML 和 Markdown 语法. githu ...

  5. 如何实现vue-cli搭建的前端项目的自动打包

    实现vue-cli + webpack +vue项目的自动打包: 后台java代码: public class OpenDirectory { public static void main(Stri ...

  6. 在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作

    最近把微信框架的前端改造一下,在原来基于Bootstrap框架基础上的微信后台管理,增加一套Vue&Element的前端,毕竟Vue的双向绑定开发起来也还是很方便的,而且Element本身也提 ...

  7. 使用Bitbucket Pipeline进行.Net Core项目的自动构建、测试和部署

    1. 引言 首先,Bitbucket提供支持Mercurial和Git版本控制系统的网络托管服务.简单来说,它类似于GitHub,不同之处在于它支持个人免费创建私有项目仓库.除此之外,Bitbucke ...

  8. 用Ant实现Java项目的自动构建和部署

    原文地址:http://tech.it168.com/j/2007-11-09/200711091344781.shtml         本文请勿转载! Ant是一个Apache基金会下的跨平台的构 ...

  9. 用Ant实现Java项目的自动构建和部署(转)

    Ant是一个Apache基金会下的跨平台的构件工具,它可以实现项目的自动构建和部署等功能.在本文中,主要让读者熟悉怎样将Ant应用到Java项目中,让它简化构建和部署操作. 一.            ...

随机推荐

  1. codeforces 816 C. Karen and Game(模拟+思维)

    题目链接:http://codeforces.com/contest/816/problem/C 题意:给出一个矩阵,问能否从都是0的情况下只将一整行+1或者一整列+1变形过来,如果可以输出需要步数最 ...

  2. codeforces 813 D. Two Melodies(dp)

    题目链接:http://codeforces.com/contest/813/problem/D 题意:求两个不相交的子集长度之和最大是多少,能放入同一子集的条件是首先顺序不能变,然后每一个相邻的要么 ...

  3. codeforces 808 D. Array Division(二分)

    题目链接:http://codeforces.com/contest/808/problem/D 题意:有一串长度为n的数组,要求选择一个数字交换它的位置使得这串数能够分成两串连续的和一样的数组. 这 ...

  4. poj 1177 Picture(线段树周长并)

    题目链接:http://poj.org/problem?id=1177 题意:给你n个矩形问你重叠后外边缘总共多长. 周长并与面积并很像只不过是处理的时候是   增加的周长=abs(上一次的线段的长度 ...

  5. 深入分析Mybatis 使用useGeneratedKeys获取自增主键

    摘要 我们经常使用useGenerateKeys来返回自增主键,避免多一次查询.也会经常使用on duplicate key update,来进行insertOrUpdate,来避免先query 在i ...

  6. 使用Git初始化本地仓库并首次提交代码

    本文介绍使用Git初始化本地仓库,并首次提交代码到远程仓库GitLab上面. 首先,登录GitLab,创建一个新项目的私人仓库: 然后,在本地仓库(就是你写代码文件夹),右键,Git Bash Her ...

  7. 【Offer】[41] 【数据流中的中位数】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值.如果从数据流中读出偶数个数值, ...

  8. mysql之innodb存储引擎---BTREE索引实现

    在阅读本篇文章可能需要一些B树和B+树的基础 一.B树和B+树的区别 1.B树的键值不会出现多次,而B+树的键值一定会出现在叶子节点上,而且在非叶子节点也可能会重复出现2.B数存储真实数据,B+数叶子 ...

  9. java对象与json字符串的互相转换

    java对象与json字符串的互相转换 1.采用 net.sf.json.JSONObject maven依赖包: <dependency> <groupId>net.sf.j ...

  10. spring接口文档注解:@ApiOperation(转)

    spring接口文档注解:@ApiOperation @ApiOperation不是spring自带的注解是swagger里的 com.wordnik.swagger.annotations.ApiO ...