前端微服务

简介: 前端微服务

1. 前言

  1. 在刚刚结束的面试中 问到了 前端微服务
  2. 想了应该和后端微服务差不多,刚才又查阅了些资料 简单唠唠

2. 是什么 what

  1. 前端微服务是一种将前端应用拆分为多个独立的、可独立部署管理的微服务的架构模式
  2. 与传统的单体前端应用相比,前端微服务将应用拆分为多个小型的、自治的服务单元,每个服务单元专注于特定的功能或业务领域。

3. 优势-----1 ----解耦和自治性

  1. 前端微服务将应用拆分为多个独立的服务单元,每个单元可以独立开发、部署和维护
  2. 这种解耦和自治性使得团队可以更加专注于特定的功能或业务领域,并且可以独立迭代和扩展每个服务单元

4. 优势-----2 ----独立部署和扩展

  1. 前端微服务可以独立部署和扩展,每个服务单元都可以根据需要进行水平扩展,以应对不同的流量和负载情况。
  2. 这种独立性可以提高系统的弹性和可伸缩性。

5. 优势-----3 ----技术栈灵活性

  1. 由于每个前端微服务可以使用不同的技术栈和工具,团队可以选择最适合特定服务单元需求的技术栈。
  2. 这种灵活性使得团队可以选择最佳工具来解决特定的问题,并且可以灵活地采用新技术。

6.优势-----4 ----服务复用和组合

  1. 前端微服务可以通过接口API进行通信和集成,不同的服务单元可以互相调用和复用。
  2. 这种服务复用和组合的能力可以提高团队的开发效率,并促进模块化和可重用性的实现。

7. 扩展

  1. 要实现前端微服务,可以使用多种技术和工具,如容器化技术(如Docker)、微前端框架(如Single-SPA、qiankun)、API网关和服务注册中心等 。

2.具体的实现方式和架构选择应根据具体的业务需求和团队技术栈来决定


8.  思路

  1. 实现前端微服务的示例可以涉及多个方面,包括容器化、服务注册与发现、微前端框架等。

  1. 假设我们有两个前端微服务
    ProductService和OrderService,
    每个服务都提供不同的功能和页面。

  • 大体思路

1.  容器化

  1. 每个前端微服务封装为独立的容器,并通过容器编排工具(如Docker Compose)进行管理和部署。
  2. 每个微服务可以有自己的Docker镜像,并在独立的容器中运行。

2. 服务注册与发现

  1. 使用服务注册与发现工具(如Consul、Eureka)来注册和发现每个微服务的实例。
    2, 每个微服务在启动时向注册中心注册自己的地址端口,其他微服务可以通过注册中心来发现并调用服务。

3. 微前端框架

  1. 使用微前端框架(如Single-SPA、qiankun)来集成和组合不同的微服务。
  2. 微前端框架可以提供路由管理、模块加载和通信机制,使得不同的微服务可以在同一个页面中协同工作。

9.  核心代码

// ProductService 微服务
const ProductService = {
  name: 'ProductService',
  routes: [
    { path: '/products', component: ProductsPage },
    // ...
  ],
  // 其他功能和服务
};
// OrderService 微服务
const OrderService = {
  name: 'OrderService',
  routes: [
    { path: '/orders', component: OrdersPage },
    // ...
  ],
  // 其他功能和服务
};
// Main App
const app = singleSpa({
  // 配置路由和微服务
  routes: [
    ...ProductService.routes,
    ...OrderService.routes,
  ],
});
// 注册微服务
app.registerMicroApp(ProductService);
app.registerMicroApp(OrderService);
// 启动主应用
app.start();
  1. ProductService和OrderService是两个独立的微服务,每个服务都有自己的路由组件
  2. 通过微前端框架(这里使用了single-spa)将它们集成到主应用中,从而实现前端微服务的组合协同工作


参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
7月前
|
消息中间件 前端开发 API
架构的未来:微前端与微服务的融合
架构的未来:微前端与微服务的融合
|
6月前
|
前端开发 JavaScript 微服务
|
7月前
|
负载均衡 前端开发 Java
字节后端面试题(前端发送请求到后端的过程(MVC),网关gateway作用,怎么解决跨域,各微服务组件作用)
字节后端面试题(前端发送请求到后端的过程(MVC),网关gateway作用,怎么解决跨域,各微服务组件作用)
437 0
|
存储 前端开发 数据安全/隐私保护
十五.SpringCloud+Security+Oauth2实现微服务授权 -前端登录实战
SpringCloud+Security+Oauth2实现微服务授权 -前端登录实战
|
设计模式 负载均衡 监控
「微服务架构」面向CTO的微服务设计模式:API网关、前端的后端等
「微服务架构」面向CTO的微服务设计模式:API网关、前端的后端等
|
前端开发 JavaScript API
微服务项目:尚融宝(31)(前端搭建:会员列表搭建(2))
微服务项目:尚融宝(31)(前端搭建:会员列表搭建(2))
微服务项目:尚融宝(31)(前端搭建:会员列表搭建(2))
|
JavaScript 前端开发 API
微服务项目:尚融宝(15)(前端平台:完善积分等级模块)
微服务项目:尚融宝(15)(前端平台:完善积分等级模块)
微服务项目:尚融宝(15)(前端平台:完善积分等级模块)
|
前端开发 JavaScript 应用服务中间件
微服务项目:尚融宝(14)(前端平台:尚融宝管理系统路由配置)
微服务项目:尚融宝(14)(前端平台:尚融宝管理系统路由配置)
微服务项目:尚融宝(14)(前端平台:尚融宝管理系统路由配置)
|
XML 前端开发 easyexcel
微服务项目:尚融宝(16)(前端搭建:上手EasyExcel)
微服务项目:尚融宝(16)(前端搭建:上手EasyExcel)
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
187 2