转载

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

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

Source Code Management

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

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

勾选Provide Node & npm bin/ folder to PATH

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其他额外的设置