环境微前端新项目还在工作环境运作一年多了

文中已经参与「」

环境

微前端新项目还在工作环境运作一年多了，在这期间都是遇到一些难题，在这里分享出，大家共勉。如得到更好的计划方案请发表评论探讨或是私信跟我说，万分感谢！

问题和解决方法

依靠循环系统难题

安全事故： 此问题其实就是我们一直知晓的一个安全隐患，仅仅一味的信了大家别的团队服务的稳定开始与可扩展性。没有提早就布署避开此问题。最终某一日由于业务一个不合理合法 ingress 标准造成接口测试崩盘了，大半天并没有修复。

以前容器平台的前端后端与业务并没有更好地防护，后面代管在 k8s-core（k8s-test）集群式，和业务采用的是同一个网关ip通道。

前面布署状况：

• 微前端主应用部署在 k8s器皿 上（自依靠）
• 容器平台前面部署到阿里云oss oss，阿里云oss又部署到 k8s器皿 上（循环依赖）

更新改造： 前端后端和业务耦合，在其中前面有关静态资源放进阿里服务器 OSS 上

前面迁移方案：

• 最先，全部网络平台管理体系选用微前端架构，是一个整体，最开始想总体网络平台管理体系总体转移(总流量所有从网关ip立即转出去)，即：微前端主运用以及所有子运用都迁往阿里服务器，根据网关ip把整个网络平台管理体系核心技术的总流量都转到阿里服务器。

  • 然后，大家汇总了链接，发觉有许多不明总流量，最初计划方案会对业务流程，修改成本相对高
  • 由于历史问题，器皿主运用的总流量并没有标志的，难以从 www.xxx.com 这一网站域名下梳理什么属于核心技术的要求（这一域名是收敛性网站域名，下边相匹配几十个 upstream），网关ip也不知道该分享什么总流量。

• 之后，计划将器皿前面摆脱微前端主运用，网关ip只分享器皿有关平台流量（/k8s-fe），可是也会失去全部网络平台体系公共性作用，器皿维护费用高。

• 最后，想起了一种折中的计划方案，大家目的是为了耦合器皿，容器平台的前面也是有标志（/k8s-fe）的。我们将要主运用也布署阿里服务器一份，网关ip分享器皿有关平台流量（/k8s-fe）到阿里云的主运用。

上涂涂意：

1. 将微前端主运用在器皿和阿里服务器都部署了一份，容器平台前端资源部署到阿里服务器。
2. 浏览容器平台的链接如下图中蓝色箭头所显示，根据网关ip获取到 k8s-fe 路由器将流量转发到阿里服务器主运用，主运用再要求阿里云的容器平台网络资源。
3. 其他网站浏览链接不会改变，如下图红色箭头所显示，利用网关ip将流量转发到容器主运用，主运用获取阿里云oss上各商品资源。
4. 主运用以及所有子运用都是在容器平台公布升级版本，主应用发布的时候会与此同时提交一份网络资源到阿里服务器，容器平台网络资源大会上传阿里服务器，同类产品网络资源提交阿里云oss。

子运用和主应用联动难题

情景：

因为有十几个单项工程，都是不一样的小伙伴们在维护及开发设计，而微前端主运用这是我在维护保养，那样每一个子运用必要时和主运用有连动，大部分也不能在本地调节了。

适用单独及众多子应用使用主运用的接口测试或提测自然环境在本地联动，便捷小伙伴们启动不了主运用，就能在当地联动用到主运用的水平。

因此对主运用更新改造如下所示：

if (isTice || isTest) {
  // document.cookie = fe_debug_url=http://localhost:${PORT_MAP[app]}/ 可浏览当地开发工具子运用
  let MicroApps = Cookies.get('fe_debug_app') || ''
  let MicroUrls = Cookies.get('fe_debug_url') || ''
  MicroUrls = MicroUrls.split(',')
  const getArrayIndex = (arr, item) => {
    var i = arr.length
    while (i--) {
      if (arr[i] === item) {
        return i
      }
    }
    return -1
  }
  if (MicroApps) {
    MicroApps = MicroApps.split(',')
    return MicroApps.includes(app) ? `${MicroUrls[getArrayIndex(MicroApps, app)]}` : `${ORIGIN_URL}`
  } else {
    return MicroUrls[0] ? `${MicroUrls[0]}` : `${ORIGIN_URL}`
  }
  // 'https://tice.xxxx.com/单项工程收敛性网站域名'
} 

使用方法：

假如是单独新项目联动还能够依照下列方法：

在控制面板 或是 编码里面临时性 添加：document.cookie = fe_debug_url=http://localhost:8000/

假如好几个，必须在 cookies 里面放2个主要参数，一一对应。举例说明如下所示：

fe_debug_url：http://localhost:8000/,http://localhost:8900/
fe_debug_app：logcenter-fe,message-fe

浏览器缓存难题

情景：

在咱们每一次变动推出的情况下，基本上都是要电脑浏览器清缓存才可以让用户见到最新版。可是让消费者清浏览器缓存，有悖人道主义！不可行！