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



相关文章
|
11月前
|
弹性计算 Devops Shell
用阿里云 DevOps Flow 实现 ECS 部署自动化:从准备到落地的完整指南
阿里云 DevOps Flow 是一款助力开发者实现自动化部署的高效工具,支持代码流水线构建、测试与部署至ECS实例,显著提升交付效率与稳定性。本文详解如何通过 Flow 自动部署 Bash 脚本至 ECS,涵盖环境准备、流水线搭建、源码接入、部署流程设计及结果验证,助你快速上手云上自动化运维。
918 0
|
运维 Prometheus 监控
3 年部署经验总结:用自动化工具轻松管理 300+ 服务器开源软件
三年前接手公司IT部门时,我满怀信心,却发现部署效率低下。尽管使用了GitLab、Jenkins、Zabbix等100+开源工具,部署仍耗时费力。文档厚重如百科,却难解实际困境。一次凌晨三点的加班让我下定决心改变现状。偶然看到一篇国外博客,介绍了自动化部署的高效方式,我深受启发。
441 0
|
XML jenkins 机器人
JMeter+Ant+Jenkins实现接口自动化测试持续集成
本文介绍了如何使用Ant生成JMeter接口测试报告,并集成到Jenkins中实现自动化测试。内容涵盖Ant与JMeter环境配置、build.xml文件设置、测试执行及报告生成,同时包括Jenkins插件安装、项目配置和钉钉消息通知的集成,帮助实现持续测试与结果可视化。
1387 0
|
10月前
|
弹性计算 人工智能 前端开发
在阿里云ECS上部署n8n自动化工作流:U2实例实战
本文介绍如何在阿里云ECS的u2i/u2a实例上部署开源工作流自动化平台n8n,利用Docker快速搭建并配置定时任务,实现如每日抓取MuleRun新AI Agent并推送通知等自动化流程。内容涵盖环境准备、安全组设置、实战案例与优化建议,助力高效构建低维护成本的自动化系统。
2290 5
|
11月前
|
jenkins Java 持续交付
使用 Jenkins 和 Spring Cloud 自动化微服务部署
随着单体应用逐渐被微服务架构取代,企业对快速发布、可扩展性和高可用性的需求日益增长。Jenkins 作为领先的持续集成与部署工具,结合 Spring Cloud 提供的云原生解决方案,能够有效简化微服务的开发、测试与部署流程。本文介绍了如何通过 Jenkins 实现微服务的自动化构建与部署,并结合 Spring Cloud 的配置管理、服务发现等功能,打造高效、稳定的微服务交付流程。
1190 0
使用 Jenkins 和 Spring Cloud 自动化微服务部署
|
机器学习/深度学习 人工智能 运维
机器学习+自动化运维:让服务器自己修Bug,运维变轻松!
机器学习+自动化运维:让服务器自己修Bug,运维变轻松!
651 14
|
存储 人工智能 自然语言处理
ChatMCP:基于 MCP 协议开发的 AI 聊天客户端,支持多语言和自动化安装 MCP 服务器
ChatMCP 是一款基于模型上下文协议(MCP)的 AI 聊天客户端,支持多语言和自动化安装。它能够与多种大型语言模型(LLM)如 OpenAI、Claude 和 OLLama 等进行交互,具备自动化安装 MCP 服务器、SSE 传输支持、自动选择服务器、聊天记录管理等功能。
3163 16
ChatMCP:基于 MCP 协议开发的 AI 聊天客户端,支持多语言和自动化安装 MCP 服务器
|
监控 jenkins 测试技术
Ansible与Jenkins:自动化工具的对比
Ansible和Jenkins是自动化领域的两大巨头。Ansible专注于配置管理和任务自动化,采用无代理架构,使用YAML定义配置,具有幂等性和可扩展性。Jenkins则擅长持续集成和持续交付(CI/CD),支持丰富的插件生态系统,适用于自动化构建、测试和部署。两者各有优势,Ansible适合配置管理与大规模部署,Jenkins则在CI/CD方面表现出色。结合使用可创建更强大的自动化工作流,提升团队生产力和软件质量。选择工具时应根据具体需求决定。
|
运维 Ubuntu 应用服务中间件
自动化运维之路:使用Ansible进行服务器管理
在现代IT基础设施中,自动化运维已成为提高效率和可靠性的关键。本文将引导您通过使用Ansible这一强大的自动化工具来简化日常的服务器管理任务。我们将一起探索如何配置Ansible、编写Playbook以及执行自动化任务,旨在为读者提供一条清晰的路径,从而步入自动化运维的世界。
413 11

推荐镜像

更多