这两天折腾了一下 Jenkins 持续集成,由于公司使用自己搭建的 svn 服务器来进行代码管理,因此这里 Jenkins 是针对 svn 服务器来进行的配置,Git 配置基本一致,后面也介绍了下针对 Github 管理的项目的 Jenkins 配置

之前项目每次修改之后都需要本地 npm run build 一次手动发布到服务器上方便测试和产品查看,有了Jenkins持续集成之后只要 svn 或者 git 提交之后就会自动打包,很方便,此次记录以备后询。

声明:

  1. 后面的项目地址与打包地址都是使用 my-demo,自行修改;

  2. 另外还有路径等,根据自己情况自行修改;

1. 安装

1.1 安装 Nginx

可以直接去官网下直接下载,解压缩 start nginx就可以使了,常用命令:

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的命令来执行创建后操作,所以还需要安装插件:NodeJSPluginDeployto containerGithubPostbuild task

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

  1. net start jenkins // 启动Jenkins服务

  2. net stop jenkins // 停止Jenkins服务

2. 创建svn项目的Jenkins任务

2.1 新建

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

2.2 配置

General

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

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

源码管理

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

构建触发器

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

构建

cd cd C:\Jenkins\workspace\my-demo

node -v

npm -v

cnpm i

npm run build

构建后操作

安装插件 Postbuild task 后,可以在 增加构建后操作步骤中选择 Postbuild task选项,增加构建后执行的script,具体也可以参考文章:jenkins部署maven项目构建后部署前执行shell脚本 - https://blog.csdn.net/minebk/article/details/73294785

我这里的 LogtextBuildcomplete

Script:

rmdir /q/s C:\nginx-1.14.\html\my-demo

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

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

3. 创建Github项目的Jenkins任务

Jenkins 不仅可以持续集成 svn 项目,Git 项目也是可以的,这里以 Github 上的项目为例:

其他配置和上面一章一样

这样如果 github 有新的 push 请求,都会自动化部署到之前的服务器上,可以说很方便了。

试一试

配置好了我们试一试,在刚刚 github 项目中随便 commit 一版到 github :

稍等片刻去本地 Jenkins 地址 http://localhost:8080/job/vue-element-template/就能看到 Jenkins 已经在构建中了

50秒之后:

构建成功!构建用时 54 秒,现在访问本地服务器地址 http://localhost:8282/vue-element-template,已经能看到编译后的发布版本啦~

如果你希望发布的是测试版本,可以自行修改构建后操作的 script


网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~

参考:

  1. 使用Jenkins自动编译部署web应用

  2. Jenkins+github 前端自动化部署

  3. 配置Jenkins邮件通知

  4. jenkins部署maven项目构建后部署前执行shell脚本

文章来源: SHERlocked93

前端 Jenkins 自动化部署的更多相关文章

  1. 对前端Jenkins自动化部署的研究

    1. 安装 安装 Nginx 1.1去官网下直接下载,解压缩 start nginx就可以使了,常用命令: start nginx # 启动 nginx -s reload # 修改配置后重新加载生效 ...

  2. Linux下的Jenkins+Tomcat+Maven+Gitlab+Shell环境的搭建使用(jenkins自动化部署)

    jenkins自动化部署 目标:jenkins上点构建(也可以自动检查代码变化自动构建)>>>项目部署完成. 一.安装jenkins 1.下载jenkins 这里我选择的是war包安 ...

  3. Linux下的Jenkins+Tomcat+Maven+Git+Shell环境的搭建使用(jenkins自动化部署)【转】

    jenkins自动化部署 目标:jenkins上点构建(也可以自动检查代码变化自动构建)>>>项目部署完成. 一.安装jenkins 1.下载jenkins 这里我选择的是war包安 ...

  4. Jenkins自动化部署代码

    通过jenkins自动化部署项目代码可以大幅度节省打包上传部署的时间,提高开发测试的工作效率 ========== 完美的分割线 =========== 1.Jenkins是什么 1)Jenkins是 ...

  5. Linux下的Jenkins+Tomcat+Maven+Git+Shell环境的搭建使用(jenkins自动化部署)

    jenkins自动化部署 目标:jenkins上点构建(也可以自动检查代码变化自动构建)>>>项目部署完成. 一.安装jenkins 1.下载jenkins 这里我选择的是war包安 ...

  6. AspNetCore容器化(Docker)部署(四) —— Jenkins自动化部署

    一.前言 (Jenkins.Docker.Git/Svn组建一套简单的自动化发布流程) 文章中用到的相关服务器角色 角色 环境 功能 开发机 Win10.Docker(Linux OS) 编码.调试 ...

  7. jenkins自动化部署项目1--下载安装启动(windows)

    年初以来断断续续研究jenkins自动化部署项目,前些天终于搞定了,接下来一点点把做的时候遇到的坑以及自己的心得写下来,方便以后复用. 我的jenkins服务是是部署在windows上的 一.下载安装 ...

  8. Jenkins自动化部署入门详细教程

    大纲 1.背景 在实际开发中,我们经常要一边开发一边测试,当然这里说的测试并不是程序员对自己代码的单元测试,而是同组程序员将代码提交后,由测试人员测试: 或者前后端分离后,经常会修改接口,然后重新部署 ...

  9. Windows环境下实现Jenkins自动化部署

    详见:https://blog.csdn.net/Try_harder_every_day/article/details/79170065 Jenkins自动化部署: 几条具体的思路:1.开发人员将 ...

随机推荐

  1. Eclipse怎么改变工程保存路径

    1:首先我们要把servers中的Tomcat v8.0 Server at localhost [Stopped]的删除 2:我们再进行加入Tomcat v8.0,,,,直接点击蓝色就弹出下面的页面 ...

  2. ASP.NET 打包发布中没有Visual Studio Installer

    环境:win7 64位 : VisualStudio2015 问题描述 创建安装程序时,VisualStudio中没有打包安装程序的Visual Studio Installer功能 解决方法 下载V ...

  3. CSS3总结四:盒模型(box)

    盒模型:标准盒模型.混杂盒模型 什么时候会触发混杂模式? 为什么要混杂模式渲染规则盒模型? box-sizing:content-box.border-box 关于盒模型的一些其他样式和属性值 一.盒 ...

  4. <%%> <%! %> <%=%> <%-- --%> jsp中jstl一些运用

    <%%> 这里面可以添加java代码片段<%! %> 这里添加java方法 主要是用来声明变量的 <%=%> 将变量或表达式值输出到页面<%-- --%> ...

  5. 记录--mac下终端内的环境变量问题

    一直使用的是前几年买的MacBook Air,当时感觉很轻薄,外观也非常的好看,也是一直用到现在,大概有三四年了,系统还是很流畅(实话,不是打广告......).平时也是经常要使用mac的终端,说实话 ...

  6. 目标检测之车辆行人(darknet版yolov3)

    序言      自动驾驶是目前非常有前景的行业,而视觉感知作为自动驾驶中的“眼睛”,有着非常重要的地位和作用.为了能有效地识别到行驶在路上的动态目标,如汽车.行人等,我们需要提前对这些目标的进行训练, ...

  7. 第1章 python入门

    1.1 python的出生与应用   python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打发时间,决心开 ...

  8. linux 计划任务超时控制和并发控制

    Linux crontab 的配置存放 /var/spool/cron 目录下. Linux crontab的日志文件存放再 /var/log/cron* timeout 命令 timeout 给脚本 ...

  9. 数据库——Oracle(3)

    1 排序:对查询返回的结果,根据某一个列或者某几个列的列值大小进行升序或者降序排列. 1)根据某一个列的列值大小进行升序或者降序排列 格式: select 列名/* from 表名 order by ...

  10. gcd(欧几里得算法)与exgcd(扩展欧几里得算法)

    欧几里得算法: 1.定义:gcd的意思是最大公约数,通常用扩展欧几里得算法求 原理:gcd(a, b)=gcd(b, a%b) 2.证明: 令d=gcd(a, b)  =>  a=m*d,b=n ...