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

liukai90 发布于2019-07-25 14:11 / 3087人阅读

摘要：上午折腾了一下持续集成，由于公司使用自己搭建的服务器来进行代码管理，因此这里是针对服务器来进行的配置，后面稍微介绍了下针对管理的项目的配置之前项目每次修改之后都需要本地一次手动发布到服务器上方便测试和产品查看，有了持续集成之后只要或者提交之

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

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

声明：

后面的项目地址与打包地址都是使用em-mes，自行修改；

另外还有路径等，根据自己情况自行修改；

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 Plugin、Deploy to container、Github、Post 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:Jenkinsworkspaceem-mes
node -v
npm -v
cnpm i
npm run build

构建后操作

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

我这里的 Log text 是 Build complete

Script：

rmdir /q/s C:
ginx-1.14.0htmlem-mes
xcopy /y/e/i C:Jenkinsworkspaceem-mesem-mes C:
ginx-1.14.0htmlem-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

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

参考：

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

Jenkins+github 前端自动化部署

配置Jenkins邮件通知

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

PS：欢迎大家关注我的公众号【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，长按识别下面二维码即可加我好友，备注加群，我拉你入群～

云服务器 GPU云服务器 jenkins持续集成部署前端到云服务器nginx 前端web项目部署到云服务器 Jenkins自动化部署

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/39821.html

DCOS应用案例-不同场景的应用上云迁移

摘要：极大地降低了平台的复杂度，更加方便企业开发人员实现各种业务应用，帮助企业轻松打造基于云计算的软件基础设施。本文将从实际案例出发，结合不同的使用场景，为各位介绍的这些特性。是未来数据中心操作系统的核心。 0.前言随着 Docker 技术的日渐火热，本就火爆的云计算行业进入了一个加速阶段。云计算最大的特点是弹性和灵活，帮助企业应对复杂的业务需求。由于云计算的IT构架和上一代的IT构架有很...

PumpkinDylan 2019-06-28 15:10 评论0 收藏0
使用Jenkins进行持续部署（PHP代码）

摘要：查看初始密码，这里我们的容器是首次进入，需要先安装插件，这里我们选择手工的去选择一些插件就行了，因为我们如果只是集成的话用不了多少插件插件选择我就不截图说明了，和里面得插件可以先取消。在docker项目中单机构建jenkins使用gitlab的webhook对项目进行持续部署注意本次项目是php项目没有build和test部分，至于test部分我们下一节进行，本次只是进行一个提交部署...

fjcgreat 2019-06-28 13:30 评论0 收藏0
优势+工具+实践=DevOps&Docker的企业级落地

摘要：的设计模式的设计模式以持续集成持续测试持续交付和持续部署为中心，自动化协作和持续监控是中使用的一些其他设计模式。持续集成持续集成是不断地将源代码集成到一个新的构建或发布的过程，源代码可以在本地存储中，也可以在或中。 showImg(https://segmentfault.com/img/remote/1460000010452455); 识别二维码报名活动 8月19日，来自微软、数人...

stormjun 2019-06-28 15:54 评论0 收藏0
Jenkins实现前端项目自动化集成打包部署

摘要：原博客地址实现前端项目自动化集成打包部署掘金地址前言以前写前端项目打包部署，都是手动运行命令，打包完，然后压缩，再上传到服务器解压。验证提交代码，成功自动打包部署提交代码，观察界面，出现构建任务，构建完成之后收到邮件通知。原博客地址:https://yezihaohao.github.io/2017/09/09/Jenkins实现前端项目自动化集成打包部署/掘金地址:https://...

Guakin_Huang 2019-08-21 16:26 评论0 收藏0