前端 Jenkins 自动化部署

由于公司使用自己搭建的 svn 服务器来进行代码管理,因此这里 Jenkins 是针对 svn 服务器来进行的配置,其实跟Git 配置基本一致。

在没有自动化部署前

之前项目每次修改之后都需要本地 ​​npm run build ​​一次手动发布到服务器上方便测试和产品查看,

有了自动化部署后

有了Jenkins持续集成之后只要 svn 或者 git 提交之后就会自动打包,很方便,此次记录以备后询。

直接上步骤

  1. 安装
    1.1 安装 Nginx
    可以直接去官网下直接下载,解压缩 start nginx就可以使了,常用命令:
c 复制代码
    start nginx # 启动
    nginx -s reload # 修改配置后重新加载生效
    nginx -s reopen # 重新打开日志文件
    nginx -t # 配置文件检测是否正确

1.2 安装Jenkins

从官网下载文件安装之后,我这里安装到 ​​C:\Jenkins​​​(Mac 不用在意),默认端口 8080,这时候浏览器访问 ​​localhost:8080​​ 就能访问 Jenkins 首页,这里注意如果不安装到 C 盘根目录有些插件安装会出错

这里会让你去某个地方找一个初始密码文件打开并填到下面的密码框里,验证成功之后进入页面,选择 ​​Installsuggested plugins​​ 推介安装的插件

插件都安装完成之后进入用户登录界面,设定用户名、密码及邮箱。

然后提示 Jenkins is ready!→ Start using Jenkins ~

注意这里因为要使用node的命令来执行创建后操作,所以还需要安装插件:​​NodeJSPlugin​​​、 ​​Deployto container​​​、 ​​Github​​​、 ​​Postbuild task​​

这里顺便记录一下启动和关闭Jenkins服务的命令行:

​​net start jenkins // 启动Jenkins服务​​

​​net stop jenkins // 停止Jenkins服务​​

  1. 创建svn项目的Jenkins任务

2.1 新建

左边栏新建一个任务,输入一个任务名称,这里随便写一个

2.2 配置

General

这里才是重头戏,进入刚刚创建的任务的配置页面的 General

丢弃旧的构建就是检测到新的版本之后把旧版本的构建删除

源码管理

这里采用的是 svn 来管理代码,

构建触发器

这里的 Poll SCM 表示去检测是否更新构建的频率, ​​*****​​​ 表示每分钟, ​​H****​​ 表示每小时

c 复制代码
cd cd C:\Jenkins\workspace\my-demo

node -v

npm -v

cnpm i

npm run build

构建后操作

安装插件 ​​Postbuild task​​​ 后,可以在 增加构建后操作步骤中选择 ​​Postbuild task​​选项,增加构建后执行的script,具体也可以参考文章:jenkins部署maven项目构建后部署前执行shell脚本

我这里的 ​​Logtext​​​ 是 ​​Buildcomplete​​

c 复制代码
rmdir /q/s C:\nginx-1.14.0\html\my-demo

xcopy /y/e/i C:\Jenkins\workspace\my-demo\my-demo C:\nginx-1.14.0\html\my-demo

复制生成好的文件到Nginx的目录下,路径自行修改

相关推荐
星栈7 小时前
视频即代码,Remotion 能做什么、不能做什么
前端·音视频开发
广州华水科技7 小时前
单北斗GNSS位移监测系统的应用与技术解析
前端
用户47949283569158 小时前
从一句话或代码仓到可交互 HTML:开源 Agent 画图技能 Archify v3.2 实测与选型边界
前端·后端·面试
风骏时光牛马10 小时前
生成一个AI多模态标题,仅输出一条标题,无额外文字、问句、备选、配图、文案等任何附加内容,不需要其他的任务服务 只要标题。
前端
wangruofeng11 小时前
从 GIF 到 AVIF:网页图片格式演进与 2026 年选型指南
前端·架构
清晨Coding11 小时前
为什么用 React Developer Tools 查看组件树这么乱?
前端·react.js
鶴哥只手遮天12 小时前
《Electron 45.2.3 内核解剖》第 4 章 补丁体系:380 个补丁改了什么
前端·electron
FungLeo14 小时前
成为全栈·Vue 管理后台篇·分类树与标签管理:层级数据如何落到管理界面
前端·javascript·vue.js·分类树·naive ui·标签管理·前端数据结构
DeepVisionary16 小时前
Runway开源机器人大模型Praxis-1,推演延迟压到62毫秒
python·自动化
Lank_M17 小时前
白底都占八成,PNG 为何只在图表页赢过 JPG
前端