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

北原麦客
2,199 阅读2分钟

jenkins

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

配置

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

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

安装插件

Manage Jenkins => manage plugins => available
安装以下插件

  • GitHub plugin
  • nodejs

全局工具配置

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加端口号或者域名
  • 配置github server,需要注意的是，这里可以采用默认的配置，就是添加 jenkinsUrl(上一条设置的url)/github-webhook/到github webhooks。如果添加凭据的话，需要github其他额外的设置

github

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

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

验证

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

代理jenkins服务

如果感觉公网ip+端口太不友好的话，可以使用nginx反向代理。参考之前的一篇文章，可以在server中添加location,当URI匹配到jenkins时，nginx就会请求转发到监听9999端口的jenkins服务下。

avatar
文章
阅读
粉丝