欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

微服务和微前端有什么区别？-什么是微前端？

最编程 2024-03-19 13:11:36
...

微前端是一种 Web 开发架构模式，它将微服务的原理扩展到 Web 应用程序的前端。它涉及将 Web 应用程序的用户界面分解为更小的、松散耦合的、可独立部署的前端模块。每个模块代表应用程序的独特特性或功能，并且可以独立开发、测试和部署。

微前端教程

让我们通过一个简单的教程来看看微前端是如何实际工作的。

在此示例中，将使用 Express.js 创建一个服务器，将各个微前端作为静态文件提供服务。同时还使用 http-proxy-middleware 库根据 URL 路径将请求代理到适当的微前端。

第 1 步：设置微前端架构

为项目创建一个新目录并初始化一个新的 Node.js 项目：

mkdir microfrontend-example

cd microfrontend-example

npm init -y

第 2 步：安装依赖项

安装微前端项目所需的依赖项：

npm install express

npm install express-http-proxy

第 3 步：创建微前端

在本教程中，将创建两个微前端：frontend1和frontend2。

在项目目录中，创建一个frontend1包含文件的目录index.html：

<!-- frontend1/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Frontend 1</title>
</head>
<body>
  <h1>Frontend 1</h1>
</body>
</html>

同样，创建一个frontend2包含index.html文件的目录：

<!-- frontend2/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Frontend 2</title>
</head>
<body>
  <h1>Frontend 2</h1>
</body>
</html>

第 4 步：创建微前端服务器

server.js在项目根目录下新建一个文件，命名为：

// server.js
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

// Serve frontend1
app.use('/frontend1', express.static('frontend1'));

// Serve frontend2
app.use('/frontend2', express.static('frontend2'));

// Proxy requests to the appropriate microfrontend
app.use('/microfrontend1', createProxyMiddleware({ target: 'http://localhost:3000/frontend1', changeOrigin: true }));
app.use('/microfrontend2', createProxyMiddleware({ target: 'http://localhost:3000/frontend2', changeOrigin: true }));

// Start the server
app.listen(3000, () => {
  console.log('Microfrontend server started on port 3000');
});

步骤 5：启动微前端服务器
在终端中，运行以下命令来启动微前端服务器：

node server.js

步骤 6：访问微前端
打开浏览器并访问http://localhost:3000/microfrontend1以查看 frontend1，访问http://localhost:3000/microfrontend2以查看 frontend2。

**恭喜！ **你已使用 Node.js 成功创建了一个简单的微前端设置。

何时使用微前端？

微前端和微服务是用于构建可扩展和模块化应用程序的架构模式，但它们解决不同的问题并适用于不同的场景。

  • 当有一个复杂的 Web 应用程序，需要多个团队在用户界面的不同部分独立工作时，可以使用微前端。通过将前端分解为更小的、独立的模块，每个团队都可以单独开发和部署其功能，从而实现更快的开发周期和更轻松的维护。这种方法在拥有多个前端团队的大型组织中或在处理需要逐步现代化的遗留代码库时特别有用。
  • 另一方面，在设计应用程序的后端架构时采用微服务。通过微服务，后端被分为小型的自治服务，每个服务负责特定的业务功能。这促进了更好的可扩展性、故障隔离和服务的独立部署。微服务更适合具有复杂业务逻辑、需要技术选择灵活性以及独立扩展不同组件的能力的应用程序。

下图显示了微服务和微前端之间的差异。

微服务和微前端之间的区别

总之，在处理前端复杂性和多个开发团队时使用微前端，在需要创建可扩展和模块化的后端架构时选择微服务。这两种模式可以在构建全面、解耦且灵活的系统方面相辅相成。

上一篇： 再谈多端适配

下一篇： 什么叫微端

推荐阅读