使用Jenkins持续集成前端项目并自动化部署到Nginx服务器

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

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

声明:

  1. 后面的项目地址与打包地址都是使用em-mes,自行修改;
  2. 另外还有路径等,根据自己情况自行修改;

1. 安装

1.1 安装Nginx

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

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

教程网上不少,就不赘述了

1.2 安装Jenkins

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

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

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

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

注意这里因为要使用node的命令来执行创建后操作,所以还需要安装插件: NodeJS PluginDeploy to containerGithubPost build task

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

net start jenkins            // 启动Jenkins服务
net stop jenkins             // 停止Jenkins服务

2. 创建svn项目的Jenkins任务

2.1 新建

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

2.2 配置

General

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

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

源码管理

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

构建触发器

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

构建

cd cd C:\Jenkins\workspace\em-mes
node -v
npm -v
cnpm i
npm run build

构建后操作

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

我这里的 Log textBuild complete

Script:

rmdir /q/s C:\nginx-1.14.0\html\em-mes
xcopy /y/e/i C:\Jenkins\workspace\em-mes\em-mes C:\nginx-1.14.0\html\em-mes

复制生成好的文件到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脚本

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏测试开发架构之路

Spring Boot 入门实践

1775
来自专栏Java开发

SpringMVC接收数组

后台写@RequestParam("img_array[]") String[] img_array

984
来自专栏桥路_大数据

React Natived打包报错java.io.IOException: Could not delete path '...\android\support\v7'解决

4249
来自专栏吴柯的运维笔记

如何快速实现Jenkins部署?

软件介绍 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成...

2876
来自专栏惨绿少年

默认权限umask、文件系统权限、特殊权限

第1章 权限相关错误 1.1 普通用户 ls /root/ /root  属于root 普通用户没有任何权限,所以无法查看 [oldboy@znix ~]$ l...

4430
来自专栏java沉淀

swagger使用tags替换过期decription的坑

2992
来自专栏小白鼠

Jenkins远程部署

服务器之间如果已经配置了通过ssh无密码访问,有关于这一步的配置就结束了。如果没有配置,可以通过密码的方式进行访问,需要配置 密码 和 端口。点击高级:

9623
来自专栏蓝天

StarUML 5.0问题解决:Failed to open the model file. Invalid file format.

使用StarUML 5.0打开一个已有的文件时,如果遇到报“Failed to open the model file. Invalid file format...

931
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

轻松搞定GitHub Pages

GitHub支持创建个人或组织以及项目这两种类型的网站。 本文章将向大家分享如何为项目、组织或个人创建一个GitHub Pages。 为项目创建GitHub ...

3808
来自专栏我的小碗汤

这个404你能解决吗?

去看webapps里工程目录下,index.html文件是有的,见鬼了,是哪儿出了问题?

1343

扫码关注云+社区

领取腾讯云代金券