React Microservices, xây dựng ứng dụng React mạnh mẽ

Bạn đang tìm kiếm một cách để phát triển ứng dụng React của mình một cách linh hoạt và dễ dàng mở rộng? Vậy thì hãy cùng tìm hiểu về React Microservices - một phương pháp phát triển ứng dụng phổ biến trong thế giới phát triển web hiện đại.

Ở bài viết này tôi sẽ giới thiệu cho các bạn về React Microservices là gi, cách sử dụng React Microservices và nó hoạt động như thế nào.

I. React Microservices là gì ?

React Microservices là một kiến trúc phân tán cho phép xây dựng các ứng dụng web phức tạp bằng cách chia nhỏ thành các thành phần độc lập và khả năng mở rộng. Trong kiến trúc này, các thành phần được phân tách và phát triển độc lập, đảm bảo tính tái sử dụng cao và khả năng phát triển độc lập với nhau. Các thành phần này được kết nối với nhau thông qua các API và giao tiếp qua mạng, tạo nên một hệ thống hoạt động liên tục, có thể mở rộng theo nhu cầu. Việc sử dụng React trong kiến trúc Microservices giúp cho việc xây dựng các thành phần UI trở nên đơn giản và có tính tái sử dụng cao.

II. Các components quan trọng trong React Microservices

API Service

Tất nhiên, chúng ta có thể xây dựng API Service trong React Microservices bằng nhiều cách khác nhau, tùy thuộc vào yêu cầu của dự án và sự chuyên môn của nhà phát triển. Tuy nhiên, để minh họa cho việc xây dựng API Service trong React Microservices, chúng ta có thể sử dụng ví dụ sau:

Bài viết này được đăng tại [free tuts .net]

Giả sử chúng ta có một ứng dụng web cho phép người dùng đăng ký và đăng nhập. Để xác thực người dùng, chúng ta cần gửi thông tin đăng nhập của họ đến một API Service để kiểm tra xem thông tin này có đúng hay không. Trong ví dụ này, chúng ta sẽ sử dụng Express.js để xây dựng API Service này.

Đầu tiên, chúng ta cần cài đặt Express.js:

npm install expres

Tiếp theo, chúng ta tạo một file server.js với nội dung như sau:

const express = require('express');
const bodyParser = require('body-parser');

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

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.post('/api/login', (req, res) => {
  const { email, password } = req.body;

  // Kiểm tra thông tin đăng nhập
  if (email === 'user@example.com' && password === '123456') {
    res.json({ success: true });
  } else {
    res.json({ success: false });
  }
});

app.listen(port, () => {
  console.log(`API Service is listening on port ${port}!`);
});

Trong đoạn code trên, chúng ta đã tạo một API Service có đường dẫn /api/login. Khi người dùng gửi thông tin đăng nhập đến đường dẫn này, chúng ta sẽ kiểm tra thông tin này và trả về kết quả qua JSON.

Sau đó, chúng ta có thể sử dụng API Service này trong ứng dụng React của mình bằng cách sử dụng thư viện axios:

import axios from 'axios';

const login = async (email, password) => {
  try {
    const response = await axios.post('/api/login', { email, password });
    return response.data.success;
  } catch (error) {
    console.error(error);
    return false;
  }
};

Trong đoạn code trên, chúng ta đã sử dụng axios để gửi thông tin đăng nhập đến API Service '/api/login' và trả về kết quả.

Tóm lại, API Service là một thành phần quan trọng trong React Microservices, cho phép chúng ta xây dựng các ứng dụng phức tạp và linh hoạt hơn. Trong ví dụ trên, chúng ta đã thấy cách sử dụng Express.js để xây dựng API Service trong React Microservices, một trong những framework phổ biến được sử dụng là Express.js. Express.js là một framework Node.js cho phép bạn xây dựng các ứng dụng web và API đơn giản và nhanh chóng.

Với Express.js, bạn có thể tạo ra các endpoint để xử lý các yêu cầu từ client, đóng vai trò là API Service trong kiến trúc Microservices của ứng dụng React. Điều này giúp cho việc quản lý và phát triển ứng dụng trở nên dễ dàng hơn.

Ví dụ, bạn có thể sử dụng Express.js để xây dựng một API Service đơn giản trả về danh sách sản phẩm. Dưới đây là một ví dụ về cách sử dụng Express.js để xây dựng một API Service trả về danh sách sản phẩm:

const express = require('express');
const app = express();
const products = [
  { id: 1, name: 'Product A' },
  { id: 2, name: 'Product B' },
  { id: 3, name: 'Product C' }
];

app.get('/api/products', (req, res) => {
  res.json(products);
});

app.listen(3000, () => console.log('API Service is running on port 3000'));

Trong đoạn mã trên, chúng ta sử dụng Express.js để tạo ra một endpoint /api/products trả về danh sách sản phẩm. Endpoint này sử dụng phương thức GET và trả về dữ liệu dưới định dạng JSON khi được gọi.

Tuy nhiên, đây chỉ là một ví dụ đơn giản để minh họa cho việc sử dụng Express.js để xây dựng API Service trong React Microservices. Thực tế, việc xây dựng một API Service đáp ứng đầy đủ các yêu cầu của ứng dụng Microservices có thể phức tạp hơn rất nhiều.

Ví dụ, bạn có thể sử dụng Express.js để xây dựng một API Service đơn giản trả về danh sách sản phẩm. Dưới đây là một ví dụ về cách sử dụng Express.js để xây dựng một API Service trả về danh sách sản phẩm:

const express = require('express');
const app = express();
const products = [
  { id: 1, name: 'Product A' },
  { id: 2, name: 'Product B' },
  { id: 3, name: 'Product C' }
];

app.get('/api/products', (req, res) => {
  res.json(products);
});

app.listen(3000, () => console.log('API Service is running on port 3000'));

Trong đoạn mã trên, chúng ta sử dụng Express.js để tạo ra một endpoint /api/products trả về danh sách sản phẩm. Endpoint này sử dụng phương thức GET và trả về dữ liệu dưới định dạng JSON khi được gọi.

Tuy nhiên, đây chỉ là một ví dụ đơn giản để minh họa cho việc sử dụng Express.js để xây dựng API Service trong React Microservices. Thực tế, việc xây dựng một API Service đáp ứng đầy đủ các yêu cầu của ứng dụng Microservices có thể phức tạp hơn rất nhiều.

Service Registry

Service Registry là một thành phần quan trọng của kiến trúc Microservices, giúp quản lý các dịch vụ trong hệ thống một cách hiệu quả. Service Registry giúp các dịch vụ trong hệ thống tìm kiếm và truy cập các dịch vụ khác một cách tự động, không cần phải biết trước vị trí của chúng.

Một ví dụ về Service Registry trong Microservices là công cụ Consul của HashiCorp. Consul là một dịch vụ Service Discovery, giúp quản lý các dịch vụ trong một mạng phân tán. Khi một dịch vụ khởi chạy và đăng ký với Consul, các dịch vụ khác có thể truy cập thông tin của dịch vụ đó thông qua Consul. Consul cũng cho phép định cấu hình các dịch vụ và quản lý các phiên bản khác nhau của chúng.

Việc sử dụng Service Registry giúp giảm thiểu sự phụ thuộc giữa các dịch vụ trong hệ thống Microservices, cải thiện khả năng mở rộng và độ tin cậy của hệ thống.

Dưới đây là một ví dụ minh họa về cách sử dụng Service Registry trong Microservices với công nghệ Eureka của Netflix:

Khởi tạo Service Registry: Trước tiên, chúng ta cần khởi tạo Service Registry bằng Eureka Server:

@SpringBootApplication
@EnableEurekaServer
public class ServiceRegistryApplication {

    public static void main(String[] args) {
        SpringApplication.run(ServiceRegistryApplication.class, args);
    }
}

Cấu hình Service Provider: Tiếp theo, chúng ta cần cấu hình Service Provider để đăng ký với Service Registry:

@SpringBootApplication
@EnableDiscoveryClient
public class ServiceProviderApplication {

    public static void main(String[] args) {
        SpringApplication.run(ServiceProviderApplication.class, args);
    }
}

Cấu hình Service Consumer: Cuối cùng, chúng ta cần cấu hình Service Consumer để tìm kiếm và sử dụng dịch vụ từ Service Registry:

@SpringBootApplication
@EnableDiscoveryClient
public class ServiceConsumerApplication {

    public static void main(String[] args) {
        SpringApplication.run(ServiceConsumerApplication.class, args);
    }

    @Bean
    @LoadBalanced
    public RestTemplate restTemplate() {
        return new RestTemplate();
    }

    @RestController
    public class ConsumerController {

        @Autowired
        private RestTemplate restTemplate;

        @Autowired
        private DiscoveryClient discoveryClient;

        @GetMapping("/greeting")
        public String getGreeting() {
            List<ServiceInstance> instances = discoveryClient.getInstances("service-provider");
            URI uri = instances.get(0).getUri();
            return restTemplate.getForObject(uri + "/hello", String.class);
        }
    }
}

Trong ví dụ này, chúng ta đã sử dụng Spring Cloud và Netflix Eureka để thực hiện Service Registry và Service Discovery trong Microservices. ServiceProviderApplication là một service provider và ServiceConsumerApplication là một service consumer. Service consumer sử dụng DiscoveryClient để tìm kiếm các instance của service provider từ Service Registry, sau đó gọi service provider bằng RestTemplate.

Circuit Breaker

Circuit Breaker là một mô hình thiết kế phần mềm giúp ứng dụng xử lý các lỗi liên quan đến các service và network failure trong các hệ thống phân tán như Microservices. Trong một môi trường phân tán, các service sẽ giao tiếp với nhau thông qua network, điều này có nghĩa là nhiều thứ có thể xảy ra không đúng như dự kiến, từ việc mất kết nối mạng đến service không khả dụng hoặc bị quá tải. Circuit Breaker sẽ giúp ứng dụng chuyển sang một hành vi khác khi một service không hoạt động đúng cách.

Circuit Breaker hoạt động dựa trên nguyên tắc mở rộng/giảm quy mô dịch vụ, khi có sự cố xảy ra, nó sẽ đóng các kết nối đến service đó và chuyển hướng yêu cầu đến các service phụ trợ khác, ngăn chặn lưu lượng truy cập đến service bị sự cố và giảm thiểu tác động của sự cố đó đến toàn bộ hệ thống.

Dưới đây là một ví dụ đơn giản về việc sử dụng Circuit Breaker trong React Microservices sử dụng thư viện brakes:

const Brakes = require('brakes');
const fetch = require('node-fetch');

// Khởi tạo Circuit Breaker
const breaker = new Brakes(fetch, { 
  timeout: 1500, // thời gian timeout
  threshold: 0.5, // ngưỡng phân chia Circuit Breaker
  circuitDuration: 30000, // thời gian circuit mở
  name: 'my-breaker', // tên Circuit Breaker
});

// Sử dụng Circuit Breaker
async function getMyData() {
  try {
    const res = await breaker.exec('https://api.example.com/my-data');
    return res.json();
  } catch (err) {
    console.error('Circuit Breaker tripped:', err);
    return { error: true, message: 'Failed to get data' };
  }
}

// Kết thúc Circuit Breaker
breaker.destroy();

Trong ví dụ trên, chúng ta sử dụng thư viện brakes để tạo ra một Circuit Breaker và sử dụng nó để gọi API tới https://api.example.com/my-data. Nếu thời gian phản hồi từ API lâu hơn thời gian timeout hoặc số lần yêu cầu thất bại vượt qua ngưỡng threshold, Circuit Breaker sẽ tripped và gọi lại hàm fallback để xử lý sự cố.

Việc sử dụng Circuit Breaker trong React Microservices giúp giảm thiểu sự cố và tăng tính sẵn sàng của hệ thống, đảm bảo rằng toàn bộ hệ thống hoạt động liên tục và ổn định.

Load Balancer

Trong kiến trúc Microservices, ứng dụng được xây dựng bằng nhiều dịch vụ nhỏ và phân tán, và những dịch vụ này có thể được triển khai trên nhiều máy chủ khác nhau. Khi có nhiều máy chủ và nhiều phiên bản của cùng một dịch vụ, việc định tuyến yêu cầu tới các dịch vụ này trở nên phức tạp hơn. Để giải quyết vấn đề này, Load Balancer được sử dụng để phân phối tải và định tuyến yêu cầu tới các phiên bản của dịch vụ.

Load Balancer là một thành phần phần mềm hoặc phần cứng giúp phân phối tải các yêu cầu tới nhiều phiên bản của một dịch vụ đang chạy trên nhiều máy chủ khác nhau. Khi có yêu cầu được gửi tới Load Balancer, nó sẽ quyết định định tuyến yêu cầu tới phiên bản của dịch vụ đang có tình trạng tốt nhất để xử lý yêu cầu đó.

Ví dụ, nếu có một ứng dụng web được triển khai trên ba máy chủ khác nhau và có một yêu cầu được gửi tới Load Balancer, Load Balancer sẽ quyết định đưa yêu cầu đó tới máy chủ nào đang có tình trạng tốt nhất để xử lý yêu cầu đó. Khi một máy chủ gặp sự cố, Load Balancer có thể định tuyến yêu cầu tới một máy chủ khác để đảm bảo rằng yêu cầu đó được xử lý và không bị mất mát.

Dưới đây là một ví dụ về việc sử dụng thư viện http-proxy-middleware để triển khai Load Balancer trong React Microservices:

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

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

const services = [
  {
    name: 'service1',
    url: 'http://localhost:3001'
  },
  {
    name: 'service2',
    url: 'http://localhost:3002'
  }
];

// Register proxy middleware for each service
services.forEach(service => {
  app.use(`/${service.name}`, createProxyMiddleware({
    target: service.url,
    changeOrigin: true,
    pathRewrite: {
      [`^/${service.name}`]: ''
    }
  }));
});

// Start the server
app.listen(port, () => console.log(`Load Balancer is running on port ${port}`));

Trong ví dụ trên, chúng ta đã đăng ký middleware proxy cho mỗi dịch vụ trong mảng services. Mỗi middleware proxy sẽ chuyển hướng yêu cầu đến địa chỉ URL của dịch vụ tương ứng và cập nhật các header và địa chỉ IP của yêu cầu. changeOrigin được thiết lập thành true để cập nhật header host của yêu cầu và pathRewrite được sử dụng để loại bỏ tiền tố tên dịch vụ khỏi URL.

Với ví dụ này, khi chúng ta nhận được yêu cầu cho /service1 hoặc /service2, middleware proxy tương ứng sẽ chuyển hướng yêu cầu đến địa chỉ URL của dịch vụ tương ứng.

Event Bus

Event Bus là một khái niệm quan trọng trong React Microservices, nó cho phép các service giao tiếp với nhau thông qua truyền tải các thông điệp (message) giữa chúng. Trong một hệ thống Microservices, các service có thể được triển khai và hoạt động độc lập với nhau, điều này có thể dẫn đến việc giao tiếp giữa các service là một vấn đề phức tạp. Event Bus được sử dụng để giải quyết vấn đề này.

Event Bus cung cấp một cơ chế gửi và nhận các thông điệp giữa các service. Các service có thể gửi một thông điệp đến một Event Bus và các service khác có thể đăng ký nhận các thông điệp đó. Khi một thông điệp được gửi đến, tất cả các service đã đăng ký để nhận thông điệp đó sẽ nhận được thông điệp đó.

Sau khi lắng nghe một sự kiện, chúng ta cần đăng ký thông tin của nó với Event Bus. Để làm điều này, chúng ta sử dụng một địa chỉ URL được xác định trước để gửi một yêu cầu HTTP POST đến Event Bus với thông tin đăng ký sự kiện.

Dưới đây là đoạn mã minh họa cho việc đăng ký một sự kiện với Event Bus:

app.post('/events', async (req, res) => {
  const { type, data } = req.body;

  if (type === 'CommentCreated') {
    const status = data.content.includes('orange') ? 'rejected' : 'approved';

    await axios.post('http://event-bus-srv:4005/events', {
      type: 'CommentModerated',
      data: {
        id: data.id,
        postId: data.postId,
        content: data.content,
        status,
      },
    });
  }

  res.send({});
});

Ở đây, chúng ta đã tạo một API endpoint /events để nhận các yêu cầu đăng ký sự kiện từ các microservice khác. Nếu sự kiện được đăng ký là CommentCreated, chúng ta sẽ kiểm tra nội dung của comment và xác định trạng thái của nó (approved hoặc rejected). Sau đó, chúng ta gửi một sự kiện mới CommentModerated đến Event Bus để thông báo về trạng thái đã được xác định của comment.

Lưu ý rằng chúng ta đã sử dụng thư viện axios để gửi yêu cầu HTTP POST đến Event Bus với thông tin sự kiện. Trong ví dụ này, URL của Event Bus là http://event-bus-srv:4005/events.

Sau khi đăng ký sự kiện với Event Bus, các microservice khác có thể lắng nghe sự kiện này và thực hiện các hành động tương ứng với nó.

Proxy Server

Proxy Server trong React Microservices là một thành phần quan trọng để xử lý các yêu cầu giữa các service khác nhau. Nó đóng vai trò như một cánh cửa trung gian cho các yêu cầu của client và định tuyến chúng đến các service phù hợp. Dưới đây là một ví dụ về việc triển khai Proxy Server trong React Microservices bằng Express.js:

Ví Dụ:

const express = require('express');
const httpProxy = require('http-proxy');

const app = express();

// Create proxy server
const proxy = httpProxy.createProxyServer();

// Define routes for each service
app.use('/service1', (req, res) => {
  proxy.web(req, res, { target: 'http://localhost:3001' });
});

app.use('/service2', (req, res) => {
  proxy.web(req, res, { target: 'http://localhost:3002' });
});

// Start server
const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Proxy server is running on port ${port}`));

Ở ví dụ trên, chúng ta sử dụng thư viện http-proxy để tạo ra một instance của Proxy Server. Sau đó, chúng ta định nghĩa các route cho từng service, ví dụ /service1 và /service2. Khi client gửi một yêu cầu đến các route này, chúng ta sử dụng `proxy.web()` để định tuyến yêu cầu đó đến target tương ứng của service. Cuối cùng, chúng ta khởi động server trên một port được xác định trước đó.

Tóm lại, React Microservices là một cách phát triển ứng dụng React dựa trên kiến trúc microservices, giúp tăng tính mở rộng và độ linh hoạt của ứng dụng. Việc sử dụng React Microservices sẽ giúp cho việc phát triển và quản lý ứng dụng của bạn trở nên dễ dàng hơn và hiệu quả hơn. Chúc bạn thành công trong việc áp dụng React Microservices vào ứng dụng của mình!

Top 3 câu hỏi hay nhất về React Microservices

1. Microservices là gì và tại sao nên sử dụng chúng?

Link bài viết: https://viblo.asia/p/microservice-architecture-la-gi-tai-sao-bay-gio-chung-ta-can-den-no-gGJ599gJ5X2

2. Sự khác nhau giữa Microservices và monolithic architecture là gì?

Link bài viết: https://viblo.asia/p/doi-net-ve-microservice-architecture-va-monolithic-architecture-XL6lAAvrlek

3. Khi xây dựng microservices bằng API Gateway cần lưu ý những gì?

Link bài viết: https://bizflycloud.vn/tin-tuc/xay-dung-microservices-bang-api-gateway-20230203165926511.htm