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

简介: 上午折腾了一下Jenkins持续集成,由于公司使用自己搭建的svn服务器来进行代码管理,因此这里Jenkins是针对svn服务器来进行的配置,后面稍微介绍了下针对Github管理的项目的Jenkins配置之前项目每次修改之后都需要本地npm run build一次手动发布到服务器上方便测试和产品查看,有了Jenkins持续集成之后只要svn或者git提交之后就会自动打包,很方便,此次记录以备后询。声明:后面的项目地址与打包地址都是使用em-mes,自行修改;另外还有路径等,根据自己情况自行修改;感兴趣的同学可以加文末的微信群,一起讨论吧~

上午折腾了一下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盘根目录有些插件安装会出错


微信截图_20220426212951.png


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


微信截图_20220426212956.png


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


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


微信截图_20220426213003.png


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


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


net start jenkins            // 启动Jenkins服务
net stop jenkins             // 停止Jenkins服务
复制代码


2. 创建svn项目的Jenkins任务


2.1 新建


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


微信截图_20220426213010.png


2.2 配置


General


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


微信截图_20220426213202.png


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


源码管理


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


微信截图_20220426213207.png


构建触发器


微信截图_20220426213213.png


这里的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上的项目为例


微信截图_20220426213330.png


其他配置和上面一章一样



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


试一试


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


微信截图_20220426213337.png


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


微信截图_20220426213343.png


50秒之后


微信截图_20220426213348.png


构建成功!构建用时54秒,现在访问本地地址http://localhost:8282/vue-element-template,已经能看到编译后的发布版本啦~如果你希望发布的是测试版本,可以自行修改构建后操作的script


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


参考:

  1. 使用Jenkins自动编译部署web应用
  2. Jenkins+github 前端自动化部署
  3. 配置Jenkins邮件通知
  4. jenkins部署maven项目构建后部署前执行shell脚本



相关文章
|
12月前
|
弹性计算 Devops Shell
用阿里云 DevOps Flow 实现 ECS 部署自动化:从准备到落地的完整指南
阿里云 DevOps Flow 是一款助力开发者实现自动化部署的高效工具,支持代码流水线构建、测试与部署至ECS实例,显著提升交付效率与稳定性。本文详解如何通过 Flow 自动部署 Bash 脚本至 ECS,涵盖环境准备、流水线搭建、源码接入、部署流程设计及结果验证,助你快速上手云上自动化运维。
944 0
|
运维 Prometheus 监控
3 年部署经验总结:用自动化工具轻松管理 300+ 服务器开源软件
三年前接手公司IT部门时,我满怀信心,却发现部署效率低下。尽管使用了GitLab、Jenkins、Zabbix等100+开源工具,部署仍耗时费力。文档厚重如百科,却难解实际困境。一次凌晨三点的加班让我下定决心改变现状。偶然看到一篇国外博客,介绍了自动化部署的高效方式,我深受启发。
452 0
|
XML jenkins 机器人
JMeter+Ant+Jenkins实现接口自动化测试持续集成
本文介绍了如何使用Ant生成JMeter接口测试报告,并集成到Jenkins中实现自动化测试。内容涵盖Ant与JMeter环境配置、build.xml文件设置、测试执行及报告生成,同时包括Jenkins插件安装、项目配置和钉钉消息通知的集成,帮助实现持续测试与结果可视化。
1404 0
|
11月前
|
Shell 网络安全 开发工具
服务器已经搭建好的项目如何关联至gitee对应仓库并且将服务器的项目代码推送至gitee-优雅草卓伊凡
服务器已经搭建好的项目如何关联至gitee对应仓库并且将服务器的项目代码推送至gitee-优雅草卓伊凡
656 5
|
11月前
|
弹性计算 人工智能 前端开发
在阿里云ECS上部署n8n自动化工作流:U2实例实战
本文介绍如何在阿里云ECS的u2i/u2a实例上部署开源工作流自动化平台n8n,利用Docker快速搭建并配置定时任务,实现如每日抓取MuleRun新AI Agent并推送通知等自动化流程。内容涵盖环境准备、安全组设置、实战案例与优化建议,助力高效构建低维护成本的自动化系统。
2318 5
|
监控 Java Linux
Apache NiFi项目的编译与部署于CentOS服务器
总而言之,Apache NiFi的编译和部署虽然涉及多个步骤,但这些操作步骤简明扼要,即使是不太熟悉Java或Maven的用户也能跟随指南完成。通过遵循上述步骤,您将能够在CentOS服务器上成功部署Apache NiFi,为您的数据流处理任务建立一个功能强大的平台。
622 16
|
12月前
|
jenkins Java 持续交付
使用 Jenkins 和 Spring Cloud 自动化微服务部署
随着单体应用逐渐被微服务架构取代,企业对快速发布、可扩展性和高可用性的需求日益增长。Jenkins 作为领先的持续集成与部署工具,结合 Spring Cloud 提供的云原生解决方案,能够有效简化微服务的开发、测试与部署流程。本文介绍了如何通过 Jenkins 实现微服务的自动化构建与部署,并结合 Spring Cloud 的配置管理、服务发现等功能,打造高效、稳定的微服务交付流程。
1218 0
使用 Jenkins 和 Spring Cloud 自动化微服务部署
|
弹性计算 安全
阿里云服务器镜像,快速迁移项目数据
有时候旧服务器快到期了,想把项目、数据、软件挪到新服务器上,如果全部重新搭建的话,那无疑是耗时又费力。有了镜像迁移,就方便了许多。
907 1

推荐镜像

更多