前端 Jenkins 自动化部署

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

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

声明:vue

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

  2. 另外还有路径等,根据本身状况自行修改;nginx

1. 安装

1.1 安装 Nginx

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

start nginx # 启动 nginx -s reload # 修改配置后从新加载生效 nginx -s reopen # 从新打开日志文件 nginx -t # 配置文件检测是否正确

 

1.2 安装Jenkins

 

 

 

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

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

 

 

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

而后提示 Jenkins is ready!→ Start using Jenkins ~npm

 

 

注意这里由于要使用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.0\html\my-demo xcopy /y/e/i C:\Jenkins\workspace\my-demo\my-demo C:\nginx-1.14.0\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

相关文章
相关标签/搜索