本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 了解和實作 上的微型前端 AWS
<a name="introduction"></a>

*Amazon Web Services* [（貢獻者](contributors.md))

*2024 年 7 月* ([文件歷史記錄](doc-history.md))

隨著組織努力提高靈活性和可擴展性，傳統的單體架構通常會成為瓶頸，阻礙快速的開發和部署。微型前端透過將複雜的使用者介面分解為較小的獨立元件來緩解這種情況，這些元件可以自主開發、測試和部署。這種方法可增強開發團隊的效率，並促進後端和前端之間的協作，促進分散式系統的end-to-end一致性。

此方案指引旨在協助 IT 領導者、產品擁有者和架構師了解微型前端架構，並在 Amazon Web Services () 上建置微型前端應用程式AWS。

## 概觀
<a name="overview"></a>

微型前端是一種架構，以應用程式前端分解為獨立開發和部署的成品為基礎。當您將大型前端分割為自主軟體成品時，您可以封裝商業邏輯並減少相依性。這支援更快速且更頻繁地交付產品增量。

微型前端類似於*微型服務*。事實上，微型前端一詞衍生自微型服務一詞，旨在將微型服務的概念傳達為前端。雖然微服務架構通常將後端中的分散式系統與單體前端結合，但微型前端是獨立分散式前端服務。這些服務有兩種設定方式：
+ 僅限前端，與執行微服務架構的共用 API 層整合
+ 完全堆疊，表示每個微型前端都有自己的後端實作。

下圖顯示傳統微服務架構，具有前端整合，使用 API 閘道連線至後端微服務。



![連接到伺服器端微服務的用戶端前端整合。](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/micro-frontends-aws/images/traditional-webarch.png)


下圖顯示具有不同微服務實作的微型前端架構。



![用戶端整合層前端模組和伺服器端微服務。](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/micro-frontends-aws/images/mfe-architectures.png)


如上圖所示，您可以使用微型前端搭配用戶端轉譯或伺服器端轉譯架構：
+ 用戶端轉譯微型前端可以直接使用集中式 APIs公開的 API。
+ 團隊可以在邊界內容中建立backend-for-frontend(BFF)，以減少前端對 APIs的嘈雜性。
+ 在伺服器端，微型前端可以透過使用稱為水合作用的技術，在用戶端上擴增伺服器端方法來表示。當瀏覽器轉譯頁面時，會補充相關聯的 JavaScript，以允許與 UI 元素的互動，例如按一下按鈕。
+ 微型前端可以在後端轉譯，並使用超連結路由到網站的新部分。

微型前端非常適合想要執行下列動作的組織：
+ 擴展多個團隊處理相同的專案。
+ 接受決策的分散化，讓開發人員能夠在已識別的系統邊界內創新。

這種方法可大幅減少團隊的認知負載，因為他們要負責系統的特定部分。它可提高業務敏捷性，因為可以對系統的一部分進行修改，而不會中斷其餘部分。

微型前端是一種獨特的架構方法。雖然有不同的方法來建置微型前端，但它們都有共同的特徵：
+ 微型前端架構由多個獨立元素組成。結構與後端微服務發生的模組化類似。
+ 微型前端完全負責其邊界內容內的前端實作，其中包含下列項目：
  + 使用者界面
  + 資料
  + 狀態或工作階段
  + 商業邏輯
  + 流程

邊界內容是內部一致的系統，具有精心設計的界限，可調解進出的內容。微型前端應盡可能與其他微型前端共用最少的商業邏輯和資料。無論何時需要進行共用，都可以透過明確定義的界面進行，例如自訂事件或被動串流。不過，當涉及設計系統或記錄程式庫等一些交叉修剪問題時，歡迎刻意共用。

建議的模式是使用跨職能團隊來建置微型前端。這表示每個微型前端都是由從後端到前端的相同團隊所開發。從編碼到生產環境中系統的操作化，團隊擁有權至關重要。

本指南不打算建議特定方法。而是討論不同的模式、最佳實務、權衡，以及架構和組織考量。