【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

【CICD】Jenkins 构建部署前端项目_第1张图片

Publish Over SSH

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

在安装完以上插件后,我们需要配置 NodeJS 环境以及 SSH 配置:
先说 NodeJS 环境,在【Manage Jenkins】-【Global Tool Configuration】中能够看到
【CICD】Jenkins 构建部署前端项目_第3张图片
根据项目环境需要选择对应的配置并保存,这里使用的是 Node16.18.0:

【CICD】Jenkins 构建部署前端项目_第4张图片
② 再就是 SSH 的配置,前往【Manage Jenkins】-【Configure System】,我们能够看到【 Publish over SSH】:
【CICD】Jenkins 构建部署前端项目_第5张图片
点击 SSH Servers 模块的【Add】按钮,填写别名、自己服务器相关 ip 、选择连接方式等等;我这里使用的是密码直连的方式,也可以选择秘钥:
【CICD】Jenkins 构建部署前端项目_第6张图片
填写完成后,可以通过【Test Configuration】测试配置是否可用,显示 success 代表能够正常使用,同时别忘点击保存:
【CICD】Jenkins 构建部署前端项目_第7张图片

3.执行

A.新建项目

在准备工作完成之后,我们回到面板,新建一个自由风格的 Jenkins 项目:
【CICD】Jenkins 构建部署前端项目_第8张图片

B.填写基本描述信息(可选)

【CICD】Jenkins 构建部署前端项目_第9张图片

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

这就是远程仓库的管理配置了,选择【Git】,然后填写对应的仓库地址,然后在【Credentials
】下方点击【Add】添加登录仓库的用户名以及密码,最后选择刚添加的配置(默认 master 分支,可根据自身需要自行更改):
【CICD】Jenkins 构建部署前端项目_第10张图片

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

这里使用的是 Gitee 的仓库,在准备工作中下载的也是 Gitee 的插件;可根据不同远程管理仓库选择不同的构建触发;将 Gitee webhook URL 回填到 Gitee 中,并且点击【Generate】生成 Secret Token 填写到 Gitee 配置项中,具体如下图:
【CICD】Jenkins 构建部署前端项目_第11张图片
【CICD】Jenkins 构建部署前端项目_第12张图片
【CICD】Jenkins 构建部署前端项目_第13张图片

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

顾名思义,就是配置在代码构建时所需的环境,这里具体是指 NodeJs 的环境,我们在准备工作中已经安装并配置好了所需要的环境,现在直接选择【Provide Node & npm bin/ folder to PATH】使用 【Node16.18.0】即可:
【CICD】Jenkins 构建部署前端项目_第14张图片

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 下的所有文件

【CICD】Jenkins 构建部署前端项目_第15张图片
第二步,将构建打包后的代码推送到指定文件夹,并将代码解压到服务指定位置:

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

【CICD】Jenkins 构建部署前端项目_第16张图片

G.执行构建

在本地推送代码到远程仓库后,触发构建,最终按照预期,成功将前端项目部署;并且通过宝塔配置网站服务后,通过 IP + Port 的形式进行访问:
【CICD】Jenkins 构建部署前端项目_第17张图片
【CICD】Jenkins 构建部署前端项目_第18张图片

4.总结

大致总结一下:

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

你可能感兴趣的:(CICD,jenkins,运维,前端,ci)