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

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

前阵子答应了前端群的小朋友,要分享一些企业级前端工程相关的经验,这一拖就拖了快俩月了,再拖估计得掉粉了。

那么今天就开始聊前端工程的话题吧,咱先从配置管理讲起。

这部分非常实用,你要是能帮你的团队把这块事情做漂亮了,那所有人都会对你刮目相看,不管是简历上,还是晋升答辩,都是一块不错的,可聊的内容。

话不多说,直接进入正题。

回忆一下你们的项目,有没有出现类似代码:

// 创建一个S3实例
const s3 = new S3({
  // 省略部分参数
  accessKeyId: 'xxxxx',
  secretAccessKey: 'xxxx',
})

这里不用纠结于S3是个什么东西,这不重要,重要的是,类似上面这种,把某些重要参数(比如密钥,IP,人名等)明文写死在代码里的方式。

如果你们项目有类似代码,那么恭喜你,一战成名的机会来了!

这种丑陋的编码方式有一个专业术语:硬编码。顾名思义,就是看完之后让人很僵硬的编码方式。

哈哈哈,开个玩笑,硬编码的名词解释是这个:

硬编码是将数据直接嵌入到程序或其他可执行对象的源代码中的软件开发实践,与从外部获取数据或在运行时生成数据不同。

硬编码有什么问题呢?大概会有这么几种:

  • 安全问题。敏感信息放代码里,一旦代码开源,或者私有代码被逆向工程,就会产生严重的信息泄漏问题。
  • 变更成本。每次需要调整配置信息,比如换个密钥,换个IP/端口诸如此类的参数,都要重新走发布流程,成本极高。
  • 代码复用。多套部署的情况下,代码几乎无法复用,也难以做个性化部署。

那么稍微正常一点的代码应该长什么样呢?大概是这个样子:

// 创建一个S3实例
const s3 = new S3({
  // 省略部分参数
  accessKeyId: process.env.AK,
  secretAccessKey: process.env.SK,
})

对应的服务器环境变量:

image.png

这一步,把硬编码的密钥,改成从环境变量(process.env)里读取,看起来显得高级多了。这就是最简单的配置剥离,基本上实现了代码可配

是不是看起来好多了?

NO,NO,NO!这才哪儿到哪儿。这种刀耕火种的配置管理方式,问题可太多了:

  • 发布稳定性低。每一套部署都需要独立维护自己的环境变量,发布时候忘记修改某个容器,就会出大问题,所以每次发布都需要有长长的CheckList。
  • 容错率低。完全是字符串式编辑,但凡多个空格,换行啥的,整份配置就都废了。
  • 权限缺失。没有专门针对配置的权限管理,谁都能来改改,改完也没操作记录,万一搞出点什么幺蛾子,该找谁背锅都不知道。
  • 无版本概念。没有版本管理,一旦改出问题,想快速回滚都没办法。

看过我之前文章的人应该多少了解我,沐洒比较喜欢从宏观层面梳理问题的解法,从而更加优雅完备的解决问题。你可能要急了:沐老师,你就别逼逼了,Talk is Cheap,show me your codeOK,不啰嗦,上架构图!image.png暂时看不懂没事,我就是先放出来镇场子的,后面会给你一步步讲明白。首先我们把视线聚焦到架构图的右上角,这里有个Remote Config

image.png

Remote Config(远端配置),顾名思义,就是摒弃掉上面我们说的那种刀耕火种的把配置放到环境变量的方式,而采用一个相对成熟的配置管理系统进行管理,类似这样:

image.png

(这是腾讯内部的配置系统:七彩石)

一个成熟的配置系统应该长这样,可以非常方便的管理项目的所有配置,分环境,分组,有权限控制,发布审批,日志,版本回滚等功能。这才是一个现代化的配置管理方式!

如果你公司没有自研的配置中心,也可以选择市面上一些成熟的产品,比如Nacos,Apollo,Spring Cloud Config等等。


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