我的博客地址
文章目录
- 项目及其技术栈介绍
- 前端: 项目初始化
- 前端: 使用Sass和Antd
- 前端: 开发体验优化
- 前端: 搭建路由和状态管理
- 前端: 支持Axios
- 前端: 打包与环境变量设置
- 前端: 团队代码规范
- 后端: 项目初始化和使用Koa相关
- 后端: 使用TypeORM和MySQL
- 部署: 使用nginx部署前端项目
- 部署: 后端部署
- 部署: 使用jenkins自动化部署
前言
这篇文章将是从零搭建博客系列的最后一篇,将会介绍jenkins的安装以及配合github webhook进行前后端项目的自动化部署,主要内容如下:
- 安装jenkins
- 配置jenkins和github webhook
安装jenkins
安装jenkins之前,首先看看他的配置需求:
基本上腾讯云的学生机都可以跑起来。
-
安装openjdk-8-jdk
jenkins依赖于java的openjdk,所以安装之前先安装openjdk-8-jdk。
首先输入sudo add-apt-repository ppa:openjdk-r/ppa
将仓库添加进来,这里需要注意的是,执行这个命令的时候会提示需要按一下回车。
之后sudo apt update
更新源。
最后输入echo y|sudo apt-get install openjdk-8-jdk
,稍等片刻安装完毕后。
输入java -version
查看版本,如果有下面的输出,则表明安装完毕:
安装jenkins
安装完openjdk-8-jdk之后,直接复制运行下面的代码下载并安装jenkins,这个安装的时间可能会比较长:
wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -
sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'
sudo apt-get update
echo y|sudo apt-get install jenkins
安装完毕后他会自动退出进程:
之后输入
sudo service jenkins start
开启jenkins,jenkins相关命令如下:sudo service jenkins start|stop|restart
然后我们在浏览器中输入
服务器ip:8080
,jenkins默认监听8080端口,稍等一会后会进入到该页面:注意: jenkins有可能因为防火墙跑不起来,这时候可以输入sudo ufw allow 8080
开放指定的端口,腾讯云的防火墙默认是关闭的,所以不存在这个问题。
-
jenkins初始化配置
根据提示需要输入一个密码,这个密码所在的文本就是上图中提示的路径,我们将它拷贝出来并输入进去点击继续:
之后点击安装推荐插件即可,之后继续等待,如果很多插件安装失败,请点击重试:
完成后我们创建一个管理员账号:
保存完成后就可以进入到jenkins操作界面了,该阶段即算完成。
配置jenkins和github webhook
这一节介绍如何将github与jenkins连接起来,介绍只以前端项目为例,因为前后端配置是一样的。
-
生成github personal access token
我们进入到github中,点击头像,选择setting:
然后点击Developer Setting:
之后点击personal access token:
点击生成token按钮:
之后按照下面的截图填写名字,勾选repo
和admin:repo_hook
选项,然后点击生成:
接下来会生成一个token,这个token务必用软件记下来,因为后面再回来找是找不到的了:
-
新建webhook
上述完成后我们去到要部署的项目中,比如我的就是test项目:
点击setting -> webhooks:
点击add webhook,然后按照下图填写信息,然后点击添加:
-
设置jenkins
之后我们来到jenkins页面,点击添加新项目:
填写完名字后,选择创建一个自由风格项目,然后确定:
接着去到jenkins自己的系统管理界面:
在github项点击添加github服务器:
然后输入名称,点击添加按钮添加jenkins凭证:
之后再弹出框中填写如下,之后点击确定:
然后在下拉框中选择你刚才填写的描述项,并勾上管理hook按钮:
点击连接测试,出现如下即为成功,点击底下的保存后退出:
我们回到刚才新建的项目中,点进去配置页面:
第一项General
勾选github项目,并将项目地址填进去:
第二项源码管理:
如果上面的Credentials没有选项,点击添加按钮选择jenkins,在弹出框中填写如下图,添加完毕后在点下拉框应该就要选项了:
第三项构建触发器选项:
第四项构建环建中选择该项:
之后下面会出现一个绑定项,点击新增,选择secret text:
然后选择之前填写的标识:
第五项构建选择执行shell,这个shell是在你的项目上传到github,github通知给jenkins之后执行的脚本:
比如下面一个简单的shell脚本:
安装依赖 -> build出静态文件 -> 将静态文件移到目标目录:
编辑完成后点击保存按钮。
验证成果
之后我们在前端中添加一行字,然后push到github上:
再来到jenkins中查看,你会发现项目开始自动部署了:
你可以点击进度条查看部署进度:
等待部署完成后,刷新页面,最新的效果就出来了:
后端部署的方式和前端类似,在这里就不做赘述了,大家也可以自己实践一下。
后记
从零搭建项目系列到这里就结束了,本打算再通过一篇文章写写把前端资源弄到cdn上去,但迫于目前已经没有已备案域名,所以这一步只能往后延,等以后有心思了再补上。
也希望大家能够提出意见帮助我调整文章内容,使其更易懂,帮到更多的人。