微服务与微前端：它们有什么区别？

在瞬息万变的软件开发领域，微服务和微前端这两种突破性的架构风格已成为变革性的范式。这些方法论正在重新定义现代应用程序的构建和部署方式。微服务和微前端秉承模块化、可扩展性和灵活性的原则，已成为全球开发团队的首选。

无论您是经验丰富的开发人员，还是刚刚开始踏入软件架构领域的新手，本指南旨在让您全面了解微服务和微前端，以及它们如何将您的应用程序开发提升到新的高度。

什么是微服务？

微服务是一种架构风格，它将单体应用拆分成若干个小型、松耦合且独立的微服务。所有这些微服务协同工作，构成一个更大的系统。在微服务架构中，每个服务都代表一项特定的业务功能，并作为一个独立的单元运行，拥有自己的数据库和逻辑。

微服务教程

步骤 1：项目设置

为你的项目创建一个新文件夹，并初始化一个新的 Node.js 项目。打开终端并运行以下命令：

mkdir microservices-tutorial

cd microservices-tutorial

npm init -y

步骤 2：安装依赖项

本教程将使用 Express.js 和 Axios。请使用 npm 安装它们：

npm install express axios

步骤 3：创建微服务

在本教程中，我们将创建两个微服务：“用户”服务和“订单”服务。“用户”服务将处理与用户相关的操作，而“订单”服务将处理与订单相关的操作。

在主项目文件夹内创建两个文件夹，分别命名为“ users ”和“ ordersindex.js ”。在每个文件夹内创建一个文件。

第四步：实现微服务

我们先来实现“users”服务。打开 users/index.js 文件并添加以下代码：

const express = require('express');
const app = express();
const port = 3000;

app.get('/users', (req, res) => {
  const users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Smith' },
    { id: 3, name: 'Bob Johnson' },
  ];
  res.json(users);
});

app.listen(port, () => {
  console.log('Users service is running on port ' + port);
});

现在，我们来实现“订单”服务。打开文件orders/index.js并添加以下代码：

const express = require('express');
const app = express();
const port = 4000;

app.get('/orders', (req, res) => {
  const orders = [
    { id: 1, product: 'Product A' },
    { id: 2, product: 'Product B' },
    { id: 3, product: 'Product C' },
  ];
  res.json(orders);
});

app.listen(port, () => {
  console.log('Orders service is running on port ' + port);
});

第五步：微服务之间的通信

在此步骤中，我们将使用 Axios 从一个微服务向另一个微服务发出 HTTP 请求。我们将修改“users”服务，使其从“orders”服务获取订单。

再次打开users/index.js文件并添加以下代码：

const express = require('express');
const axios = require('axios');
const app = express();
const port = 3000;
const ordersServiceURL = 'http://localhost:4000';

app.get('/users', async (req, res) => {
  try {
    const response = await axios.get(`${ordersServiceURL}/orders`);
    const orders = response.data;

    const users = [
      { id: 1, name: 'John Doe', orders: orders.slice(0, 2) },
      { id: 2, name: 'Jane Smith', orders: orders.slice(1, 3) },
      { id: 3, name: 'Bob Johnson', orders: orders.slice(0, 1) },
    ];

    res.json(users);
  } catch (error) {
    res.status(500).json({ error: 'Internal server error' });
  }
});

app.listen(port, () => {
  console.log('Users service is running on port ' + port);
});

步骤 6：运行微服务

要运行微服务，请打开两个单独的终端，导航到项目文件夹，然后运行以下命令：

对于“用户”服务：

cd users

node index.js

关于“订单”服务：

cd orders

node index.js

步骤 7：测试微服务

打开您的网络浏览器或使用 Postman 等工具来测试微服务。

要测试“users”服务，请访问http://localhost:3000/users。它应该返回用户列表及其关联的订单。

要测试“订单”服务，请访问http://localhost:4000/orders。它应该返回一个订单列表。

恭喜！您已成功使用 Node.js、Express.js 和 Axios 创建了一个基本的微服务架构，其中两个微服务相互通信以满足用户请求。

什么是微前端？

微前端是一种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查看前端 1，访问http://localhost:3000/microfrontend2查看前端 2。

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

何时使用微前端？

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

当您拥有一个复杂的 Web 应用程序，需要多个团队独立开发用户界面的不同部分时，可以使用微前端。通过将前端拆分成更小、更独立的模块，每个团队可以单独开发和部署各自的功能，从而加快开发周期并简化维护。这种方法在拥有多个前端团队的大型组织中，或者在处理需要逐步现代化改造的遗留代码库时，尤其有用。
另一方面，微服务架构常用于设计应用程序的后端架构。微服务将后端拆分成多个小型、自治的服务，每个服务负责特定的业务功能。这有助于提高可扩展性、故障隔离能力以及服务的独立部署。微服务更适合业务逻辑复杂、需要灵活选择技术方案并能够独立扩展不同组件的应用程序。

下图显示了微服务和微前端之间的区别。

总之，当前端复杂且涉及多个开发团队时，应使用微前端；当需要构建可扩展、模块化的后端架构时，则应选择微服务。这两种模式可以相辅相成，共同构建全面、解耦且灵活的系统。

注：本教程的部分内容使用了 OpenAI 的技术支持。

文章来源：https://dev.to/pavanbelagatti/microservices-vs-micro-frontends-whats-the-difference-33je

菜单

分享

微服务与微前端：它们有什么区别？

微服务与微前端：它们有什么区别？

什么是微服务？

微服务教程

什么是微前端？

微前端教程

何时使用微前端？

下图显示了微服务和微前端之间的区别。

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码