当前位置: 首页 > Linux

前端自动化部署的深入实践

时间:2023-04-06 21:25:47 Linux

几年前我也在自动化部署方面做了一些努力,在此博客中分享我的学习,是自动化部署的一小步,也是前端的一大步砖头。感谢两位网友@_shanks和@TomCzHen的意见,让我有了继续优化部署流程的动力。本文主要对自动化部署过程中的版本管理和流程合理性做了一些改进。标准化工作流程,用户体验更佳!在自动生成更新日志之前,我手动修改了CHANGELOG.md来记录更新日志。感觉操作有点累,不是很规范。好在有前辈栽过树,于是考虑使用conventional-changelog-cli自动生成更新CHANGELOG.md,真是好用!什么是conventional-changelogGenerateachangelogfromgitmetadataGenerateachangelogbasedongitmetadata,conventional-changelog-cli是一个相关的命令行工具。安装conventional-changelog-clinpminstall-gconventional-changelog-cli初始化生成CHANGELOG.mdcdmy-projectconventional-changelog-pangular-iCHANGELOG.md-s以上命令基于上一个Feature,Fix,PerformanceImprovement或BreakingChanges等类型的提交记录生成或更新CHANGELOG.md。如果你想根据之前所有的commit记录生成一个完整的CHANGELOG.md,可以试试下面的命令:conventional-changelog-pangular-iCHANGELOG.md-s-r0将工作流代码添加到这里的暂存区那里第一步没什么特别的,就是每天写代码,然后把工作区的内容添加到暂存区。混帐添加。标准提交信息一个标准的提交信息一般分为Header、Body和Footer三部分。Header包括type、scope、subject等部分,分别用于描述commit的类型、影响范围和commit的简要说明。Body是详细的描述,可以写多行。Footer主要用于描述不兼容的变更(BreakingChange)或关闭问题(Closes#issue)。格式如下:():

举个栗子:feat(支持自动部署):结合conventional-changelog,配合部署脚本完成部署任务Conventional-changelog是一个很好的自动生成changelog的工具,加上自定义的部署脚本,整个部署过程变得更加规范BreakingChange:比较大的更新Closes#315其中,Header是必须的,Body和Footer可以被省略。大致了解规范后,就可以使用工具了。这里我们使用commitizen。npminstall-gcommitizen然后在项目根目录下运行如下命令:commitizeninitcz-conventional-changelog--save--save-exact运行成功后package.json会添加如下内容:"devDependencies":{"cz-conventional-changelog":"^3.1.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}}gitcommit这一步用git代替cz,cz指commitizen,通过交互式命令行完成commit操作。PSD:\\robin\\frontend\\spa-blog-frontend>gitczcz-cli@4.0.3,cz-conventional-changelog@3.1.0?选择您要提交的更改类型:专长:新功能?此更改的范围是什么(例如组件或文件名):(按回车键跳过)支持自动部署?写一个简短的、命令式的变更描述(最多86个字符):(37)结合Conventional-changelog,配合部署脚本完成部署任务?提供更详细的更改说明:(按回车键跳过)?有任何重大变化吗?不?此更改会影响任何未解决的问题吗?No[masteree41f35]feat(支持自动部署):结合conventional-changelog,配合部署脚本完成部署任务3个文件修改,15个插入(+),3个删除(-)处理版本号,updateCHANGELOG然后我们需要更新npm包的版本号,结合npmversion和conventional-changelog一起使用,CHANGELOG.md可以同时更新。好了,我们先准备脚本:"scripts":{"start":"vue-cli-serviceserve","build":"vue-cli-servicebuild","deploy":"nodedeploy","version":"conventional-changelog-pangular-iCHANGELOG.md-s&&gitaddCHANGELOG.md","postversion":"npmrundeploy"}根据实际版本选择更新patch/minor/major版本。假设我们更新小版本号,操作命令如下:npmversionminor-m'featureversionupdate'执行这条命令会更新package.json中的version字段,同时执行conventional-changelog-pangular-iCHANGELOG.md-s&&gitaddCHANGELOG.md,更新CHANGELOG.md。执行这条命令后,可以看到修改了CHANGELOG.md。npmhook触发部署脚本通过postversionhook触发部署脚本nodedeploy,开始部署工作。deploy.js文件内容如下:const{execFile}=require('child_process');constversion=process.env.npm_package_version;execFile('deploy.sh',[version],{shell:true},(err,stdout,stderr)=>{if(err){throwerr;}console.log(stdout);});这里使用nodejs的child_process模块??执行子进程,调用execFile执行deploy.sh,并将npm包版本号作为参数传递给deploy.sh。deploy.sh文件内容如下:#!/bin/bashnpmrunbuildhtmldir="/usr/share/nginx/html"uploadbasedir="${htmldir}/upgrade_blog_vue_ts"appenddir=$1uploaddir="${uploadbasedir}/${appenddir}"projectdir="/usr/share/nginx/html/blog_vue_ts"scp-r./dist/.txcloud:${uploaddir}sshtxcloud>/dev/null2>&1</usr/share/nginx/html/upgrade_blog_vue_ts/0.6.0如果要回滚版本,也可以修改软链接来实现,相当方便的。推送到远程最后别忘了把代码推送到远程仓库。查看gitpushupdatelogchangelog也很方便。修改了什么一目了然,可以直接跳转到commithistory,issue等。在剧集中可以看到,我是通过deploy.js调用deploy.sh的。之前想在npmscripts中直接调用deploy.sh,传入版本号参数,但是试了几种写法,都不行,所以记录在这里。"deploy":"deploy.shnpm_package_version""deploy":"deploy.sh$npm_package_version"貌似在npm脚本中调用sh脚本的时候只能写字面量参数,传变量作为参数好像不行.下面的字面量参数写法是可以的,但是感觉有点呆板,和自动化部署的主题不符。"deploy":"deploy.sh0.6.0"所以我还是选择通过deploy.js作为中介来调用deploy.sh。结论需要承认的是,我上面提到的部署过程是以我个人的项目为例。可能不是很规范,但通过自己的理解和摸索,也算是一套完整的部署流程,没有借用jenkins等工具。有了这次自??动化部署的学习经验,相信学习和使用jenkins会变得更加容易。接下来,我会继续优化和规范我的部署流程,jenkins自然会出现在我的计划中。我是创业公司的小前端负责人图思。每天还在为没完没了的业务代码发愁。我在打磨产品的道路上沉淀技术,探索成长路线。如果你和我一样,也在思考自己的技术成长和价值,欢迎加我微信交流讨论,微信IDice_lloly。我会在公众号猿出道和小程序土司博客同步博客内容,快来撩我!