前端自动化部署方案探索(二)：Jenkins篇

碎碎念

---

工做日天天回到家只想睡觉，拖到如今才开始写这篇文章，不得不说只有周末在闲暇之余才有心情写本身的代码或者文章。

前言

---

上一篇讲了如何使用Docker去部署应用，但其实在自动化部署的过程当中，Docker并非必要的，甚至于你能够在服务器上本身搭建好环境，而后经过自动化部署工具去运行你部署项目所用到的命令。因此有无Docker并不影响自动化部署，不过更为方便。

在本方案中我使用了Jenkins来关联github而且实现自动化部署的一系列步骤。

Jenkins是由Java语言编写的一个持续集成(CI)工具，主要用于持续、自动地构建项目。

其实也可以本身去编写一个程序来代替Jenkins，不过为了早点体验到自动化部署的乐趣，在这里我就直接使用了Jenkins。

正文

---

首先，咱们须要先理清整个过程

1. 代码上传到github，Jenkins检测到github上代码有变化，将代码下载下来。
2. 代码下载以后，Jenkins自动下载项目所须要的依赖文件，而且将代码打包。
3. 经过咱们前面定义好的Dockerfile，执行docker build命令，将打包好的文件放进容器内。
4. 部署成功，访问监听的端口测试是否成功。

如今开始搭建自动化所须要的环境。

1、 Jenkins安装

首先安装jdk，由于jenkins是基于jdk运行的。若是已有jdk可忽略此步。

$ sudo apt update
$ sudo apt install openjdk-8-jdk
复制代码

而后添加jenkins的存储库，这里我用的是ubuntu系统，因此添加的是debian的存储库，首先先添加密钥。

$ 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'
复制代码

密钥和存储库都添加后，就能够下载Jenkins了

$ sudo apt update
$ sudo apt install jenkins
复制代码

下载成功后，经过该命令判断jenkins是否下载成功而且运行正常。

$ systemctl status jenkins
复制代码

这时候咱们能够经过访问服务器的8080端口来进入jenkins的页面，若是打不开能够查看8080端口是否开放。

而后根据jenkins的引导进行初始化的工做：输入jenkins生成的密码、配置插件、建立用户、配置jdk位置等。这一系列都完成后，jenkins的配置就先暂停到这。

2、github配置

jenkins配置好后，咱们须要让jenkins检测到github的代码变更，那么只能经过webhooks来实现这个功能。

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

选择这两个配置项后生成token， 须要将该token记下来，由于后面是查看不到该token的，而且后续咱们要使用到它。

而后在github上建立咱们所须要部署的项目，进入settings页面设置webhooks。

设置的url为 服务器的ip+端口+github-webhook。

3、Jenkins关联github

如今回到Jenkins上，首先咱们将Jenkins和github关联起来，根据该路径配置github信息：系统管理 -> 系统设置 -> github -> Add Github Server

点击凭据的添加按钮并填写以下信息，Secret为刚才咱们生成的Personal Access Token。

添加后咱们点击链接测试，能够发现链接失败，由于经过以前的安装方式，咱们须要配置多一个信息，若是不配置的话后续的操做是无效的，由于没法连通GitHub。

这个覆盖Hook URL内的内容，就是咱们刚才在github填写的那个地址。（由于这个问题搜集了好久才看到这个解决方案，截图太过于模糊）

连通github后，咱们在jenkins上建立一个项目，选择构建自由风格项目。而后在general内填写GitHub项目地址。

接着选择源码管理的选项卡，填写具体的信息。

在该配置信息中，credentials为github的帐号密码，branch内能够选择检测的分支。

信息所有配置好后，咱们开始配置构建的过程。选择构建触发器的选项卡，勾选以下几项：

这里的选择node环境，须要在jenkins内添加nodejs的插件。具体如何配置能够参考该文章： jenkins安装nodejs环境

最后，咱们配置jenkins自动构建的命令：

这个shell脚本内，我使用了docker container stop vue-docker的缘由是第二次构建的状况下，容器名称会冲突，由于尚未找到好的解决办法，因此先将原来的容器中止并删除掉，从新建立一个新的容器。

4、尝试构建

一切配置好后，点击保存并应用。而后咱们修改代码并push到master分支上，查看jenkins页面，查看构建队列或构建历史面板，能够看到构建的过程。

这些就是我这个项目的构建历史，中途的失败的记录是不断踩坑的过程。

总结

至此，该方案已经完成了整个流程，可是这个方案确定还存在着不少不足的地方，例如构建过程是否能把npm install的过程放到docker内执行等等问题。固然，自动化部署方案，如今也有比这个更为成熟的作法，例如服务器如果阿里云或腾讯云的，能够选择他们的容器服务，里面有更为简洁、友好的配置，而且可以避免我这个方案中的须要删掉原有的容器才能建立新容器的问题，惋惜在我配置好后才知道公司的自动化部署正是使用了腾讯云的配置，避免了这么繁琐的配置。

同时，在学习docker以及jenkins的过程当中，也参考了许多大牛的文章，例如一套真实前端开发环境搭建+可持续集成+自动化部署实践，正是这些前人写的文章避免了咱们重复踩坑的过程。

最后，若是文章中有什么不足之处，能够在下方指正:)