1. 创建构建计划

1.1 选择自定义构建过程

1.2 配置代码源

根据需求选择代码源并配置代码仓库，配置完成后直接点击确定进入构建流程配置

2. 配置项目构建环境

可根据项目需求调整构建环境

3. 配置构建脚本

3.1 删除默认构建步骤&重命名阶段名称（可选）

3.2 新增构建步骤选择 命令-执行 Shell 脚本

3.3 编写构建脚本

前端构建脚本示例

# 安装 pnpm
npm i -g pnpm

# 使用 pnpm 安装依赖
pnpm i

# 执行 build 脚本
pnpm build

# 获取当前时间
now=$(date +%c)

# 在 index.html 第一行后插入构建时间
sed -i "1a\\<!-- build time ${now} -->" dist/index.html

4. 发布（部署线上环境）

4.1 新增构建阶段并新增步骤选择 其他-withCredentials 凭据

4.2 录入凭据

4.3 添加子步骤

发布脚本示例

# 创建.ssh文件夹
mkdir -p /root/.ssh
# 信任线上服务器 ip
ssh-keyscan -p $SCP_PORT $SCP_IP > /root/.ssh/known_hosts
# 通过 ssh 连接服务器并删除项目文件
ssh -p $SCP_PORT -i $SSH_PRIVATE_KEY_PATH root@$SCP_IP 'rm -rf /www/sites/*'
# 通过 scp 拷贝打包好的文件至服务器目录 -i 表示使用私钥登录服务器
scp -P $SCP_PORT -i $SSH_PRIVATE_KEY_PATH -r dist/* root@$SCP_IP:/www/sites

4.4 添加环境变量

4.5 配置缓存提高构建速度

pnpm 缓存目录 /root/workspace/.pnpm-store

5. push 代码测试自动构建