从零搭建项目(13) --- 部署: 使用jenkins自动化部署

我的博客地址

正式地址
测试地址
前端源码
后端源码

文章目录

  1. 项目及其技术栈介绍
  2. 前端: 项目初始化
  3. 前端: 使用Sass和Antd
  4. 前端: 开发体验优化
  5. 前端: 搭建路由和状态管理
  6. 前端: 支持Axios
  7. 前端: 打包与环境变量设置
  8. 前端: 团队代码规范
  9. 后端: 项目初始化和使用Koa相关
  10. 后端: 使用TypeORM和MySQL
  11. 部署: 使用nginx部署前端项目
  12. 部署: 后端部署
  13. 部署: 使用jenkins自动化部署

前言

这篇文章将是从零搭建博客系列的最后一篇,将会介绍jenkins的安装以及配合github webhook进行前后端项目的自动化部署,主要内容如下:

  1. 安装jenkins
  2. 配置jenkins和github webhook

安装jenkins

安装jenkins之前,首先看看他的配置需求:


image.png

基本上腾讯云的学生机都可以跑起来。

  • 安装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查看版本,如果有下面的输出,则表明安装完毕:

    image.png

  • 安装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

安装完毕后他会自动退出进程:

image.png

之后输入sudo service jenkins start开启jenkins,jenkins相关命令如下:
sudo service jenkins start|stop|restart
然后我们在浏览器中输入服务器ip:8080,jenkins默认监听8080端口,稍等一会后会进入到该页面:
image.png

注意: jenkins有可能因为防火墙跑不起来,这时候可以输入sudo ufw allow 8080开放指定的端口,腾讯云的防火墙默认是关闭的,所以不存在这个问题。

  • jenkins初始化配置
    根据提示需要输入一个密码,这个密码所在的文本就是上图中提示的路径,我们将它拷贝出来并输入进去点击继续:


    image.png

    之后点击安装推荐插件即可,之后继续等待,如果很多插件安装失败,请点击重试:


    image.png

    完成后我们创建一个管理员账号:
    image.png

    保存完成后就可以进入到jenkins操作界面了,该阶段即算完成。
    image.png

配置jenkins和github webhook

这一节介绍如何将github与jenkins连接起来,介绍只以前端项目为例,因为前后端配置是一样的。

  • 生成github personal access token
    我们进入到github中,点击头像,选择setting:

    image.png

    然后点击Developer Setting:
    image.png

    之后点击personal access token:
    image.png

    点击生成token按钮:
    image.png

    之后按照下面的截图填写名字,勾选repoadmin:repo_hook选项,然后点击生成:
    image.png

    接下来会生成一个token,这个token务必用软件记下来,因为后面再回来找是找不到的了:
    image.png

  • 新建webhook
    上述完成后我们去到要部署的项目中,比如我的就是test项目:


    image.png

    点击setting -> webhooks:


    image.png

    点击add webhook,然后按照下图填写信息,然后点击添加:
    image.png
  • 设置jenkins
    之后我们来到jenkins页面,点击添加新项目:


    image.png

填写完名字后,选择创建一个自由风格项目,然后确定:


image.png

接着去到jenkins自己的系统管理界面:


image.png

image.png

在github项点击添加github服务器:


image.png

image.png

然后输入名称,点击添加按钮添加jenkins凭证:


image.png

之后再弹出框中填写如下,之后点击确定:


image.png

然后在下拉框中选择你刚才填写的描述项,并勾上管理hook按钮:


image.png

点击连接测试,出现如下即为成功,点击底下的保存后退出:


image.png

我们回到刚才新建的项目中,点进去配置页面:


image.png

image.png

第一项General勾选github项目,并将项目地址填进去:

image.png

第二项源码管理:


image.png

如果上面的Credentials没有选项,点击添加按钮选择jenkins,在弹出框中填写如下图,添加完毕后在点下拉框应该就要选项了:


image.png

第三项构建触发器选项:


image.png

第四项构建环建中选择该项:


image.png

之后下面会出现一个绑定项,点击新增,选择secret text:


image.png

然后选择之前填写的标识:
image.png

第五项构建选择执行shell,这个shell是在你的项目上传到github,github通知给jenkins之后执行的脚本:


image.png

比如下面一个简单的shell脚本:
安装依赖 -> build出静态文件 -> 将静态文件移到目标目录:


image.png

编辑完成后点击保存按钮。

验证成果

之后我们在前端中添加一行字,然后push到github上:


image.png

再来到jenkins中查看,你会发现项目开始自动部署了:


image.png

你可以点击进度条查看部署进度:
image.png

等待部署完成后,刷新页面,最新的效果就出来了:


image.png

后端部署的方式和前端类似,在这里就不做赘述了,大家也可以自己实践一下。

后记

从零搭建项目系列到这里就结束了,本打算再通过一篇文章写写把前端资源弄到cdn上去,但迫于目前已经没有已备案域名,所以这一步只能往后延,等以后有心思了再补上。
也希望大家能够提出意见帮助我调整文章内容,使其更易懂,帮到更多的人。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268