基于Jenkins从0到1实现前端的CI/CD

在软件工程中，CI/CD 通常指的是持续集成和持续交付或持续部署的组合实践。CI/CD 通过在应用程序的构建、测试和部署中实施自动化，在开发和运营团队之间架起了桥梁。当我们有了 CI/CD 的系统之后，我们就只需要编写代码，剩下的步骤都交给 CI/CD 系统来处理，这极大地解放了我们的双手，提升了开发效率。Jenkins 是一款以插件化的方式实现 CI/CD 的软件，提供超过 1000 个插件来支持构建、部署、自动化的需求。对于大厂来说都有自己比较成熟的 CI/CD 自动化方案，对于独立开发者来说，我们可以借助现有的比较成熟的开源工具做一套自己的自动化流水线。本文将基于 jenkins 结合笔者本人的前端项目来讲解前端自动化构建到自动化部署的整套流程。

1.linux 下 ubuntu 环境安装 Jenkins

安装java环境:  sudo apt-get install openjdk-8-jdk

将存储库密钥添加到系统: wget -q -O - https://pkg.jenkins.io/debian/jenkins-ci.org.key | sudo apt-key add -

将Debian包存储库地址附加到服务器的sources.list中:  echo deb http://pkg.jenkins.io/debian-stable binary/ | sudo tee /etc/apt/sources.list.d/jenkins.list

运行update ，以便apt-get将使用新的存储库（此处可能需要试很多次才能 update 成功）: sudo apt-get -y update

安装Jenkins及其依赖项： sudo apt-get install jenkins

2.Jenkins 的启动和相关配置

Jekkins启动命令： sudo systemctl start jenkins

使用status命令来验证它是否成功启动：sudo systemctl status jenkins

如上图所示，说明 jenkins 已经运行成功，jenkins 的默认运行端口时 8080，所以我们还需要开墙：

sudo ufw allow 8080

检查 UFW 的状态可以看到新的规则：

sudo ufw status

开墙之后，外网可以随意访问，因此可以通过自己的电脑端访问 jenkins 服务：http:// ip_address :8080。访问该地址我们可以看见 “解锁 Jenkins” 屏幕，并且页面显示了初始密码的位置，只需要在终端窗口中按照初始密码的位置打开，并将其粘贴到 “管理员密码” 输入框中。

点击继续，下一个屏幕提供安装建议的插件或选择特定插件的选项，我们将点击 “安装建议的插件” 选项，将立即开始安装过程。安装完成后，系统提示设置第一个管理用户，我们在此自己设置管理员账户，完成后即可进入到 Jenkins 首页界面。

jenkins 默认开启端口是 8080，有时候由于端口占用需要修改如下：

1. 检查 /etc/init.d/jenkins 脚本，修改 do_start 函数的 check_tcp_port 命令，端口号从 8080 换成 8082：
2. 修改 /etc/default/jenkins 文件，将端口 8080 改成 8082
3. 查看端口情况：sudo netstat -plntu
4. 重启 Jenkins： sudo systemctl restart jenkins

3. 创建 Jenkins 任务并实现 git 工具的 hooks 功能

第一次登录 Jenkins 工作台后点击创建一个新任务 ——> 选择自由风格的软件项目，并起一个名字 (此处笔者取名 testjenkins) —> 至此基础准备工作已经完成，接下来需要配置相关功能。

在向 github / 码云等远程仓库 push 我们的代码时，需要触发 jenkins 知道我们提交了代码，这是代码自动构建和自动部署流程能够进行的前提条件，这个过程实现原理：在远程 git 仓库上配置一个 Jenkins 服务器的接口地址，当本地向远端仓库发起 push 时，远端仓库会向配置的 Jenkins 服务器的接口地址发起一个带参数的请求，Jenkins 服务器就会接收并拉取到提交的代码。整个流程的配置步骤如下：

1. 打开新创建的任务，选择配置 - 源码管理，选择 Git, 在 repositry URL 添加远程仓库地址 (基于国内 github 请求的网络问题，此处选择国内码云 Gitee 地址)，在 credentials 里添加 Gitee 的用户和密码，在选择指定分支默认 master。

2. jenkins 接受和同步 git 的源代码，需要安装 Generic Webhook Trigger Plugin 插件，插件安装流程：jenkins 首页点击 Manage Jenkins ——> 在'管理 Jenkins'页面点击 Manage Jenkins ——> 搜索 Generic Webhook Trigger Plugin 并安装。

3. 上一步中安装的触发器插件功能很强大，可以根据不同的触发参数触发不同的构建操作。如下图中勾选 Generic Webhook Trigger 即可。

4. 仓库配置钩子 —— 此处以码云为例（github 的配置基本一致），进入码云项目主页后，点击管理 - webhooks - 添加，可以看到下图中的表单，URL 地址填写的格式为：http://:@<Jenkins IP 地址>: 端口 / generic-webhook-trigger/invoke。这里的 User ID 和 API Token 是可以从 jenkins 中取到的：Manage Jenkins ——> Manage Users ——> 用户列表的下拉符号选择设置 ——> User ID 就是 jenkins 账号，刷新 token 可以取到 API Token。 webhook 的密码填写自己最开始创建 jenkins 用户时候的密码。勾选 push 事件会在提交代码完成之后触发钩子推送代码到 jenkins 部署。

5. 测试钩子 —— 上面的配置完成之后可以点击测试按钮，有正常的请求和返回，就表示配置成功。也可以试下本地提交代码，提交代码后，jenkins 也会开始一个任务, 目前我们没有配置任务开始后让它做什么，所以默认它只会在你提交新代码后，将新代码拉取到 jenkins 服务器上。

4. 实现自动化构建流程

上述流程中 git push 操作触发钩子后，Jenkins 就要开始工作了，自动化的构建任务可以有很多种，比如说安装升级依赖包，单元测试，e2e 测试，压缩静态资源，批量重命名等等，无论是 npm script 还是 webpack，gulp 之类的工作流，你之前在本地能做的，在这里同样可以做到。我们这里只演示几个基本常用的工作流程，安装依赖包 -> 打包。这个自动化构建的配置流程如下：

1. 先要在 jenkins 里面配置 node 的环境，可以通过配置环境变量的方式引入 node，也可以通过安装插件的方式，这里使用了插件的方式，安装一下 nvm wrapper 这个插件（安装插件的过程可以参照上面的 3.2 步骤）。
2. 在 jenkins 任务的'构建环境'勾选'Run the build in an NVM managed environment', 同事选择 node 版本。

3. 点击'构建'，选择 ‘执行 shell’, 在输入框输入脚本命令，多个命令使用 && 分开。

4. 本地修改一下代码 push 测试一下（也可以点击立即构建测试），点击本次触发的那个任务，选择控制台输出，将会看到 Jenkins 在云端执行的过程。如果构建成功就可以看到构建打包后的产物。左边区域可以看到当前构建流程是否成功或者失败。

5. 实现自动化部署流程

1. 首先在 Jenkins 上装一个插件 Publish Over SSH，我们将通过这个工具实现服务器部署功能。在部署代码之前我们需要在自己的服务器上新建一个文件夹用来接受 Jenkins 传过来的代码，如下图我在服务建了一个文件夹 testjenkins。

2. Jenkins 想要访问服务器并且部署代码必须登录服务器才可以（就像我们自己手动部署一样都需要验证服务登录），这里有两种登录验证方式：一种是 ssh 验证，一种是密码验证。在 jenkins 首页点击 Manage Jenkins ——> Configure System ——> 滚动到 Publish over SSH。如下图所示是我们需要填写的登陆信息：passphrase 填写自己服务器的登录密码（此处已经隐藏）；SSH Servers name 填写标志的名称，而可以随意填写；SSH Servers Hostname 填写自己服务的外网 IP 地址；SSH Servers Username 填写服务器的登录用户名； SSH Servers Remote Directory 填写自己在服务器创建的接受代码的文件目录的路径。配置完成之后点击一下点击 Test Configuration 测试一下是否可以连接上，如果成功会返回 success，失败会返回报错信息，根据报错信息改正即可。

3. 进入我们创建的任务，点击构建，增加几行代码，意思是将打包编译的文件压缩，因为我们要远程传输服务器。

4. 增加构建后操作步骤，选择 Send files or execute commands over SSH，即当前的配置是在代码文件传输到服务器之后的操作：Source files ：填写你要传输的文件路径；Remove prefix ：要去掉的前缀；Remote directory ：写你要部署在远程服务器的那个目录地址下（不写就是 SSH Servers 配置里默认远程目录）；Exec command ：传输完了要执行的命令，这里执行了解压缩和解压缩完成后删除压缩包 2 个命令。

5. 至此整个自动化部署流程已经完成，我们去服务其上看看是否有拿到 jenkins 推过来的代码。后学 nginx 的配置流程此处不再赘述。