在不断发展的软件开发领域，微服务和微前端这两种突破性的架构风格已经成为变革性的范例。这些方法重新定义了现代应用程序的构建和部署方式。微服务和微前端秉承模块化、可扩展性和灵活性的原则，已成为全球开发团队的首选。
无论您是经验丰富的开发人员还是刚刚开始进入软件架构世界，本指南都旨在帮助您全面了解微服务和微前端，以及它们如何将您的应用程序开发提升到新的高度。
什么是微服务？
微服务是一种架构风格，其中一个整体应用程序被分为几个小的、松散耦合的、独立的服务。所有这些微服务共同构成一个更大的系统。微服务架构中的每个服务都代表特定的业务功能，并作为具有自己的数据库和逻辑的单独单元运行。
微服务教程
第 1 步：设置项目
为您的项目创建一个新文件夹并初始化一个新的 Node.js 项目。打开终端并运行以下命令：
mkdir microservices-tutorial
cd microservices-tutorial
npm init -y
|
第 2 步：安装依赖项
在本教程中，我们将使用 Express.js 和 Axios。使用 npm 安装它们：
npm install express axios
第 3 步：创建微服务
在本教程中，我们将创建两个微服务：“用户”服务和“订单”服务。“users”服务将处理与用户相关的操作，而“orders”服务将处理与订单相关的操作。
在主项目文件夹中创建两个文件夹“ users ”和“ orders ”。在每个文件夹内创建一个index.js文件。
第 4 步：实施微服务
让我们从实现“用户”服务开始。打开 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);
});
|
第 5 步：微服务之间的通信
在此步骤中，我们将使用 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 步：测试微服务
打开 Web 浏览器或使用 Postman 等工具来测试微服务。
- 要测试“users”服务，请导航至http://localhost:3000/users。它应该返回用户列表及其关联的订单。
- 要测试“orders”服务，请导航至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以查看 frontend1，
- 访问http://localhost:3000/microfrontend2以查看 frontend2。
总结
总之，在处理前端复杂性和多个开发团队时使用微前端，在需要创建可扩展和模块化的后端架构时选择微服务。这两种模式可以在构建全面、解耦且灵活的系统方面相辅相成。