Ubuntu上Jenkins自动化部署Gitee上VUE项目

前文链接： Ubuntu上Jenkins自动化部署Gitee上SpringBoot项目

相关Jenkins和服务器环境都已配置完成。

1.安装NodeJS插件

Dashboard -> 系统管理 -> 插件管理 -> 可选插件，搜索nodejs，安装即可。

安装完成后重启Jenkins(空闲时)

2.配置全局工具配置-NodeJS环境变量

Dashboard -> 系统管理 -> 全局工具配置（Global tool configuration），添加NodeJS。

如果服务器已经安装了NodeJS，可以配置路径，否则可以选自动安装。

也可以添加多个node版本，后面选择其中一个使用。

保存就OK！这样我们在新建任务，配置项目构建环境时就可以选择这里配置的nodejs。

# 注意 服务器和Jenkins上是隔离的
# 这里服务器上没安node，我们选择自动安装。
# 服务器上执行时报错的
# node -v
bash: node: command not found
#这里执行是对的
# /root/.jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/NodeJS21/bin/node -v
v21.6.2
1
2
3
4
5
6
7
8

3.新建自由风格的软件项目任务

Dashboard -> 新建任务

• 输入任务名称
• 选择构建一个自由风格的软件项目
• 点击确认按钮

4.配置General

描述：就是注释，给我们这个job一个更便于其他查看的详解

Throttle builds：节流构建，通过设置时间段内允许并发的次数来实现构建的控制

• Number of builds：构建的次数
• Time period：设置指定的时间段，单位可以是年、月、日、周、时、分、秒

在必要时进行并发构建：满足策略要求时就会进行并发构建

安静期：设置一个时间来间隔每次构建的间隔

重试次数：这个和系统设置的一样，拉取源码重试的次数

该项目的上游项目正在构建时阻止该项目构建与该项目的下游项目正在构建时阻止该项目构建：用于上下游项目有关联的构建策略

使用自定义的工作空间：使该项目独立于系统的工作空间

配置丢弃旧的构建

设置构建历史的保存策略

• log Rotation：日志循环，只有一个默认值选项 Log Rotation，无须修改；
• 保持构建的天数：根据你所填写的天数来保存构建记录；
• 保持构建的最大个数：有几条构建记录保存；
• 发布包保留天数
• 发布包最大保留个构建

配置参数化构建过程

参数化构建，可以单击添加参数，在每次构建之前需要用户给参数赋值，根据不用的参数值执行不同的处理流程。

以一个示例场景为例，考虑到每次构建可能不需要运行npm install，我们可以通过参数化配置来判断是否在构建时执行这个依赖安装命令。

添加一个布尔值参数INSTALL_DEPENDENCIES.

5.配置源码管理

• 仓库 URL：https://gitee.com/lakernote/easy-admin.git。
• 凭证：用于访问Git仓库的用户名密码、ssh 密钥、token 等凭证。
• Branches to build：指定分支。

6.构建触发器

构建触发器用来设置触发项目构建的时间或者事件。

这里也可以什么都不选，然后手动在Jenkins点击按钮触发。

触发远程构建

勾选此复选框之后，Jenkins 会提供一个特定的 URL 用来触发项目的自动构建。为了安全起见，可以看到在 URL 之后还会要求有一个用于授权的 Token 字段。这样就可以使用 wget 或 curl 这样的工具触发构建。

其它项目构建完成后构建

用来设置在某个项目构建完成后才能触发本项目的构建。而且可以对其它项目的具体构建结果进行设定，比如，稳定的（成功），不稳定的，失败的。比如我们需要在 war 包发布成功后，再进行测试脚本的执行，这种场景下就可以配置此项。

定时构建

这是一种类似于 crontab 命令的功能，可以指定在某个或某些具体时间自动进行项目的执行。包含 5 个字段，这些字段以空格或者 Tab 键分割，用来指定多久去执行一次构建。格式为：

1. MINUTES：一小时内的分钟，取值范围（0-59）
2. HOURS：一天内的小时，取值范围（0-23）
3. DAYMONTH ：一个月中的某一天，取值范围（1-31）
4. MONTH ：月份，取值范围（1-12）
5. DAYWEEK：一周中的星期几，取值范围（0-7）。0 和 7 都表示星期日

# every fifteen minutes (perhaps at :07, :22, :37, :52).
H/15 * * * *

# every ten minutes in the first half of every hour (three times, perhaps at :04, :14, :24).
H(0-29)/10 * * * *

# once every two hours at 45 minutes past the hour starting at 9:45 AM and finishing at 3:45 PM every weekday.
45 9-16/2 * * 1-5

# once in every two hours slot between 9 AM and 5 PM every weekday (perhaps at 10:38 AM, 12:38 PM, 2:38 PM, 4:38 PM).
H H(9-16)/2 * * 1-5

# once a day on the 1st and 15th of every month except December.
H H 1,15 1-11 *
1
2
3
4
5
6
7
8
9
10
11
12
13
14

轮询 SCM

就是定期到指定的代码仓库查询是否有变化，如果有变化就执行。语法同 cron 是一样的。

与周期性构建的区别就是，让 Jenkins 在指定的时间去检查代码仓库是否有变化，有变化了才运行项目，而不是直接到点了就运行项目。

注意：最下面一行有一个复选框，忽略 post-commit 钩子，就是告诉 Jenkins 要忽略来自钩子的信号，目的就是为了防止重复触发操作。

7.设置构建环境

• Delete workspace before build starts 会在构建之前清空工作空间。
• Use secret text(s) or file(s) 使用加密文件或者文本。

8.配置构建步骤

选择执行shell

注意脚本中的一些相对目录问题。

# 在脚本中的执行结果如下
# 命令：echo $PATH
11:29:22 echo $PATH
11:29:22 /usr/lib/jvm/java-11-openjdk-amd64/bin:/root/.jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/NodeJS21/bin:/usr/lib/jvm/java-11-openjdk-amd64/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
# 命令： pwd
11:29:23 + pwd
11:29:23 /root/.jenkins/workspace/laker-vue
1
2
3
4
5
6
7

Shell内容

# 进入Jenkins工作空间下vue项目目录
cd ./laker-admin

# 根据 INSTALL_DEPENDENCIES 参数的值判断是否需要安装依赖包
if [ "$INSTALL_DEPENDENCIES" = true ]; then
    echo "下载依赖包"
    npm config set registry https://registry.npmmirror.com  # 设置npm镜像源
    npm config list  # 打印npm配置列表
    npm install  # 安装依赖包
fi

echo "删除dist目录"
rm -rf ./dist/*  # 删除dist目录下的所有文件

npm run build:prod  # 执行生产环境构建命令

echo "清空目标目录"
rm -rf /laker/admin-client/*  # 删除目标目录下的所有文件

# 确保目标目录存在
mkdir -p /laker/admin-client/dist

# 将构建生成的文件复制到目标目录
cp -rf ./dist/* /laker/admin-client/dist
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

9.配置构建后操作

一些常见的构建后操作包括：

• 邮件通知： 发送构建结果通知给指定的邮件地址。
• 部署到服务器： 将构建产物部署到指定的服务器。
• 触发其他任务： 在当前任务构建完成后触发其他Jenkins任务。
• 生成报告： 生成测试报告、代码覆盖率报告等。

点击保存按钮。

10测试构建

1.点击使用参数构建

2.在Console Output 菜单可以查看构建日志。

12:36:59   Images and other types of assets omitted.
12:36:59 
12:36:59  DONE  Build complete. The dist directory is ready to be deployed.
12:36:59  INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
12:36:59       
12:37:00 + echo 清空目标目录
12:37:00 清空目标目录
12:37:00 + rm -rf /laker/admin-client/*
12:37:00 + mkdir -p /laker/admin-client/dist
12:37:00 + cp -rf ./dist/favicon.ico ./dist/index.html ./dist/static ./dist/tinymce4.7.5 /laker/admin-client/dist
12:37:00 Finished: SUCCESS
1
2
3
4
5
6
7
8
9
10
11