• 欢迎访问V小白网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入V小白 暂无QQ群
  • 欢迎访问V小白网站,这是第二个滚动条

Github配合Jenkins,实现vue等前端项目的自动构建与发布

其他分类 admin 2019年6月28日 10:36 133 0 个评论

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

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

service jenkins start

这一步,啥都不用做,慢慢等吧。。。 接下来默认插件安装完成之后,创建一个管理员账户,完成配置后,就可以登录 Jenkins

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

打开系统管理 => 管理插件 搜索 NodeJs然后勾选安装
打开系统管理 => 全局工具配置 拉到底部 配置 node 版本,如图:

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来完成骚操作了!

选择 Personal access tokens => Generate new Generate

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

2. Jenkins添加github插件

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

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

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

三、Git push测试

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

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


V小白 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Github配合Jenkins,实现vue等前端项目的自动构建与发布
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到
0个小伙伴在吐槽