[特殊字符] 05_Jenkins 部署前端项目实现自动化部署

🚀 05_Jenkins 部署前端项目实现自动化部署

📦 一、创建 Item

1. 打开 Jenkins，点击 新建任务

2. 填写任务名称，选择 Freestyle project

   

🌱 二、配置源码管理

1. 在 源码管理 中选择 Git

2. 配置：

   • Repository URL：填写 Git 仓库地址

   • Credentials：填写仓库登录用户名/邮箱和密码

     

3. 如果没有 Credentials，需要点击 Add 新建一组。

   注意：此处的用户名密码为登录对应仓库的用户名密码。

   

🛠️ 三、配置 Node.js 环境

注意：

1. 确保 Jenkins 已安装 NodeJS Plugin
2. 在 Manage Jenkins → Global Tool Configuration 中添加 Node.js 版本
3. 勾选 Provide Node & npm bin/ folder to PATH

📝 四、配置打包 Shell 脚本

在 构建步骤 → Execute shell 中添加以下脚本：

cd /var/jenkins_home/workspace/video-review-vue3echo "进入 video-review-vue3 文件夹"npm install# 显式执行构建并等待完成
if npm run build; thenecho "✅ 构建完成！等待部署..."
elseecho "❌ 构建失败，请重试！"exit 1
fi# 确认 dist 目录存在
if [ ! -d "dist" ]; thenecho "⚠️ 错误: dist 文件夹未发现！"exit 1
fi

📤 五、配置文件传输 (Publish Over SSH)

1. 在 构建后操作 → Send files or execute commands over SSH（确保已安装插件 Publish Over SSH）

2. 配置：

   1. SSH Server，如果没有，需要在 Manage Jenkins → Configure System 中添加：
      

   2. Source files：dist/**

      注意：Transfer Set / Source files 的路径需要填写项目下的相对路径，项目路径可以在工作空间查看。

      

      譬如：我这里想要将 dist 下的所有文件传输过去，那么路径就应该为 dist/**。如果复制过去的只是 dist 下所有文件，则 Remove prefix 填写为 dist，Remote directory 为目标文件夹。

      

   3. Remove prefix：dist

   4. Remote directory：目标服务器路径