logo

关于Angular的微前端架构

385
2023年11月24日
本文提供了微前端的概述,并介绍了如何将您的遗留用户界面分解为Angular中的微前端架构。

什么是微前端?

微前端是一种将微服务的概念扩展到Web应用程序前端的架构方法。在微前端架构中,复杂的Web应用程序被拆分成更小、可独立部署和可维护的单元,称为微前端。每个微前端负责用户界面的特定部分及其相关功能。

微前端的关键特征和概念包括:

  • 独立性: 微前端是自包含的,可以独立开发、测试和部署。这种自治性允许不同团队在应用程序的不同部分上进行工作,减少协调成本。
  • 技术无关性: 每个微前端可以使用不同的前端技术(例如 AngularReact、Vue.js),只要它们可以集成到父级或Shell应用程序中。
  • 隔离性: 微前端在代码和依赖方面相互隔离。这种隔离确保一个微前端的变化不会影响其他微前端。
  • 集成: 一个容器或Shell应用程序负责集成和编排微前端。它提供用户界面的整体结构,并处理微前端之间的路由。
  • 独立部署: 微前端可以独立部署,实现持续交付和更快的更新。这降低了回归问题的风险,并加快了发布周期。
  • 松耦合: 微前端通过定义良好的API和共享协议(如HTTP)进行通信,实现松耦合。这种关注点的分离简化了开发和维护。
  • 用户界面组合: 容器应用程序通过组合微前端来组装用户界面。这种组合可以在服务器端(服务器端包含)或客户端(客户端路由)上完成。
  • 扩展和性能: 微前端使应用程序的特定部分可以进行水平扩展,有助于优化频繁访问的区域的性能。
  • 分散式团队: 不同的团队或开发组可以负责各自的微前端。这种分散对于大型或分布式组织是有利的。

微前端架构在大型、复杂的Web应用程序中特别有用,因为采用单体架构可能导致开发瓶颈、增加复杂性,并且难以维护和扩展应用程序。

通过使用微前端,组织可以在前端开发过程中实现更大的灵活性、敏捷性和可维护性,与软件架构领域中微服务的更广泛趋势保持一致。

将微前端托管到单个Shell UI中

让我们看看如何将两个Angular微前端托管到单个Shell UI 中。

要在单个Shell Angular UI 中托管两个Angular微前端,您可以使用微前端框架如 single-spaqiankun 来实现。这些框架使您能够将多个独立开发的微前端集成到单个应用程序Shell中。以下是如何设置这样的架构的高级概述:

1. 创建Shell Angular应用程序

设置您的Shell Angular应用程序作为托管微前端的主要容器。您可以使用Angular CLI或任何其他首选方法创建此应用程序。

2. 创建微前端

将您的两个Angular微前端作为独立的Angular应用程序创建。每个微前端应该有自己的路由和功能。

3. 为微前端配置路由

在每个微前端应用程序中,配置路由,以便每个微前端都有自己的路由集。您可以使用Angular路由来实现这一点。

4. 使用微前端框架

在您的Shell Angular应用程序中集成微前端框架,如 single-spaqiankun

以下是如何在Shell Angular应用程序中使用 single-spa 的示例:

安装 single-spa

npm install single-spa

Shell Angular应用程序代码

在您的Shell Angular应用程序中,配置 single-spa 来加载微前端。

import { registerApplication, start } from 'single-spa';

// 注册微前端
registerApplication({
 name: 'customer-app',
 app: () => System.import('customer-app'), // 加载customer-app
 activeWhen: (location) => location.pathname.startsWith('/customer-app'),
});

registerApplication({
 name: 'accounts-app',
 app: () => System.import('accounts-app'), // 加载accounts-app
 activeWhen: (location) => location.pathname.startsWith('/accounts-app'),
});

// 启动single-spa
start();

5. 托管微前端

配置您的Shell Angular的路由,根据URL定向到相应的微前端。例如,当用户访问 /customer-app 时,Shell 应该加载客户微前端,而对于 /accounts-app,加载账户微前端。

6. 开发和构建

分别开发和构建您的微前端。每个都应该是一个独立的Angular应用程序。

7. 部署

部署Shell Angular应用程序以及微前端,确保它们可以从同一域名访问。

通过这种设置,您的Shell Angular应用程序将充当托管微前端的主要容器,并且您可以在Shell的路由之间导航到微前端。这使您可以拥有一个单一的Angular UI,其中托管了多个微前端,每个都有自己的功能。

本文链接:https://www.iokks.com/art/883d304f3164
本博客所有文章除特别声明外,均采用CC BY 4.0 CN协议 许可协议。转载请注明出处!