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

我的博客地址 正式地址 测试地址 前端源码 后端源码 文章目录 项目及其技术栈介绍 前端: 项目初始化 前端: 使用Sass和Antd 前端: 开发体验优化 前端: 搭建路由和状态管理 前端: 支持Axios 前端: 打包与环境变量设置 前端: 团队代码规范 后端: 项目初始化和使用Koa相关 后端: 使用TypeORM和MySQL 部署: 使用nginx部署前端项目 部署: 后端部署 部署: 使用jenkins自动化部署 前言 这篇文章将是从零搭建博客系列的最后一篇，将会介绍jenkins的安装以及配合github webhook进行前后端项目的自动化部署，主要内容如下: 安装jenkins 配置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 之后按照下面的截图填写名字，勾选repo和admin: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上去，但迫于目前已经没有已备案域名，所以这一步只能往后延，等以后有心思了再补上。 也希望大家能够提出意见帮助我调整文章内容，使其更易懂，帮到更多的人。

本文章由javascript技术分享原创和收集