jenkins+github+vue实现前端包的自动化部署

jenkins 是基于Java开发的一种持续集成工具,本质是一个war包,所以集成了很多可视化的操作界面。

配置

linux安装jenkins有很多的博客介绍,就先忽略,从配置开始。启动jenkins服务后,打开ip地址+端口号,解jenkins后,我们可以跳过推荐插件安装,进入操作界面。

jenkins+github+vue实现前端包的自动化部署

就可以看到一个儒雅且头发稀疏的老头出现在了左上角,闭目养神着。

安装插件

Manage Jenkins => manage plugins => available

安装以下插件

全局工具配置

Manage Jenkins => Global Tool Configuration => Nodejs => 命名并且选择Install automatically

建个任务

New Item => Enter an item name => freestyle project => ok

  1. Source Code Management

    选择git,添加github仓库,私库的话,还需要用户名密码凭证

  2. Build Triggers

    勾选 GitHub hook trigger for GITScm polling和Poll SCM(如果没有选项,就要检查插件是否安装成功)

  3. Build Environment

    勾选Provide Node & npm bin/ folder to PATH

  4. Build

    add build step => execute shell

    npm install 
    rm -rf ./dist/*
    npm run build
    cd dist
    rm -rf vueapp.tar.gz
    tar -zcvf vueapp.tar.gz *
    cd /data/vue-app
    mv /var/lib/jenkins/workspace/vue-app/dist/vueapp.tar.gz ./
    tar -zxvf vueapp.tar.gz -C dist/
    rm -rf hxkj.tar.gz
    复制代码

    shell脚本主要是安装了vue项目的依赖,然后执行build命令,生成生成包,最后移动到要部署前端包的路径下

至此任务的配置算是完成了。

系统配置

Manage Jenkins => Configure Configuration

  • 配置jenkins location, 可以是公网ip加端口号或者域名
    jenkins+github+vue实现前端包的自动化部署
  • 配置github server,需要注意的是,这里可以采用默认的配置,就是添加 jenkinsUrl(上一条设置的url)/github-webhook/到github webhooks。如果添加凭据的话,需要github其他额外的设置
    jenkins+github+vue实现前端包的自动化部署
jenkins+github+vue实现前端包的自动化部署

github

仓库 => settings => webhooks => Payload URL (这里输入在jenkins设置的github-webhook路径) => 选择push代码到仓库时,触发hook。

简单理解,就是push代码到github仓库时,github会给配置的jenkins webhook url发送一个post请求,通知jenkins,可以执行任务了

jenkins+github+vue实现前端包的自动化部署

验证

当在本地修改完代码,push到github仓库时,jenkins的任务就开始执行了

jenkins+github+vue实现前端包的自动化部署

原文 

https://juejin.im/post/5e666d0b51882549315fc37b

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » jenkins+github+vue实现前端包的自动化部署

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址