22-领域-微服务

      前端微服务是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。其具有技术选型灵活、可以独立开发与部署、能够增量升级、数据隔离、扩展性强等几大特点。前端微服务的解决方案有很多，网上不下20种方式，在方案选择上考虑的因素也要多一些，不单单技术，还要从成本、工期、人效、团队管理等等方面考虑。当时做过一些调研以及方案对比：

      目前微服务化是应用程度比较高的方案，主流框架有qiankun、microApp等。
      qiankun是我们团队在项目中应用比较早的技术，当时是面对一个采用Angular8框架开发并且页面有400+的巨型应用，页面数量多、逻辑关系混乱、注释信息不够完整、技术规范不统一、代码量庞大，构建部署低效，无论重构、升级、维护都及其繁琐。microApp框架我们在项目也使用到了，总体感觉体验上要略好于qiankun框架。这两个框架有着各自不同的设计理念，实际工作中需要熟练掌握，可以解决绝大部分项目中涉及微服务的问题。

qiankun

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。
qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，在经过一批线上应用的充分检验及打磨后，我们将其微前端内核抽取出来并开源，希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统，同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。
_目前 qiankun 已在蚂蚁内部服务了超过 200+ 线上应用，在易用性及完备性上，绝对是值得信赖的。 _
——摘自qiankun官网介绍

      基于qiankun微服务的前端框架, 其架构基本可以概括为: 基座应用 + 子应用 + 公共依赖方式。
其实现原理是通过监听 url change 事件，在路由变化时匹配到渲染的子应用并进行渲染，子应用修改渲染逻辑并暴露出三个方法：bootstrap、mount、unmount，分别对应初始化、渲染和卸载，这种接入方式也叫做协议接入。

1.安装
$ yarn add qiankun _# 或者 npm i qiankun -S_
2.main.ts改造

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app',
    entry: '//localhost:3800',
    container: '#container-vue',
    activeRule: '/app1',
    props: {  }
  }
]);
// 启动
start();

      但是在实际研发中我们通常不这么简单的使用，而是需要夹杂着一堆的工具函数、数据状态、收集反馈等等机制，很多情况微应用的启动也会放到二级路由实现。
3.二级路由启动微服务
创建微服务入口Portal.vue

<template>
  <div id="sub-root"></div>
</template>

<script lang="ts">
  import { FrameworkConfiguration, start } from "qiankun";
  import { defineComponent, onMounted } from "vue";
  import { routerKey } from "vue-router";
  export default defineComponent({
    components: {},
    setup() {
      const router = routerKey;
      onMounted(() => {
        if (!(window as any).qiankunStarted) {
          (window as any).qiankunStarted = true;
          const opts: FrameworkConfiguration = {
            prefetch: true,
            sandbox: true,
          };
          start(opts);
        }
      });
    },
  });
</script>

配置Portal.vue的路由信息

import Portal from '../views/Portal.vue';
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'


const routes: Array<RouteRecordRaw> = [
  ......
  // 微服务路由
  {
    path: '/portal',
    name: 'portal',
    component: Portal
  },
  {
    path: '/portal/:pathMatch(.*)*',
    name: 'portal',
    component: Portal
  }
]

4. 接入应用

子应用的配置相对简单，只需导出对应的几个生命周期函数即可

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

export async function bootstrap(props: any) { }

export async function mount(props: any) {

    createApp(App).use(router).mount('#app');
}

export async function unmount() { }

      使用qiankun时候需要注意一点，主应用是通过fetch方式加载子应用脚本，所以无论开发环境还是生产环境，子应用的部署都需要支持跨域访问，否则主应用下将无法请求到对应的资源文件。

MicroApp

      通过CustomElement结合自定义的ShadowDom，将微前端封装成一个类WebComponent组件，从而实现微前端的组件化渲染

1.安装
npm i @micro-zoe/micro-app --save

2.main.ts处调用也非常简单

import microApp from '@micro-zoe/micro-app';

microApp.start();

4.micro-app的入口文件

<template>
  <div>
    <micro-app name='app2' url='http://localhost:4203/' baseroute='/micro'></micro-app>
  </div>
</template>

5.子应用的接入
允许跨域

module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  }
}

路由配置

const router = createRouter({
  ......
  history: createWebHistory('/micro/')
})

      到此就完成了MicroApp的接入，操作步骤上算是比较简单的。MicroApp自身功能相对完善，支持JS沙箱、样式隔离、预加载、静态资源地址补全、元素隔离、插件系统等等，接入成本较低，对原系统的侵入很小。