【CICD】Jenkins 构建部署前端项目

出于对 CICD 的研究与学习，在初步学习了解并安装 jenkins 后，记录一下对于使用 jenkins 部署前端项目的过程。

1.目标

希望能够实现的是：在本地使用 git 工具将项目代码推送到远程仓库（本篇使用 gitee 演示），利用 webHooks 触发 jenkins，将构建后的代码推送到指定的服务器，从而实现自动构建部署。

2.准备工作

1. gitee 项目仓库
2. jenkins (安装 NodeJs、Gitee、Publish Over SSH 等插件）
3. 网页服务器（用于项目部署成功后网页的展示，也可以是jenkins服务器，使用不同端口即可）

主要介绍一下 jenkins 插件的安装与配置的过程，所有插件的安装都可以在【Manage Jenkins】-【Manage Plugins】-【Avaliable Plugins】中搜索找到：

NodeJs

Publish Over SSH

由于我之前已经安装过【Gitee】，这里不做展示，在【Installed Plugins】中能够找到；插件安装最好选择安装后重启Jenkins，也就是【Download now and install after restart】；这有一个问题，如果 Jenkins 服务是通过容器启动的，那么在新版的 Jenkins 中自动重启将会失败，需要手动重启 Jenkins 容器，服务才能正常访问。

在安装完以上插件后，我们需要配置 NodeJS 环境以及 SSH 配置：
① 先说 NodeJS 环境，在【Manage Jenkins】-【Global Tool Configuration】中能够看到

根据项目环境需要选择对应的配置并保存，这里使用的是 Node16.18.0：

② 再就是 SSH 的配置，前往【Manage Jenkins】-【Configure System】，我们能够看到【 Publish over SSH】：

点击 SSH Servers 模块的【Add】按钮，填写别名、自己服务器相关 ip 、选择连接方式等等；我这里使用的是密码直连的方式，也可以选择秘钥：

填写完成后，可以通过【Test Configuration】测试配置是否可用，显示 success 代表能够正常使用，同时别忘点击保存：

3.执行

A.新建项目

在准备工作完成之后，我们回到面板，新建一个自由风格的 Jenkins 项目：

B.填写基本描述信息（可选）

C.配置源码管理【Source Code Management】

这就是远程仓库的管理配置了，选择【Git】，然后填写对应的仓库地址，然后在【Credentials
】下方点击【Add】添加登录仓库的用户名以及密码，最后选择刚添加的配置（默认 master 分支，可根据自身需要自行更改）：

D.配置构建触发【Build Triggers】

这里使用的是 Gitee 的仓库，在准备工作中下载的也是 Gitee 的插件；可根据不同远程管理仓库选择不同的构建触发；将 Gitee webhook URL 回填到 Gitee 中，并且点击【Generate】生成 Secret Token 填写到 Gitee 配置项中，具体如下图：

E.配置构建环境【Build Environment】

顾名思义，就是配置在代码构建时所需的环境，这里具体是指 NodeJs 的环境，我们在准备工作中已经安装并配置好了所需要的环境，现在直接选择【Provide Node & npm bin/ folder to PATH】使用 【Node16.18.0】即可：

F.配置构建步骤【Build Steps】

第一步，点击【Add build step】选择【Execute shell】，输入构建指令：

node -v 
npm -v

npm config set registry https://registry.npm.taobao.org #切换淘宝镜像
npm install 
npm run build

rm -rf dist.tar.gz # 删除原有的压缩包
tar -zcvf dist.tar.gz dist/* # 打包 dist 下的所有文件

第二步，将构建打包后的代码推送到指定文件夹，并将代码解压到服务指定位置：

rm -rf /www/wwwroot/front_end_demo/dist # 删除原先代码
tar -zxvf /root/code/front_end/dist.tar.gz -C /www/wwwroot/front_end_demo/ # 解压代码

G.执行构建

在本地推送代码到远程仓库后，触发构建，最终按照预期，成功将前端项目部署；并且通过宝塔配置网站服务后，通过 IP + Port 的形式进行访问：

4.总结

大致总结一下：

1. Git 推送代码，触发webhook;
2. Jenkins 服务被触发，执行构建；
3. Jenkins 通过 SSH 推送代码至服务器.