- 需求背景多系统集成
- 常见解决方法,iframe,ng代理,single-spa(乾坤)
- 为啥不用iframe能规避好多问题,技术没有前瞻性,体验差
- 自以为的解决方案跑个demo以为这以为那,其实真实的业务场景远远比自己想想的要复杂(说的就是我自己)
- 除了前端的兼容性问题,服务端的监控管理更为重要
(前端)子项目的umi的工程注意事项
- 移除子项目的头部配置项 headerRender:false, logo去除,头部样式padding调整高度不能被主工程头部遮挡
- 样式慎用position:fixed 会影响到父工程
- 样式污染,注意使用css-scoped, 全局body样式之类谨慎操作 ,尤其是同时使用同一个ant这样的ui框架,慎重修改原有组件的全局样式
- 给 body 、 document 等绑定的事件,请在 unmount 周期清除
- localStorage等全局数据储存修改谨慎操作,子工程内部建议添加命名空间不与其他工程冲突
(前端)qiankun微服务特性代码与本地独立服务代码区分
-
建议使用cross-env qiankun=xx 环境变量加以区分以保证兼容性(实际场景由子服务自行决定)
-
举例个别场景实际开发中,还是是否为qiankun为判断准则
-
配置项中 outputPath: process.env.qiankun?'./dist/crm':'./dist'
-
项目模板中(id为root的div渲染会有影响建议判断)<% if (!process.env.qiankun) { %> <% } %>
-
部分样式
-
容器修改适配性
-
半个小时是肯定改不完的
(前端)工程通信(其他api暂时用不到,详见通信文档飞冰)
父工程
- import { store } from '@ice/stark-data'; store.set('yzf_cloud_market_user', userInfo);
- 设置登录后当前用户信息 localstorage.setItem('yzf_cloud_market_user',userInfo)
子工程
- 子应用 import { store } from '@ice/stark-data'; // 获取当前用户(需要对数据进行格式化JSON.parse(userInfo))
- 方式一:const userInfo = store.get('yzf_cloud_market_user');
- 方式二:const userInfo = localStorage.getItem('yzf_cloud_market_user')
(后端)系统监控与接口管理(从不甘愿只做眼前的事情)
- 由于子工程的请求会发送到主工程的后端,
这件事有两个解决方案第一子应用请求全路径
第二前端对请求进行拦截主工程反向代理
还有一个突出的问题就去请求命名空间的问题,不能所有的请求都请求/api
- 虽然是前端微服务,所有子服务状态不可知,所有路径不可管控
- 解决方案使用自建的注册中心和网关
- 技术选型注册中心使用consul(无需依赖)实在受不了那些依赖java等等,后端微服务还好都是基于spring无所谓,前端微服务就更加需要独立性与兼容性,所以选择consul
- 网关使用nodejs通过跟注册中心交互获取,节点与代理状态,实时更新内部请求分发与接口管理
- 支持多种场景如果不想使用nodejs作为部署服务,也可以使用nodejs根据注册中心信息生成nginx配置文件
- 服务监控告警实时通知钉钉