使用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脚本



相关文章
|
10月前
|
存储 文字识别 自然语言处理
通义大模型在文档自动化处理中的高效部署指南(OCR集成与批量处理优化)
本文深入探讨了通义大模型在文档自动化处理中的应用,重点解决传统OCR识别精度低、效率瓶颈等问题。通过多模态编码与跨模态融合技术,通义大模型实现了高精度的文本检测与版面分析。文章详细介绍了OCR集成流程、批量处理优化策略及实战案例,展示了动态批处理和分布式架构带来的性能提升。实验结果表明,优化后系统处理速度可达210页/分钟,准确率达96.8%,单文档延迟降至0.3秒,为文档处理领域提供了高效解决方案。
952 1
|
9月前
|
XML jenkins 机器人
JMeter+Ant+Jenkins实现接口自动化测试持续集成
本文介绍了如何使用Ant生成JMeter接口测试报告,并集成到Jenkins中实现自动化测试。内容涵盖Ant与JMeter环境配置、build.xml文件设置、测试执行及报告生成,同时包括Jenkins插件安装、项目配置和钉钉消息通知的集成,帮助实现持续测试与结果可视化。
1065 0
|
7月前
|
Java 测试技术 API
自动化测试工具集成及实践
自动化测试用例的覆盖度及关键点最佳实践、自动化测试工具、集成方法、自动化脚本编写等(兼容多语言(Java、Python、Go、C++、C#等)、多框架(Spring、React、Vue等))
507 6
|
人工智能 Kubernetes jenkins
容器化AI模型的持续集成与持续交付(CI/CD):自动化模型更新与部署
在前几篇文章中,我们探讨了容器化AI模型的部署、监控、弹性伸缩及安全防护。为加速模型迭代以适应新数据和业务需求,需实现容器化AI模型的持续集成与持续交付(CI/CD)。CI/CD通过自动化构建、测试和部署流程,提高模型更新速度和质量,降低部署风险,增强团队协作。使用Jenkins和Kubernetes可构建高效CI/CD流水线,自动化模型开发和部署,确保环境一致性并提升整体效率。
|
9月前
|
Web App开发 开发框架 .NET
Playwright 自动化测试系列(6)| 第三阶段:测试框架集成​指南:参数化测试 + 多浏览器并行执行
Pytest 与 Playwright 集成可提升自动化测试效率,支持参数化测试、多浏览器并行执行及统一报告生成。通过数据驱动、Fixture 管理和并行优化,显著增强测试覆盖率与执行速度,适用于复杂 Web 应用测试场景。
|
9月前
|
测试技术 API C++
Playwright 自动化测试系列(7)| 第三阶段:测试框架集成​​Page Object 模式
本课程详解Playwright测试框架中的Page Object模式,通过电商登录-下单实战演示PO架构设计与高级技巧,结合Pytest实现多用户测试。重点解析PO模式提升代码复用性、降低维护成本的核心价值,并提供常见问题解决方案,助力构建高可维护性的自动化测试体系。
|
12月前
|
人工智能 API 开发工具
GitHub官方开源MCP服务!GitHub MCP Server:无缝集成GitHub API,实现Git流程完全自动化
GitHub MCP Server是基于Model Context Protocol的服务器工具,提供与GitHub API的无缝集成,支持自动化处理问题、Pull Request和仓库管理等功能。
2379 2
GitHub官方开源MCP服务!GitHub MCP Server:无缝集成GitHub API,实现Git流程完全自动化
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
jenkins 测试技术 持续交付
软件测试中的自动化与持续集成
在现代软件开发过程中,自动化测试和持续集成已成为不可或缺的组成部分。本文将深入探讨自动化测试和持续集成的重要性、优势以及如何有效实施它们以提升软件质量和开发效率。通过具体案例分析,我们将展示这些技术如何在实际项目中发挥作用,并讨论其面临的挑战及应对策略。
374 60
|
Devops 测试技术 持续交付
软件测试中的自动化与持续集成:最佳实践与挑战
在快速迭代的软件开发周期中,自动化测试和持续集成(CI)已成为提高软件质量和加速产品上市的关键策略。本文探讨了自动化测试和CI的实施如何帮助开发团队提前发现缺陷、缩短反馈循环,并确保代码质量。我们将深入分析自动化测试的策略选择、工具应用以及面临的挑战,同时提供一些克服这些挑战的最佳实践。
584 27

推荐镜像

更多