windows下使用Jenkins自动部署前端工程项目

本文详细介绍了使用Jenkins进行自动部署的过程,包括安装配置Jenkins、NodeJS Plugin、PostBuildTask插件,以及如何设置自动构建任务,实现代码的自动拉取、编译和部署到Nginx服务器。

前言

最近捣鼓jenkins自动部署,踩了好多坑,记录下,防止以后又忘~ _ ~

准备工作

事先安装好 java(需自行配置环境变量) node git nginx(此样例中使用,可根据需求选择其他服务)
百度网盘 提取码 7x68 内含本博客所有需要安装的软件

安装nginx

直接解压到磁盘,根目录有一个.exe文件,双击即启动了nginx服务
在根目录html文件夹下新建一个auto文件夹,用来存放自动部署的文件

安装Jenkins

一路下一步即可
安装完成后 可选择修改端口号,在安装文件根目录的jenkins.xml下在这里插入图片描述我这里修改为8100 可随意设置。
修改完成之后重启jenkins服务。
打开任务管理器 服务 右击重启
在这里插入图片描述
重新打开网页 localhost:8100 会提示你输入密码,根据提示输入密码之后,加载完成后跳转到新手入门页面
在这里插入图片描述
点击安装推荐的插件(时间较久)
推荐插件安装完成后,注册一个用户名登陆,下一步实例配置默认保存即可。随后点击开始使用进入主页面。
需要再安装几个插件,NodeJS Plugin及post build task
进入主页后点击系统管理=>插件管理=>可选插件,搜索NodeJs及Post build task.

在这里插入图片描述在这里插入图片描述在这里插入图片描述
还需要配置下NodeJS参数,打开全局工具配置,找到NodeJS
在这里插入图片描述在这里插入图片描述完成后 点击保存

全部安装及配置后重启下服务,再重新打开页面。

点击创建一个新的任务
在这里插入图片描述在这里插入图片描述选择构建一个自由风格的软件项目 点击确定。进入创建任务主页面。
在这里插入图片描述描述可任意填写,github项目可不选,勾选丢弃旧的构建,防止存储过多历史构建
在这里插入图片描述源码管理中 勾选git(svn类似),输入项目地址,填写git用户名密码
在这里插入图片描述在这里插入图片描述在这里插入图片描述选中账户,下方的Branches to build可选择需要build的分支,我这里只做演示用,只有一个master分支.

构建触发器选择轮询SCM H/10 * * * * 代表每10分钟执行一次,注意,有空格
在这里插入图片描述
构建环境选择 Provide Node & npm bin/ folder to PATH

在这里插入图片描述构建标签栏中,选择增加构建步骤,选择执行windows批处理命令
在这里插入图片描述
输入
npm i
npm run build
(使用2次批处理命令的原因是,写在一起会只执行第一条命令,第二条命令会跳过)

在这里插入图片描述
在这里插入图片描述输入Script
rmdir /q /s "D:\Program Files (x86)\nginx-1.14.2\html\auto"
xcopy /y /e /i "C:\Program Files (x86)\Jenkins\workspace\auto-deploy\dist" "D:\Program Files (x86)\nginx-1.14.2\html\auto"
第一行为删除nginx服务下面的build文件
第二行为移动jenKinsbuild之后的包到nginx目录下, 注意双引号,不加双引号运行时会报错

在这里插入图片描述点击保存,跳到任务首页,点击立即构建
在这里插入图片描述编译完成后看下nginx目录下有没有文件
在这里插入图片描述可以看到 已经有了 ,并且项目也可以正常打开
在这里插入图片描述至此,自动构建的流程就已经结束了。

评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值