jenkins打包发布前端项目

配置Jenkins进行Node.js前端项目的自动化构建与部署
本文详细介绍了如何配置前端Node.js的打包环境,包括安装Node.js插件,设置Jenkins的Node.js环境,下载并配置Git插件以从Gitlab标签拉取项目。接着,创建自由风格的发布项目,并配置构建流程,如添加钉钉告警,参数化构建,以及使用npm进行编译和构建操作,最后将编译后的文件打包并通过scp传输到web服务器进行部署。

1.配置前端nodejs打包环境

1.1安装nodejs插件

 

 1.2配置jenkins nodejs环境

2.下载git插件(使用此插件配置通过gitlab标签拉取项目)

3.创建一个自由风格的发布项目

 4.配置项目构建流程

    4.1添加钉钉告警

4.2配置参数化构建

 

 4.3配置源码管理为git拉取项目

 4.4配置构建环境

 4.5配置构建操作并发布到web服务器(编译命令需要咨询一下开发,不过一般都是用以下编译命令)

npm install   #配置npm编译环境
npm run build  #执行编辑
cd dist     #进入编译后的dist目录
rm -rf *.tar.gz  #将之前的压缩文件删除
tar -zcvf $tag.tar.gz ./*   #将dist目录下的所有文件打包压缩
scp *.tar.gz root@10.1.60.112:/etc/web/  #将压缩文件传送到web服务器
sh root@10.1.60.112 tar -zxvf /etc/web/*.tar.gz  #在web服务器上解压打包的压缩文件

5.项目构建测试

5.1启动项目构建

 5.2选择gitlab项目版本构建

 5.3构建完成后会收到钉钉通知

 

### 配置 Jenkins 在 Windows 环境下打包前端项目 要在 Windows 系统上配置 Jenkins打包前端项目,可以按照以下方法操作: #### 1. 安装并启动 Jenkins 下载 `jenkins.war` 文件后,在命令行中执行以下命令以启动 Jenkins: ```bash java -jar jenkins.war --httpPort=8080 ``` 通过浏览器访问 `http://localhost:8080` 进入 Jenkins 初始化界面[^4]。 #### 2. 创建一个新的 Jenkins Job 进入 Jenkins 主页后,点击左侧菜单中的 **New Item**,输入项目的名称,选择 **Freestyle project** 或者 **Pipeline** 类型的任务,并点击确认创建新任务[^3]。 #### 3. 工作空间路径设置 默认情况下,Jenkins 的工作目录位于 `C:\ProgramData\Jenkins\.jenkins\workspace\[job-name]`。如果需要更改此路径,可以在系统管理 -> 全局属性配置中调整全局的工作区位置[^2]。 #### 4. 安装 Node.js 插件及相关工具 为了支持 Vue 和其他基于 JavaScript 的框架开发,需确保安装了 Node.js 及其相关插件: - 前往 Jenkins 的插件管理中心 (Manage Jenkins > Manage Plugins),搜索并安装 **NodeJS Plugin**。 - 安装完成后返回到主页面,导航至 **Global Tool Configuration** 页面,添加新的 Node.js 版本供后续构建脚本调用[^5]。 #### 5. 构建触发器与参数化选项 根据实际需求决定是否启用定时计划或其他事件驱动机制自动触发改流程;另外还可以开启 “This project is parameterized”,允许开发者指定某些变量比如 Git 分支名作为动态输入项参与每次编译过程[^1]。 #### 6. 编写 Build 步骤 在构建阶段加入 Shell/Batch 脚本来执行必要的依赖安装以及生产环境下的资源生成动作,例如对于典型的 Vue CLI 应用来说可能包含如下两条核心指令: ```batch npm install npm run build ``` 这些命令会依据 package.json 中预设好的 scripts 字段完成相应的准备工作和最终产物制作。 #### 7. 后续处理措施 成功构建之后可考虑进一步扩展功能,像将产出文件上传至远程服务器或者存储于特定仓库之中形成正式可用版本等等附加步骤。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值