Jenkins web自动化部署工具安装

安装jenkins

系统centos7

wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo

然后执行下面的命令

rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key

然后安装jenkins

yum install -y jenkins

安装Java sdk1.7

检查java版本

java -version

如果是1.7以下，删除自带版本

rpm -qa | grep java

然后删除那些名字中开头是java的那些

rpm -e --nodeps java-1.7.0-openjdk-headless-1.7.0.75-2.5.4.2.el7_0.x86_64
rpm -e --nodeps java-1.7.0-openjdk-1.7.0.75-2.5.4.2.el7_0.x86_64

安装java jdk1.8

yum list java-1.8*

选择一个安装

yum install java-1.8.0-openjdk* -y

启动jenkins服务

service jenkins start

然后输入域名8080端口就能进入Jenkins服务了

配置Jenkins服务

第一次进入的时候需要配置jenkins密码

在服务器找到密钥，输入进去，即可进入Jenkins
/var/log/jenkins/jenkins.log

配置Jenkins

第一次进入以后jenkins，选择新手推荐配置

首先，我们进入github -> setting -> developers -> Personal Access Token页面，生成一个有读写权限的用户。

image

选择这两个配置项后生成token，需要将该token记下来，因为后面是查看不到该token的，并且后续我们要使用到它。

然后在github上创建我们所需要部署的项目，进入settings页面设置webhooks。

[图片上传失败...(image-8d0e10-1573724783005)]

设置jenkins的github配置

jenkins 安装Github Plugin插件,因为我们在配置jenkins的时候已经安装了所以这里可跳过， 如果没有 key 在jenkins 系统管理-->插件管理-->可选插件中安装。

jenkins 新建项目，选择构建自由风格项目

[图片上传失败...(image-2e964d-1573724783005)]

image

完成之后的页面如下，后面我们做关于项目的配置设置都是基于这样页面

image

jenkins 系统管理 --> 系统设置 --> GitHub --> Add GitHub Sever,设置一下jenkins关联 GitHub

image

[图片上传失败...(image-1b5935-1573724783005)]

按照如下图选择添加配置，这个时候就需要用到了我们第一步生成的 GitHub Personal Access Token，填写完毕确认添加

image

选择生成的凭证，测试jenkins连接github服务器,如下图说明一切都配置 ok，最后记得在页面底部保存配置

image

设置jenkins的项目 configure 配置

General 配置

image

Build Triggers && Build Environment && Bindings 选择配置

image

Build 项目打包发布配置，添加执行 Shell，由于不同的前端项目技术架构和打包方式不一样，这里需要你根据的你项目，了解一下一些常用shell命令，这里的命令操作可以理解为在你的服务器环境中。这里我以打包 vue 项目为例，构建打包后代码文件解压到nginx的指定目录。

image

echo $PATH
node -v
npm -v #检查编译环境
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
npm install 
npm run build #编译项目
cd dist
tar -zcvf dist.tar.gz * #所有文件压缩
tar -zxvf /root/.jenkins/workspace/vue-online-admin/dist/dist.tar.gz -C /usr/share/nginx/html #压缩文件解压到nginx映射目录
cd /root/.jenkins/workspace/vue-online-admin 
rm -R dist #删除项目打包后的残留

image

初次使用，文章略有不足，请多指导