by James Beswick | ngày 07 tháng 11 năm 2022 | trong AWS Fargate, AWS Lambda, Serverless | Liên kết cố định | Chia sẻ

Bài đăng này được viết bởi Luca Mezzalira, Principal Specialist Solutions Architect, Serverless.

Microservice là một mô hình phổ biến để xây dựng các hệ thống phân tán. Khi các nhà phát triển giao diện người dùng đã sửa đổi cách tiếp cận của họ để xây dựng kiến trúc trên quy mô lớn, nhiều người đang xây dựng các giao diện người dùng vi mô.

Chuỗi blog này khám phá cách triển khai các giao diện người dùng vi mô bằng cách sử dụng phương pháp kết xuất phía máy chủ (SSR) với các dịch vụ AWS. Bài viết đầu tiên này đề cập đến các đặc điểm kiến trúc và các khối xây dựng để thiết kế kiến trúc giao diện người dùng vi mô thành công trong Đám mây AWS.

Giao diện người dùng vi mô là gì?

Giao diện người dùng vi mô là sự thể hiện kỹ thuật của tên miền phụ của doanh nghiệp. Chúng cho phép các nhóm độc lập làm việc song song, giảm sự phụ thuộc bên ngoài và tăng thông lượng phân phối. Chúng thể hiện một số đặc điểm của dịch vụ vi mô như phân cấp quản trị, thiết kế cho sự thất bại và thiết kế tiến hóa.

Sự khác biệt chính giữa giao diện người dùng vi mô và các thành phần có liên quan đến quyền sở hữu miền hiện có bên trong giao diện người dùng vi mô. Với các thành phần, kiến thức về miền thường được ủy quyền cho vùng chứa của nó, nơi biết cách sử dụng thuộc tính của thành phần dựa trên ngữ cảnh. Việc sở hữu miền bên trong giao diện người dùng vi mô mang lại sự độc lập mà bạn mong đợi trong hệ thống phân tán. Điều này không có nghĩa là các giao diện người dùng vi mô không thể giao tiếp hoặc chia sẻ tài nguyên, nhưng tư duy thì khác so với các thành phần.

Nếu hiện nay bạn đang sử dụng vi dịch vụ, bạn có thể hưởng lợi từ giao diện người dùng vi mô để mở rộng quy mô ứng dụng giao diện người dùng của mình. Trước các giao diện người dùng vi mô, việc mở rộng quy mô chủ yếu dựa vào chuyên môn của các nhà phát triển. Giao diện người dùng vi mô cho phép bạn hiện đại hóa các ứng dụng giao diện người dùng theo cách lặp đi lặp lại giống như bạn làm với vi dịch vụ. Mỗi người dùng chỉ tải xuống mã cần thiết để hoàn thành một tác vụ cụ thể, tăng hiệu suất và trải nghiệm của người dùng đối với ứng dụng web.

Đặc điểm kiến trúc

Chuỗi blog này xây dựng trang chi tiết sản phẩm của một trang web thương mại điện tử mẫu sử dụng giao diện người dùng vi mô với cơ sở hạ tầng serverless.

Trang này bao gồm:

• Một mẫu bao gồm một tiêu đề. Điều này có thể bao gồm các phần phổ biến hơn nhưng sử dụng một phần trong ví dụ này.
• Giao diện người dùng vi mô thông báo được hiển thị phía máy khách. Hệ thống thông báo phải phản ứng với tương tác của người dùng, do đó không thể hiển thị phía máy chủ với phần còn lại của trang.
• Một chi tiết sản phẩm micro-frontend.
• Một đánh giá micro-frontend.

Mọi giao diện người dùng vi mô đều độc lập và có thể được phát triển bởi các nhóm khác nhau làm việc trong cùng một dự án. Điều này có thể làm giảm sự phụ thuộc bên ngoài và các lỗi tiềm ẩn trên toàn bộ ứng dụng.

Các đặc điểm hệ thống chính của dự án này là:

1. Kết xuất phía máy chủ: Hệ thống phải được thiết kế theo phương pháp kết xuất phía máy chủ. Điều này giúp hiển thị trang nhanh chóng bên trong các trình duyệt hiện đại và giảm nhu cầu sử dụng JavaScript phía máy khách để hiển thị trang.
2. Bất khả tri về khung: Giải pháp phải hoạt động với nhiều thư viện JavaScript có sẵn và không bị ràng buộc hoặc tối ưu hóa cho một khung cụ thể.
3. Sử dụng các phương pháp hay nhất về tối ưu hóa: Tối ưu hóa là một tính năng chính cho các ứng dụng kết xuất phía máy chủ. Nhiều ngành công nghiệp dựa vào những đặc điểm này để tăng doanh thu. Ví dụ này tóm tắt các chỉ số quan trọng về trang web, quá trình hydrat hóa lũy tiến và các mức bộ nhớ đệm khác nhau để tăng tốc thời gian phản hồi của trang web.
4. Tính độc lập của nhóm: Mọi giao diện người dùng vi mô phải được phát triển với mức độ phụ thuộc tối thiểu bên ngoài. Sự phối hợp liên tục giữa các nhóm có thể là dấu hiệu của sự kết hợp giữa thời gian thiết kế và làm mất hiệu lực mục đích đằng sau một hệ thống phân tán.
5. Cơ sở hạ tầng serverless dành cho nhà phát triển giao diện người dùng: Mô hình serverless giúp các nhà phát triển tập trung vào logic nghiệp vụ thay vì cơ sở hạ tầng, sử dụng mô hình “trả tiền theo giá trị”, giúp giảm chi phí. Bạn có thể lưu vào bộ nhớ đệm các phản hồi của giao diện người dùng vi mô và giảm lưu lượng truy cập trên nguồn cũng như nhu cầu mở rộng quy mô mọi bộ phận của hệ thống theo cùng một cách.

Thiết kế kiến trúc cấp cao

Đây là thiết kế cấp cao để kết hợp các đặc điểm kiến trúc sau:

1. Điểm truy cập ứng dụng là mạng phân phối nội dung (CDN) được sử dụng vì lý do lưu trữ, hiệu suất và bảo mật.
2. Phương pháp kết xuất phía máy chủ yêu cầu một nơi lưu trữ tất cả các tệp tĩnh để hydrat hóa mã JavaScript trong trình duyệt và để tạo kiểu cho các thành phần.
3. Yêu cầu trang yêu cầu trình soạn thảo giao diện người dùng truy xuất các giao diện người dùng vi mô và ghép chúng lại với nhau để cung cấp trang được trình duyệt sử dụng. Nó truyền trang HTML cuối cùng tới trình duyệt để nâng cao chỉ số hiển thị nội dung (LCP) lớn nhất từ các chỉ số quan trọng của trang web.
4. Việc tách các giao diện người dùng vi mô khỏi trình soạn thảo giao diện người dùng dựa trên hai cơ chế: Khám phá giao diện người dùng vi mô hoạt động giống như khám phá dịch vụ trong kiến trúc vi dịch vụ và mẫu HTML trên mỗi trang mô tả vị trí chèn các giao diện người dùng vi mô vào trong một trang. Các mẫu có thể nằm trong cùng một kho lưu trữ nơi có các tệp tĩnh khác.
5. Giao diện vi mô thông báo phản ứng với các tương tác của người dùng, cung cấp thông báo khi người dùng thêm sản phẩm vào giỏ hàng.
6. Chi tiết sản phẩm giao diện người dùng vi mô có dữ liệu có khả năng lưu vào bộ nhớ đệm cao nên không yêu cầu nhiều thay đổi theo thời gian.
7. Các bài đánh giá vi mô phải truy xuất các bài đánh giá của người dùng về một sản phẩm cụ thể.

Yếu tố then chốt để tránh sự trùng lặp về thời gian thiết kế trong kiến trúc này là việc khám phá các giao diện người dùng vi mô. Ưu điểm chính của phương pháp này là cung cấp khả năng khám phá để đơn giản hóa các chiến lược đa môi trường, đồng thời giảm bán kính vụ nổ nhờ sử dụng triển khai xanh lam/xanh lục hoặc phát hành canary. Chủ đề này sẽ được đề cập sâu hơn trong một bài viết sắp tới.

Từ thiết kế cấp cao đến triển khai

Cách tiếp cận bất khả tri về khung giúp cho phép kiểm soát sự phát triển của hệ thống. Nó đạt được điều này bằng cách sử dụng HTML qua mạng, trong đó mọi giao diện người dùng vi mô hiển thị một đoạn HTML và trả về cho trình soạn thảo giao diện người dùng.

Khi trình soạn thảo giao diện người dùng tập hợp các đoạn HTML, nó sẽ soạn trang cuối cùng để hiển thị bằng cách nhúng. Mỗi trang được thể hiện bằng một mẫu cụ thể được lưu trữ trong các tệp tĩnh. Trình soạn thảo giao diện người dùng truy xuất mẫu rồi truy xuất các tham chiếu phần giữ chỗ trong mẫu có thể được thay thế bằng các đoạn giao diện người dùng vi mô.

Đây là kiến trúc được sử dụng:

1. Amazon CloudFront cung cấp một điểm truy cập duy nhất cho ứng dụng. Bản phân phối có hai nguồn gốc: nguồn đầu tiên dành cho các tệp tĩnh và nguồn thứ hai dành cho trình soạn thảo giao diện người dùng.
2. Các tệp tĩnh được lưu trữ trong bộ chứa Amazon S3. Chúng được trình duyệt và trình soạn thảo giao diện người dùng sử dụng cho các mẫu HTML.
3. Trình soạn thảo giao diện người dùng chạy trên cụm bộ chứa trong AWS Fargate. Việc sử dụng giải pháp được đóng gói cho phép bạn sử dụng khả năng phát trực tuyến và kết xuất đa luồng nếu cần.
4. AWS Systems Manager Parameter Store được sử dụng làm hệ thống khám phá các giao diện người dùng vi mô cơ bản. Dịch vụ này là một kho lưu trữ khóa-giá trị được trình soạn thảo giao diện người dùng sử dụng để truy xuất các điểm cuối của giao diện người dùng vi mô để sử dụng.
5. Giao diện vi mô thông báo lưu trữ gói JavaScript được tối ưu hóa trong nhóm S3. Điều này hiển thị trên máy khách vì nó phải phản ứng với các tương tác của người dùng.
6. Các bài đánh giá giao diện người dùng vi mô được tạo bởi hàm AWS Lambda với các bài đánh giá của người dùng được lưu trữ trong Amazon DynamoDB. Nó được hiển thị hoàn toàn phía máy chủ và xuất ra một đoạn HTML.
7. Chi tiết sản phẩm giao diện người dùng vi mô là giao diện người dùng vi mô mã thấp sử dụng AWS Step Functions. Quy trình làm việc nhanh có thể được gọi một cách đồng bộ và chứa logic để hiển thị đoạn HTML và lớp bộ nhớ đệm. Điều này làm tăng hiệu suất nhờ tích hợp tự nhiên với hơn 200 dịch vụ AWS.

Khi sử dụng phương pháp này, mọi nhóm phát triển giao diện người dùng vi mô đều có thể độc lập xây dựng và phát triển miền kinh doanh của mình. Các điểm tiếp xúc chính với các nhóm khác có liên quan đến sự tích hợp ban đầu và cơ chế giao tiếp giữa các giao diện người dùng vi mô có trong cùng một trang. Khi đạt được những điểm này, mọi nhóm sẽ giảm bớt sự phụ thuộc vào bên ngoài và có thể nắm bắt được bản chất tiến hóa của các giao diện vi mô.

Phần kết luận

Bài đăng đầu tiên này bắt đầu hành trình tìm hiểu các giao diện người dùng vi mô, một kiến trúc phân tán dành cho các ứng dụng giao diện người dùng. Bài đăng tiếp theo sẽ khám phá trình soạn thảo giao diện người dùng và triển khai khám phá giao diện người dùng vi mô.

Nếu bạn muốn tìm hiểu thêm về giao diện người dùng vi mô, hãy xem khung quyết định về giao diện người dùng vi mô, một mô hình tinh thần được tạo ra cho sự phức tạp ban đầu của việc tiếp cận thiết kế giao diện người dùng vi mô. Khi được sử dụng như một ngôi sao bắc đẩu, khung quyết định sẽ đơn giản hóa việc phát triển các ứng dụng giao diện người dùng vi mô.

Trong phần kiến trúc tham chiếu AWS, bạn có thể tìm thấy sơ đồ hoàn chỉnh tương tự như ứng dụng được mô tả trong loạt blog này cùng với các chi tiết bổ sung.

Để biết thêm tài nguyên học tập serverless, hãy truy cập Serverless Land.

TAGS: contributed, serverless