前端自动化编译Jenkins

前端项目自动化部署 = 3 步

Jenkins 拉取 Git 代码

执行 npm install & npm run build

把 dist 包发布到服务器 /nginx

1.windows安装虚拟机

VMware-workstation-full-17.6.1-24319023.exe link.zhihu.com/?target=htt...

2.下载# Ubuntu镜像

ubuntu.com/download/se...

3.创建虚拟机选择镜像

网络问题使用的最终配置查看网络：输入 ip a✅ 成功标志 ：看到 ens33 下面有了 inet 192.168.1.x 这样的真实 IP！

如果你之后需要用 Xshell、终端远程连接这台 Ubuntu：保留勾选「Install OpenSSH server」，密码认证也保持勾选即可

4、SSH 远程连接

在现有 Ubuntu 终端输入：

sql 复制代码

sudo apt update
sudo apt install openssh-server -y

启动并设置开机自启：

bash 复制代码

sudo systemctl start ssh
sudo systemctl enable ssh

确认 SSH 运行：

lua 复制代码

sudo systemctl status ssh

看到 active (running) 就 ok。

确认虚拟机 IP

css 复制代码

hostname -I

使用MobaXterm连接虚拟机

5.本地极简安装 Jenkins

直接用 Ubuntu 系统自带包安装 Jenkins（彻底避开 Docker 网络问题）

bash 复制代码

# 先更新软件源
sudo apt update

# 直接安装OpenJDK（Jenkins依赖）
sudo apt install openjdk-17-jdk -y

# 添加Jenkins官方源密钥
curl -fsSL https://pkg.jenkins.io/debian-stable/jenkins.io-2023.key | sudo gpg --dearmor -o /usr/share/keyrings/jenkins-keyring.gpg

# 添加Jenkins软件源
echo "deb [signed-by=/usr/share/keyrings/jenkins-keyring.gpg] https://pkg.jenkins.io/debian-stable binary/" | sudo tee /etc/apt/sources.list.d/jenkins.list

# 安装Jenkins
sudo apt update
sudo apt install jenkins -y

启动 + 开机自启

bash 复制代码

sudo systemctl start jenkins
sudo systemctl enable jenkins

检查状态

lua 复制代码

sudo systemctl status jenkins

✅ 看到 active (running) 就成功！

访问 + 登录

浏览器打开：http://172.17.173.95:8080 获取初始管理员密码：

bash 复制代码

sudo cat /var/lib/jenkins/secrets/initialAdminPassword

极简兜底方案（国内可用、一步到位）

1. 先清理无效源

bash 复制代码

sudo rm /etc/apt/sources.list.d/jenkins.list

2. 直接用Jenkins 国内离线包安装，彻底绕开源问题

Jenkins 最新版最低要求 Java 21 / 25，升级系统 Java 到 21

ini 复制代码

sudo apt install openjdk-21-jdk -y

# 设置默认Java版本
sudo update-alternatives --config java

# 下载Jenkins稳定版war包
wget https://mirrors.tuna.tsinghua.edu.cn/jenkins/war-stable/latest/jenkins.war

# 重新启动现有war包即可
java -jar jenkins.war --httpPort=8080

3.直接启动运行（无需 Docker、无需系统服务）

ini 复制代码

nohup java -jar jenkins.war --httpPort=8080 > jenkins.log 2>&1 &

6.配置jenkins

1. 必备插件安装

Git Plugin（拉取代码）
NodeJS Plugin（前端编译环境）
配置 Node.js
- 找到 NodeJS → 点击 新增NodeJS
- 自定义名称：node20
- 勾选 Install automatically
- 版本选：20.x.x
- 保存
配置 git
- 进入 Manage Jenkins（系统管理）
- 进入 Global Tool Configuration（全局工具配置）
- 找到 Git
- 点击 Add Git
- Name 填：git
- Path to Git executable 填：/usr/bin/git
- 保存

2.新建前端构建任务（核心）

新建任务

首页 → 新建任务
名字：前端自动打包
选择：自由风格项目 (Freestyle)
确定

开启「自定义脚本选择」（最关键）

勾选：

✅ This project is parameterized

点击 Add Parameter → Choice Parameter

按下面填写：

Name:

RUN_SCRIPT
Choices （一行一个，对应你 package.json 的 scripts）：

makefile 复制代码

build:LNFX
build:LNSY
build:YN
build:EW
build:EA
build:YD
build:GN
build:AHJD
build:GJDT
build:GJDTDB
build:GJDTNM
build:GJDTSX
build:GJDTXA
build:DT
build:DTAH
build:DTJS
build:DTSH
build:JDCC
build:YN2
build:DTXJHM
build:GSZDJ
build:DTHN
build:DTTKT
build:LNDT
build:JXDTJK
build:ZDJGYY
build:ZJJK
build:DTGDZQ
build:GDTWCJK
build:HNYNJK

Description:

选择要执行的命令

源码管理（拉代码）

选 Git
Repository URL：填你的 Gitee/GitHub 仓库地址
Credentials：添加你的仓库账号密码（personal_access_tokens->read_repository权限）
Branch：*/main 或 */master

构建环境

勾选：Provide Node & npm bin/ folder to PATH
选择：node20

Triggers（自动触发 + 定时检测）

只勾选这一项：

✅ Poll SCM
Schedule 填写（直接复制）：

H/2 * * * *

构建步骤（最重要！）

增加构建步骤 → 执行 shell
粘贴下面这段通用前端自动化打包脚本（直接复制）：

bash 复制代码

#!/bin/bash
set -e
# 1. 兼容老项目
export NODE_OPTIONS=--openssl-legacy-provider
# 🔥 强制关闭所有编译检查（关键）
#export DISABLE_ESLINT_PLUGIN=true
#export ESLINT_NO_DEV_ERRORS=true
#export VUE_CLI_SERVICE_NO_ERRORS=true

# 还原正确的 package.json（echarts 4.9.0）
git checkout -- package.json

# 2. 国内镜像
#npm config set registry https://registry.npmmirror.com

# ==========================================
# 🔥 核心：安装时 跳过二进制编译（解决 mozjpeg 报错！）
# 以后加新包也能正常装，同时不炸图片压缩
# ==========================================
install_deps() {
  # --- 1. 仅清理旧的构建产物 ---
  # 这一步必须保留，防止旧代码影响新包
  echo "清理旧的构建产物..."
  rm -rf dist
  rm -rf 70*_dist* # 清理历史文件夹
  rm -f *.zip       # 清理旧压缩包
  
  # 1. 彻底删除可能导致冲突的旧缓存和目录
  #rm -rf node_modules
  #rm -rf package-lock.json
  #rm -rf .cache
  #rm -rf node_modules/.cache
  
  # 2. 清理 npm 全局缓存（防止损坏的包反复被调用）
  #npm cache clean -f
  
  # 3. 重新设置镜像源
  npm config set registry https://registry.npmmirror.com
  
  echo "正在安装依赖..."
  
  # 4. 关键：移除 --ignore-scripts！
  # 如果是因为某个特定包（如 mozjpeg）报错，我们应该针对性解决，而不是全局跳过脚本。
  # 使用 --legacy-peer-deps 处理 Vue2/3 依赖冲突问题
  npm install --legacy-peer-deps

  # 5. 特殊处理 node-sass (如果你的项目还在用它)
  # 很多时候 node-sass 需要手动触发一次 rebuild 才能在 Linux 环境跑通
  if [ -d "node_modules/node-sass" ]; then
    echo "检测到 node-sass，尝试重新构建二进制文件..."
    npm rebuild node-sass
  fi
}

# 每次都执行（新加包能装上）
install_deps

# ====================== 构建逻辑 ======================
# 1. 这里的 DATE 必须和 Node 脚本里的 formattedDate 逻辑完全一致
DATE=$(date +%Y%m%d)
# 2. 这里的项目前缀获取逻辑 (假设你的 RUN_SCRIPT 是 build:LNFX)
# 我们把 build: 后面的名字取出来
PROJECT_NAME=$(echo ${RUN_SCRIPT} | cut -d':' -f2)

# 3. 这里的目录名必须和你的 setup.js 逻辑完全同步：70 + 项目名 + _dist + 日期
DIR_NAME="70${PROJECT_NAME}_dist${DATE}"

echo "====================================="
echo "🚀 预期构建目录: ${DIR_NAME}"
echo "====================================="

echo "====================================="
echo "🚀 开始构建：npm run ${RUN_SCRIPT}"
echo "====================================="

# 在 echo "🚀 预期构建目录: ${DIR_NAME}" 下方加入
if [ -z "${PROJECT_NAME}" ]; then
    echo "❌ 错误：无法从 RUN_SCRIPT (${RUN_SCRIPT}) 中提取项目名称！"
    exit 1
fi

npm run ${RUN_SCRIPT}

# 5. 【关键修复】打包逻辑
# 不再写死 if/else，直接根据上面生成的 DIR_NAME 去找
if [ -d "${DIR_NAME}" ]; then
    echo "✅ 找到目录 ${DIR_NAME}，开始压缩..."
    rm -f *.zip
    zip -r "${DIR_NAME}.zip" "${DIR_NAME}"
    echo "✅ 成功生成压缩包: ${DIR_NAME}.zip"
else
    # 容错：打印当前目录下的所有文件夹，方便调试
    echo "❌ 错误：未找到目录 ${DIR_NAME}"
    echo "当前目录下存在的目录有："
    ls -d */
    exit 1
fi

构建后操作（实现下载）

增加构建后操作 → Archive the artifacts
在 Files to archive 里填：

plaintext
markdown 复制代码
```
70*_dist*.zip
```

7.其他报错

安装zip

python 复制代码

sudo apt update && sudo apt install zip -y

图片压缩依赖的系统库

sql 复制代码

 sudo apt-get update sudo apt-get install -y autoconf automake libtool libpng-dev libjpeg-dev gcc g++ make

服务器证书验证失败（因为你的 GitLab 是私有地址、自签名证书，Git 默认不让拉）关闭 Git SSL 验证

arduino 复制代码

git config --global http.sslVerify false git config --global https.sslVerify false

Waiting for next available executor

1. 之前的失败任务卡住了"工位"

虽然任务显示失败了，但有时进程可能在后台挂起，占用了执行器。

解决方法：
- 看看左侧栏的 "Build Executor Status" （构建执行状态）。
- 如果有任务正在运行且进度条不动，点击旁边的 红色小叉叉 强制停止它。

2. 默认并发设置太低

Jenkins 默认可能只设置了 1 个或 2 个执行器。如果你之前的任务还在"取消中"或者有其他任务在排队，它就会显示等待。

手动增加执行器数量：
1. 点击左侧的 Manage Jenkins（管理 Jenkins）。
2. 点击 Nodes（节点管理，旧版本叫 Manage Nodes and Clouds）。
3. 点击列表中的 Built-In Node （或者名为 master 的节点）旁边的 齿轮（Configure） 。
4. 找到 Number of executors （执行器数量），把它从 1 或 2 改成 5。
5. 点击 Save。

重启jenkins

bash 复制代码

pkill -f jenkins 
pkill -f java
nohup java -jar /home/wzy/jenkins.war --httpPort=8080 > /dev/null 2>&1 &

VMware 扩容

sql 复制代码

sudo lvextend -l +100%FREE /dev/mapper/ubuntu--vg-ubuntu--lv
sudo resize2fs /dev/mapper/ubuntu--vg-ubuntu--lv

前端自动化编译Jenkins

1.windows安装虚拟机

2.下载# Ubuntu镜像

3.创建虚拟机选择镜像

4、SSH 远程连接

5.本地极简安装 Jenkins

极简兜底方案（国内可用、一步到位）

1. 先清理无效源

2. 直接用Jenkins 国内离线包安装，彻底绕开源问题

3.直接启动运行（无需 Docker、无需系统服务）

6.配置jenkins

1. 必备插件安装

2.新建前端构建任务（核心）

7.其他报错

安装zip

图片压缩 依赖的系统库

服务器证书验证失败（因为你的 GitLab 是私有地址、自签名证书，Git 默认不让拉）关闭 Git SSL 验证

Waiting for next available executor

1. 之前的失败任务卡住了"工位"

2. 默认并发设置太低

重启jenkins

VMware 扩容

图片压缩依赖的系统库