安装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
初次使用，文章略有不足，请多指导
网友评论