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

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

📦 一、创建 Item

  1. 打开 Jenkins,点击 新建任务
  1. 填写任务名称,选择 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 中添加以下脚本:

shell 复制代码
cd /var/jenkins_home/workspace/video-review-vue3

echo "进入 video-review-vue3 文件夹"

npm install

# 显式执行构建并等待完成
if npm run build; then
    echo "✅ 构建完成!等待部署..."
else
    echo "❌ 构建失败,请重试!"
    exit 1
fi

# 确认 dist 目录存在
if [ ! -d "dist" ]; then
    echo "⚠️ 错误: 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 filesdist/**

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

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

    3. Remove prefixdist

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

相关推荐
csgo打的菜又爱玩11 分钟前
Vue 基础(实战模板与命名指南)
前端·javascript·vue.js
ding_zhikai1 小时前
SD:在一个 Ubuntu 系统安装 stable diffusion Web UI
前端·ubuntu·stable diffusion
gerrgwg3 小时前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端·javascript·vue.js
你的人类朋友4 小时前
【Node】单线程的Node.js为什么可以实现多线程?
前端·后端·node.js
iナナ4 小时前
Spring Web MVC入门
java·前端·网络·后端·spring·mvc
驱动探索者4 小时前
find 命令使用介绍
java·linux·运维·服务器·前端·学习·microsoft
开心不就得了5 小时前
自定义脚手架
前端·javascript
星晨雪海6 小时前
怎么格式化idea中的vue文件
前端·vue.js·intellij-idea
没事多睡觉6666 小时前
Vue 虚拟列表实现方案详解:三种方法的完整对比与实践
前端·javascript·vue.js
white-persist6 小时前
Burp Suite模拟器抓包全攻略
前端·网络·安全·web安全·notepad++·原型模式