小白也能做出满分前端工程:01 配置管理(下)

简介: 小白也能做出满分前端工程:01 配置管理

当然了,本文的重点不在这,所以咱就不多聊这个。

接着往下看,现在视线挪到架构图底部(CI写配置):

了保证服务在启动的时候能拿到配置文件,我们需要在CICD的时候就提前把配置从远端拉下来,写入文件,并打包到服务镜像中。

这时候你要问了,从CI到CD可能需要等很久,除了漫长的构建时间之外,可能还有一些更加漫长的审批等待环节,或者等夜深人静的时候延时发布之类的状况,那在此期间如果配置有变更怎么办?我们的配置文件可是提前就打包好了呀!

别急,解决办法这不就来了么!视线回到架构图右上方:

image.png

服务部署完毕,正式启动的时候,先执行配置初始化操作(initConfig),从远端配置中心拉取最新的配置到服务器上,并且与旧配置进行融合(Combination),这不就解决了刚刚你担心的配置陈旧的问题了么。

同时,我们需要有一个好习惯,把这份最新的配置存一份文件到服务器本地:

image.png这一步看似多余的备份操作,实则是一次系统稳定性的兜底操作,万一远端配置中心挂了(别人挂不挂咱管不到,咱只能尽可能保证自己不挂),那此时这一份兜底文件就至关重要了!代码实现类似这样:

const fetchRainbowConfig = async () => {
  try {
    // ……省略部分代码
    // 从远端配置中心拉取最新配置
    const config = await rainbowInstance.getGroup();
    const configPath = path.join(__dirname, `../../.env/${RAINBOW_GROUP || 'dev'}`);
    // 写入本地文件
    fs.writeFileSync(configPath, JSON.stringify(config));
    return config;
  } catch (error) {
    console.error('fetch rainbow group config fail!Try to fetch from local');
    // 兜底操作,从本地配置文件读取
    return fetchConfigFromLocal();
  }
}

结束了吗?嗯,做到这一步,其实已经是一个相当不错的工程了,但是我还不满足!这顶多算是一个80分的工程。

咱再继续优化,把视线挪到架构图右下方(Config Watcher):

image.png

我们再加上一个配置监听器Config Watcher,用来做什么呢?

聪明的你应该不难看懂,这个监听器,可以实时监听远端配置的更新,从而实现配置热更新,在某些场景下配置变更不再需要重新发布服务

比如哪天出现一个线上逻辑Bug,需要发一个紧急公告,这时候不用改代码,也不用重新走漫长的CICD流程,只需要在配置系统里加一个公告字段,需要发公告时修改该字段,服务器上的配置监听器就会察觉到更新,立即热更新到内存中。

image.png

是不是帅呆了!我愿意打一百分!💯

没错,你做到这一步,这个系统的配置管理模块就算是相当成熟了,既有一定的容灾能力,又有相当的敏捷能力,而且可读性极高,非常利于维护!谁用了不说声好?

好了,一个成熟优秀的企业级配置管理方案,沐洒已经给你倾囊相赠了。

你,学废了吗?



全文完。

码字不易,如果你还想继续看我写的东西,就关注我吧(记得加星标🌟哦),顺便给个赞👍或点一下在看,你的支持是我继续写下去的动力。

目录
相关文章
|
9月前
|
设计模式 前端开发 算法
前端工程中的设计模式应用(下)
前端工程中的设计模式应用(下)
|
监控 前端开发 JavaScript
带你入门前端工程(十一):微前端(下)
带你入门前端工程(十一):微前端(下)
157 0
|
9月前
|
前端开发 应用服务中间件 nginx
Javaweb之前端工程打包部署的详细解析
6 打包部署 我们的前端工程开发好了,但是我们需要发布,那么如何发布呢?主要分为2步: 前端工程打包 通过nginx服务器发布前端工程 6.1 前端工程打包
201 0
Javaweb之前端工程打包部署的详细解析
|
9月前
|
监控 前端开发 JavaScript
如何测试前端代码? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
如何测试前端代码? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
172 0
|
4月前
|
缓存 前端开发 JavaScript
前端的全栈之路Meteor篇(二):容器化开发环境下的meteor工程架构解析
本文详细介绍了使用Docker创建Meteor项目的准备工作与步骤,解析了容器化Meteor项目的目录结构,包括工程准备、环境配置、容器启动及项目架构分析。提供了最佳实践建议,适合初学者参考学习。项目代码已托管至GitCode,方便读者实践与交流。
|
9月前
|
监控 前端开发 JavaScript
如何测试前端代码? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
如何测试前端代码? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
85 0
|
前端开发 JavaScript API
带你入门前端工程(十一):微前端(上)
带你入门前端工程(十一):微前端
118 0
|
9月前
|
缓存 前端开发 JavaScript
构建可靠的前端工程:自动化、代码质量与性能优化
构建可靠的前端工程:自动化、代码质量与性能优化
构建可靠的前端工程:自动化、代码质量与性能优化
|
9月前
|
设计模式 前端开发 算法
前端工程中的设计模式应用(上)
前端工程中的设计模式应用(上)
114 1
|
9月前
|
设计模式 存储 缓存
前端工程中的设计模式应用(中)
前端工程中的设计模式应用(中)

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    详解智能编码在前端研发的创新应用
  • 6
    巧用通义灵码,提升前端研发效率
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 8
    智能编码在前端研发的创新应用
  • 9
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    24
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    43
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    巧用通义灵码,提升前端研发效率
    84
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    137
  • 6
    详解智能编码在前端研发的创新应用
    92
  • 7
    智能编码在前端研发的创新应用
    75
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    35
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    111
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    73