前端工程化之 CI/CD 实践

1. 背景介绍

前端工程化是指在前端开发过程中，通过工具和方法来提高开发效率、代码质量和可维护性的一种开发方式。前端工程化包括代码管理、构建、自动化测试、部署等方面，其中 CI/CD 是重要的一环。

本篇文档介绍了前端工程化中的 CI/CD 实践，包括环境准备、代码管理、~~自动化测试~~、部署等方面。具体操作中使用了 Nexus、Jenkins 和 GitLab 等工具。在操作中，首先将 Vue 代码 push 到 GitLab 仓库中，然后在 Jenkins 中配置流水线，勾选 Build when a change is pushed to GitLab，生成 Secret token 并在 GitLab 中设置 webhook，最后在 Jenkins 中构建自动化流程。此篇文档详细介绍了操作步骤，并提供了一些实用的截图，希望能够帮助大家更好地理解 CI/CD 的实践过程。

2. 准备工作

2.1 环境

Docker
Mac M1 版 Java 环境安装与配置

2.2 工具

2.3 代码

Vue3 项目前端 CI/CD 体验

3. 操作

首先将准备好的 Vue 代码 push 到 gitlab 仓库中，这里我已经准备好一切了。大家也可以参考下之前的文章。

3.1 Jenkins 安装 GitLab 插件

事先在 Jenkins 插件管理中安装 GitLab 插件。

然后重启下 Jenkins 。打开流水线配置。

Untitled 1.png

勾选 Build when a change is pushed to GitLab。

Untitled 2.png

点开“高级”，Generate 一下 Secret token ，保存。

Untitled 3.png

3.2 GitLab 设置 webhook

在 GitLab 中，先打开 Settings —> Network。

Untitled 4.png

找到 Outbound requests 勾选 Allow requests to the local network from webhooks and integrations，Save changes。

Untitled 5.png

再打开项目设置 Settings —> Webhooks。

Untitled 6.png

将上一步 Jenkins 中的 GitLab webhook URL 和 Secret token ，这里勾选下 Push event。

Untitled 7.png

Add webhook。

Untitled 8.png

3.3 webhook 测试 Push events

这样就生成了一个 Project Hooks，让我们 Test —> Push events。

Untitled 9.png

出现提示 Hook executed successfully: HTTP 200。

Untitled 10.png

3.4 触发 Jenkins 自动构建

这时候回到 Jenkins，已经自动构建。出现 Started by GitLab push by Administrator。

Untitled 11.png

我们在项目中 git push 一下，再回到 Jenkins 看看。太快了！已经自动构建完成。。显示 push by paxtonx。

Untitled 12.png

Console Output 信息。

Started by GitLab push by Administrator
Obtained Jenkinsfile from git http://192.168.2.159:9080/web/app-cicd
[Pipeline] Start of Pipeline
[Pipeline] node
Running on Jenkins in /Users/username/.jenkins/workspace/app-cicd
[Pipeline] {
[Pipeline] stage
[Pipeline] { (Declarative: Checkout SCM)
[Pipeline] checkout
The recommended git tool is: NONE
using credential ab8e0508-a9f3-4ff3-aa18-0afc27a4df08
 > git rev-parse --resolve-git-dir /Users/youngx/.jenkins/workspace/app-cicd/.git # timeout=10
Fetching changes from the remote Git repository
 > git config remote.origin.url http://192.168.2.159:9080/web/app-cicd # timeout=10
Fetching upstream changes from http://192.168.2.159:9080/web/app-cicd
 > git --version # timeout=10
 > git --version # 'git version 2.39.2 (Apple Git-143)'
using GIT_ASKPASS to set credentials 
 > git fetch --tags --force --progress -- http://192.168.2.159:9080/web/app-cicd +refs/heads/*:refs/remotes/origin/* # timeout=10
skipping resolution of commit remotes/origin/master, since it originates from another repository
 > git rev-parse refs/remotes/origin/master^{commit} # timeout=10
Checking out Revision 98d9675bb5a18d801bc55d3eb507b4b80b998e37 (refs/remotes/origin/master)
 > git config core.sparsecheckout # timeout=10
 > git checkout -f 98d9675bb5a18d801bc55d3eb507b4b80b998e37 # timeout=10
Commit message: "feat:build Jenkinsfile 1.1.0"
 > git rev-list --no-walk 4f85be6a03d4d93c9f39c78ee9ba7d3cc0c28a1b # timeout=10
[Pipeline] }
[Pipeline] // stage
[Pipeline] withEnv
[Pipeline] {
[Pipeline] stage
[Pipeline] { (Init)
[Pipeline] script
[Pipeline] {
[Pipeline] checkout
The recommended git tool is: NONE
using credential ab8e0508-a9f3-4ff3-aa18-0afc27a4df08
 > git rev-parse --resolve-git-dir /Users/username/.jenkins/workspace/app-cicd/.git # timeout=10
Fetching changes from the remote Git repository
 > git config remote.origin.url http://192.168.2.159:9080/web/app-cicd.git # timeout=10
Fetching upstream changes from http://192.168.2.159:9080/web/app-cicd.git
 > git --version # timeout=10
 > git --version # 'git version 2.39.2 (Apple Git-143)'
using GIT_ASKPASS to set credentials 
 > git fetch --tags --force --progress -- http://192.168.2.159:9080/web/app-cicd.git +refs/heads/*:refs/remotes/origin/* # timeout=10
skipping resolution of commit remotes/origin/master, since it originates from another repository
 > git rev-parse origin/master^{commit} # timeout=10
Checking out Revision 98d9675bb5a18d801bc55d3eb507b4b80b998e37 (origin/master)
 > git config core.sparsecheckout # timeout=10
 > git checkout -f 98d9675bb5a18d801bc55d3eb507b4b80b998e37 # timeout=10
Commit message: "feat:build Jenkinsfile 1.1.0"
[Pipeline] sh
+ pwd
/Users/username/.jenkins/workspace/app-cicd
+ ls -l
total 368
-rw-r--r--    1 username  staff    1401 May 14 14:47 Jenkinsfile
-rw-r--r--    1 username  staff    1763 May 13 11:07 README.md
-rw-r--r--    1 username  staff      38 May 13 11:07 env.d.ts
-rw-r--r--    1 username  staff     331 May 13 11:07 index.html
drwxr-xr-x  334 username  staff   10688 May 13 14:16 node_modules
-rw-r--r--    1 username  staff  140945 May 14 14:50 package-lock.json
-rw-r--r--    1 username  staff    1196 May 13 11:07 package.json
drwxr-xr-x    3 username  staff      96 May 13 11:07 public
drwxr-xr-x    9 username  staff     288 May 13 11:07 src
-rw-r--r--    1 username  staff     281 May 13 11:07 tsconfig.app.json
-rw-r--r--    1 username  staff     332 May 13 11:07 tsconfig.json
-rw-r--r--    1 username  staff     241 May 13 11:07 tsconfig.node.json
-rw-r--r--    1 username  staff     153 May 13 11:07 tsconfig.vitest.json
-rw-r--r--    1 username  staff     355 May 13 11:07 vite.config.ts
-rw-r--r--    1 username  staff     400 May 13 11:07 vitest.config.ts
[Pipeline] }
[Pipeline] // script
[Pipeline] }
[Pipeline] // stage
[Pipeline] stage
[Pipeline] { (Build)
[Pipeline] script
[Pipeline] {
[Pipeline] echo
Build project
[Pipeline] sh
+ node --version
v16.14.2
+ npm --version
8.5.0
[Pipeline] sh
+ npm install

up to date, audited 467 packages in 4s

111 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
[Pipeline] sh
+ npm run build

> app-cicd@0.0.0 build
> run-p type-check build-only

> app-cicd@0.0.0 build-only
> vite build

> app-cicd@0.0.0 type-check
> vue-tsc --noEmit -p tsconfig.vitest.json --composite false

[36mvite v4.3.5 [32mbuilding for production...[36m[39m
transforming...
[32m✓[39m 39 modules transformed.
rendering chunks...
computing gzip size...
[2mdist/[22m[2massets/[22m[32mlogo-277e0e97.svg       [39m[1m[2m 0.28 kB[22m[1m[22m[2m │ gzip:  0.20 kB[22m
[2mdist/[22m[32mindex.html                     [39m[1m[2m 0.42 kB[22m[1m[22m[2m │ gzip:  0.28 kB[22m
[2mdist/[22m[2massets/[22m[35mAboutView-4d995ba2.css  [39m[1m[2m 0.09 kB[22m[1m[22m[2m │ gzip:  0.10 kB[22m
[2mdist/[22m[2massets/[22m[35mindex-4646de73.css      [39m[1m[2m 3.14 kB[22m[1m[22m[2m │ gzip:  1.08 kB[22m
[2mdist/[22m[2massets/[22m[36mAboutView-b87b23ac.js   [39m[1m[2m 0.22 kB[22m[1m[22m[2m │ gzip:  0.20 kB[22m
[2mdist/[22m[2massets/[22m[36mindex-f6d09a3d.js       [39m[1m[2m76.05 kB[22m[1m[22m[2m │ gzip: 30.49 kB[22m
[32m✓ built in 3.67s[39m
[Pipeline] sh
+ ls -l
total 368
-rw-r--r--    1 username  staff    1401 May 14 14:47 Jenkinsfile
-rw-r--r--    1 username  staff    1763 May 13 11:07 README.md
drwxr-xr-x    5 username  staff     160 May 14 14:50 dist
-rw-r--r--    1 username  staff      38 May 13 11:07 env.d.ts
-rw-r--r--    1 username  staff     331 May 13 11:07 index.html
drwxr-xr-x  334 username  staff   10688 May 13 14:16 node_modules
-rw-r--r--    1 username  staff  140945 May 14 14:50 package-lock.json
-rw-r--r--    1 username  staff    1196 May 13 11:07 package.json
drwxr-xr-x    3 username  staff      96 May 13 11:07 public
drwxr-xr-x    9 username  staff     288 May 13 11:07 src
-rw-r--r--    1 username  staff     281 May 13 11:07 tsconfig.app.json
-rw-r--r--    1 username  staff     332 May 13 11:07 tsconfig.json
-rw-r--r--    1 username  staff     241 May 13 11:07 tsconfig.node.json
-rw-r--r--    1 username  staff     153 May 13 11:07 tsconfig.vitest.json
-rw-r--r--    1 username  staff     355 May 13 11:07 vite.config.ts
-rw-r--r--    1 username  staff     400 May 13 11:07 vitest.config.ts
[Pipeline] }
[Pipeline] // script
[Pipeline] }
[Pipeline] // stage
[Pipeline] stage
[Pipeline] { (Test)
[Pipeline] script
[Pipeline] {
[Pipeline] echo
Test project
[Pipeline] }
[Pipeline] // script
[Pipeline] }
[Pipeline] // stage
[Pipeline] stage
[Pipeline] { (Deploy)
[Pipeline] script
[Pipeline] {
[Pipeline] echo
Deploy project
[Pipeline] fileExists
[Pipeline] sh
+ rm -rf /Users/username/apps/app-cicd
[Pipeline] echo
Deploy project inited
[Pipeline] sh
+ mv dist/ /Users/username/apps/app-cicd
[Pipeline] sh
+ ls /Users/username/apps/app-cicd
assets
favicon.ico
index.html
[Pipeline] }
[Pipeline] // script
[Pipeline] }
[Pipeline] // stage
[Pipeline] }
[Pipeline] // withEnv
[Pipeline] }
[Pipeline] // node
[Pipeline] End of Pipeline
Finished: SUCCESS

3.5 浏览器测试

访问 http://192.168.2.159:8082/ 出现以下页面。

Untitled 13.png

4. 结语

另外由于时间关系，限于篇幅。很多地方有很大的优化空间，比如可以将此实践中的 npm 仓库地址改为私库地址，参照 nexus 搭建 npm 私库。如果你有一台服务器的话，也能把测试的代码项目映射到公网 IP 上，具体参照 frp 内网穿透。

以上便是前端工程化之 CI/CD 的全部内容了，谢谢大家能够看到这里。本人水平有限，如有疏漏错误的地方，还请各位大佬留言指正。

5. Jenkins 插件安装源更换

如果下载比较慢的话，修改下插件更新中心的地址。原地址 updates.jenkins.io/update-cent…

Untitled 14.png

这里更换为 mirrors.tuna.tsinghua.edu.cn/jenkins/upd… 提交。

Untitled 15.png

修改 /Users/username/.jenkins/updates/ 下，将 default.json 文件中 updates.jekins.io/download 替换为 mirrors.tuna.tsinghua.edu.cn/jenkins 保存后，重启 Jenkins。

➜  ~ ls -l ~/.jenkins/updates/
total 11976
-rw-r--r--@ 1 paxtonx  staff  2812314  5 14 12:00 default.json
-rw-r--r--@ 1 paxtonx  staff  2795250  5 14 11:05 default_backup.json
-rw-r--r--  1 paxtonx  staff    42940  5 14 11:05 hudson.plugins.gradle.GradleInstaller
-rw-r--r--  1 paxtonx  staff    55184  5 13 13:35 hudson.plugins.nodejs.tools.NodeJSInstaller
-rw-r--r--  1 paxtonx  staff     5683  5 14 11:05 hudson.tasks.Ant.AntInstaller
-rw-r--r--  1 paxtonx  staff     6868  5 14 11:05 hudson.tasks.Maven.MavenInstaller