Jenkins Github自动构建vue项目

一.Jenkins的安装与配置

1.安装Java环境

有两种方式安装一种是手动下载jdk，另一种自动安装，我这边选择自动安装

yum install java-1.8.0-openjdk

2. 安装Jenkins

这里使用yum安装，但是yum的repo中没有Jenkins，所以要先把Jenkins添加到yum repo中

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/local/website/shop

chown -R jenkins.jenkins /usr/local/website/shop

启动Jenkins

service jenkins start或者systemctl start jenkins.service

Jenkins的默认端口是8080，可以自己在配置中修改，服务器一定要开8080端口

#打开配置文件
vim /etc/sysconfig/jenkins
#jenkins默认端口8080，若被占用或想更换端口，修改JENKINS_PORT的值
JENKINS_PORT="端口号"

3.初始化

initpwd.png installplugins.png
waitinstall.png

cat /var/lib/jenkins/secrets/initalAdminPassword

安装完成，创建一个用户

useradmin.png

安装 NodeJs插件，用于vue项目打包构建

confignode.png

找到nodejs 安装并重启

image.png
然后点击这个
image.png

配置node

image.png

4.配置自动化任务

image.png
image.png

git配置

image.png
image.png

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

cd /var/lib/jenkins/workspace/gshop #进入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 gshop.tar.gz #删除上次打包生成的压缩文件（一般建议备份，不要直接删除，这边测试就无所谓啦）
tar -zcvf gshop.tar.gz * #把生成的项目打包成压缩包，方便移动到项目部署目录
cd /usr/local/websit/gshop #进入web项目根目录
mv /var/lib/jenkins/workspace/gshop/dist/gshop.tar.gz ./   # 移动刚刚打包好的项目到web项目根目录
tar -zxvf gshop.tar.gz -C ./  #解压项目到dist目录
rm -rf gshop.tar.gz    #删除压缩包

最终步骤

image.png

保存点击build now

image.png
这里可以看到日志输出
image.png

至此Jenkins的配置已经配完成

二. GitHub+Jenkins联动配置

1. image.png
image.png
image.png
image.png

点击保存token，这个只显示一次，要保存好

2. 进入全局config

   
   image.png
   

   找到github

   
   image.png
   add一个Credentials
   image.png
   如图配置 image.png
   连接测试
   image.png
   如图说明测试成功
   当git push的时候就会触发Jenkins的自动构建，至此配置全部完成