前端分级配置

1,110 阅读3分钟

随着前端工程的逐渐庞大和完善, 很多原先后端的功能开始又前端接管,加上spa的流行,前端配置的重要性日益重要

1. 由后端模板渲染的前端项目

流程如下

配置信息可以由后端项目维护, 在渲染前传到前端,完成页面和逻辑。 该方式下配置来源简单,并且可以满足所有的需求

2.前后端分离

分离之后,路由页面加载逻辑都有了很大的变化, 不再是由一次加载就能完美解决的, 如下图, 有多种配置及时机需要我们考虑

a. 第一个解决方案

ssr的同构方案,框架比较多, 使用服务端渲染,好多自然是很多的, 但是局限性也很大, 服务端渲染是无状态的, 所以对于业务复杂的情况,对于编码会有很大挑战

该方案可以看对于框架的描述

b. 第二个方案,分级配置

如上图描述,配置分成了多个环节并且场景也各不相同,分级配置的特点就是利用前端的各个环节,将配置分解合并

阶段 配置项举例 用处 缺点
构建期⭐️ env:环境变量,logger:日志参数 区分环境,如开发、测试、生产 修改配置需要重新构建
发布期⭐️⭐️ monitor:监控配置, enableHistry:使用hash还是history描述 可以用来加载所有页面初始化前的配置 修改配置需要重启
运行期⭐️⭐️⭐️ banner:轮播,notice:通知 可以动态加载一些业务配置 需要阻塞必要的业务代码

大家会发现,也行有些配置是会重的, 构建期要用, 运行期也需要用,这时候就需要配置覆盖, 上图星越多表示越灵活

依次,我们就可以确定配置覆盖优先级

下面我们细说下三级配置,如何实现

构建期:

以webpack为例

构建本身会传NODE_ENV类似参数,用以标记发布环境

如:

测试: NODE_ENV=sandbox

生产: NODE_ENV=prod

基于此, 我们可以在构建时动态读取相关配置项, 通过DefinePlugin编译到代码中

new webpack.DefinePlugin({
server_setting: JSON.stringify({
  logger: {enable: false}
})
})

发布期:

由于发布期已经无法编码了, 所以我们可以借助配置平台,我们这边借用了apollo的配置中心,在构建时读取到配置数据,转换成代码加入源文件

实现如下:

首先,项目编码时, 在需要加入配置代码的位置,放置一个占位符,一般都是在所有代码之前

<head>
  <!--serverConfigSlot-->
 <!--以下加入你的框架、业务代码-->
</head>

第二步,构建时读取配置,替换该占位符, 修改项目启动代码如下

echo "var configFormServer = " > /nginx/static/js/config.js
curl http://apollo-configservice.uproject.cn/configs/project/sandbox/static.application1.json | sed 's/"namespaceName":"static.application.json",//g' | sed 's/"appId":"project",//g' >> /nginx/static/js/config.js

md5Str=$(md5sum /nginx/static/js/config.js | cut -d ' ' -f1)
mv /nginx/static/js/config.js /nginx/static/js/config_${md5Str}.js

sed -i 's%<!--serverConfigSlot-->%<script src="/static/js/config_'$md5Str'.js" type="text/javascript"></script>%g' /nginx/index.html

运行期:

运行期就比较简单了, 如果需要全局加载的配置, 在框架初始化之前,加载即可

如banner之类实时的配置, 在页面加载前后都可以

阅读原文