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



相关文章
|
监控 前端开发 测试技术
如何实现前端工程化的持续集成和持续部署?
通过以上步骤,可以建立一套完整的前端工程化 CI/CD 流程,实现前端代码从开发、测试、构建到部署的全自动化,提高开发效率、保证代码质量,快速响应用户需求和市场变化。
|
弹性计算 Kubernetes jenkins
如何在 ECS/EKS 集群中有效使用 Jenkins
本文探讨了如何将 Jenkins 与 AWS ECS 和 EKS 集群集成,以构建高效、灵活且具备自动扩缩容能力的 CI/CD 流水线,提升软件交付效率并优化资源成本。
1062 0
|
jenkins Devops Java
DevOps实践:Jenkins在持续集成与持续部署中的价值
【10月更文挑战第27天】在快速发展的软件开发领域,DevOps实践日益重要。Jenkins作为一款流行的开源自动化服务器,在持续集成(CI)和持续部署(CD)中扮演关键角色。本文通过案例分析,探讨Jenkins在Java项目中的应用,展示其自动化构建、测试和部署的能力,提高开发效率和软件质量。
585 2
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
监控 jenkins Shell
jenkins结合gitlab实现CI(持续集成)
通过本文的介绍,我们详细了解了如何结合Jenkins和GitLab实现持续集成。从环境准备、插件配置到Pipeline任务创建和CI流程监控,每一步都提供了详细的操作步骤和示例代码。希望本文能帮助开发者快速搭建起高效的CI系统,提高项目开发效率和代码质量。
1930 9
|
监控 jenkins Linux
从 Jenkins 持续集成出发:探究如何监控员工电脑屏幕
Jenkins 在企业信息化管理中用于自动化构建、测试和部署,提高开发效率。本文讨论了其重要性,并从技术角度探讨了屏幕监控的可能性,但明确反对非法监控,强调应合法合规地管理企业和尊重员工隐私。
419 12
|
运维 jenkins Java
Jenkins在持续集成与持续部署中的价值
Jenkins在持续集成与持续部署中的价值
|
jenkins Devops 测试技术
DevOps实践:Jenkins在持续集成与持续部署中的价值
【10月更文挑战第26天】随着DevOps理念的普及,Jenkins作为一款开源自动化服务器,在持续集成(CI)与持续部署(CD)中发挥重要作用。本文通过某中型互联网企业的实际案例,展示了Jenkins如何通过自动化构建、持续集成和持续部署,显著提升开发效率、代码质量和软件交付速度,帮助企业解决传统手工操作带来的低效和错误问题。
721 4
|
JavaScript 应用服务中间件 nginx
nginx部署vue项目
本文介绍了将Vue项目部署到Nginx的步骤,包括构建Vue项目、上传dist文件夹到服务器、安装Nginx、配置Nginx代理静态文件以及重启Nginx,确保了Vue应用可以通过域名或IP地址访问。
1192 1

推荐镜像

更多