⽹页上的微服务—微前端架构实践作者：郭凌波
⼀、什么是微前端？
“微前端”⼀词最早于2016年底在《ThoughtWorks Technology Radar》中提出，它将微服务的概念扩展到前端世界，⽬的是构建⼀个在微服务架构上功能丰富且强⼤的前端应⽤。
⼤型组织的组织结构、软件架构在不断地发⽣变化。移动优先、App中台、中台战略等，各种⼝号在不断提出和演进。同时业务也在不断地发展，⽽现有 Web 应⽤不能很好的拓展和部署，随着时间的推移，各个项⽬变得越来越臃肿，web 应⽤变得越来越难以维护。
微前端将微服务的理念应⽤于浏览器端，让Web应⽤由单体应⽤转变为多个⼩型前端应⽤聚合为⼀的应⽤。各个前端应⽤还可以独⽴运⾏、开发和部署。
⼆、实施微前端的六种⽅式：
1 路由分发式
路由分发式微前端，即通过路由将不同的业务分发到不同独⽴前端应⽤上。其通常可以通过反向代理（Nginx/HSIAR）来实现，配合使⽤应⽤框架⾃带的路由管理。
就当前⽽⾔，通过路由分发式的微前端架构应该是采⽤最多、最易采⽤的 “微前端”⽅案。但是这种⽅式看上去更像是多个前端应⽤的聚合，即我们只是将这些不同的前端应⽤拼凑到⼀起，使他们看起来像是⼀个完整的整体。
系统整体结构如图：
2 iFra me前端容器化
iFrame 作为⼀个古⽼⽽普通的技术，但却⼀直很管⽤。采⽤ <iframe> 标签将另⼀个Web页嵌⼊到当前页⾯中来，使得多web应⽤能在⼀个web中打开。
nginx部署前端项目
其可以创建⼀个全新独⽴的宿主环境，使不同的前端应⽤之间可以相互独⽴运⾏，但会抛弃⽹站对SEO的⽀持、失去页⾯之前交互的能⼒。
在很多业务场景下，难免会遇到⼀些难以解决的问题，那么可以使⽤iframe 来作为保底的⼿段。
3 前端微服务化
前端微服务化，是微服务架构在前端的实施。每个前端应⽤技术栈、开发、部署、构建都是完全独⽴⾃主运⾏的，最后通过模块化的⽅式组合成⼀个完整的应⽤。
采⽤这种⽅式意味着，⼀个页⾯上可以同时存在两个以上的前端应⽤在运⾏。
⽬前主流的框架有 、 、 ，后两者都是基于 Single-SPA 的封装。
4 微应⽤
微应⽤化是指在开发时应⽤都是以单⼀、微⼩应⽤的形式存在的，⽽在运⾏时，则是通过构建系统合
并这些应⽤，并组合成⼀个新的应⽤。微应⽤化⼤都是以软件⼯程的⽅式来完成前端应⽤的聚合，因此⼜可以称之为组合式集成。微应⽤化只能使⽤唯⼀的⼀种前端框架。
5 微件化
微件化（Widget）是⼀段可以直接嵌⼊应⽤上运⾏的代码，它由开发⼈员预先编译好，在加载时不需要再做任何修改或编译。微前端下的微件化是指，每个业务团第编写⾃⼰的业务代码，并将编译好的代码部署到指定的服务器上，运⾏时只需要加载指定的代码即可。
6 Web Co mpo nents
m po
Web Components 是⼀套不同的技术，允许开发者创建可重⽤的定制元素（它们的功能封装在代码之外）并且在您 Web 应⽤中使⽤它们。
在真正的项⽬上使⽤ Web Components 技术，离现在还有⼀些距离，结合 Web Components 来构建前端应⽤，是⼀种⾯向未来演进的架构。或者说在未来可以采⽤这种⽅式来构建应⽤。
微前端⼏种⽅式对⽐
三、真实的业务场景
在真实的业务场景中，往往是上⾯提到六种⽅式中的⼏种的结合使⽤，或者是某种⽅式的变种
假设现有三个内部系统，下⾯称之为 old-a、old-b 和 C，其中，old-a 和 old-b 是⽼旧的前后端未分离项⽬，C 为前后端分离的 SPA 应⽤（React+HUI），三个系统的架构图⼤致如下：
可以看到，old-a 运⾏在⼀台服务器 1 上，old-b 运⾏在服务器 2 上，C 系统的前端资源在服务器 2 上，并且 C 没有⾃⼰的域名。
三个系统均在后端同学维护和开发，他们的需求如下：
1、统⼀的域名
2、统⼀的界⾯和交互
3、系统需要⽅便拓展
考虑开发同学的需求和开发成本、维护成本、未来的可拓展性，系统改造关键点如下：
1、申请统⼀的域名（暂且称之为 crm.mi）
2、将 old-a 和old-b 两个⽼旧的系统样式调整，像系统 C 靠拢
3、三个系统使⽤统⼀的菜单和权限
4、三个系统使⽤统⼀的 SSO
5、C 系统和正在开发的N个系统使⽤CI/CD解决打包和⼿动复制的问题
对于上⾯⼏种⽅式，在具体的实施使⽤了路由分发、iFrame、应⽤微服务化、微应⽤化的融合⽅式。或者说是某种⽅案的变种，因为改造之后同时具备了这⼏种⽅案的特点。
对于 C 系统和正在开发的N个系统使⽤ single-spa 做改造，对于⽼旧的系统 old-a 和 old-b 使⽤iFrame接⼊。改造后如下图：
此时，两个⽼系统分别部署在各⾃的服务器，C和未来的多个应⽤部署在同⼀台服务器。然后在 Nginx 层为⽼系统分配了两个路由，分别将请求打到各⾃的服务器，根路由打到C和XX应⽤的服务器。
使⽤ React 框架的C和XX应⽤基于single-spa改造后，那么⽼系统iFrame 如何接⼊？
在配置菜单时，⽼系统路由会被带上标识，统⼀交给其中⼀个应⽤以iFrame 的⽅式处理：
改造后微前端架构图：
四、总结
微前端不是⼀个框架或者⼯具，⽽是⼀套架构体系。这套体系除了微前端的基础设施外还需要具备微前端配置中⼼（版本管理、发布策略、动态构建、中⼼化管理）、微前端观察⼯具（应⽤状态可见、可控）等。
整个体系的搭建将是⼀个庞⼤的⼯程，⽬前⼤部分团队是在使⽤微前端的模式和思想来解决现有系统中的痛点。就像我们的HUI前端框架，经历HUI1时的微应⽤模式到现在HUI2的微件化模式，结合恒⽣统⼀权限管控体系操作员中⼼和恒⽣统⼀⽹关服务HSIAR，在我们统⼀运维监控平台天鉴管理下形成了⼀套完整的微前端⽅案，减少了业务部门和客户⾃研的开发⼯作。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。