前端微服务一站式解决方案-不是切页面就是微服务

1,856 阅读3分钟

  • 需求背景多系统集成
  • 常见解决方法,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配置文件
  • 服务监控告警实时通知钉钉