마이크로 프론트엔드 소개

마이크로 프론트엔드에서는 모놀리식 앱을 여러 개의 작은 앱으로 나눕니다.

각 앱은 모놀리식 앱의 고유한 기능을 담당합니다.
예를 들어
전자상거래 앱은 아래와 같이 더 작은 독립 마이크로 프런트엔드 앱으로 나눌 수 있습니다.

• 상품목록
• 장바구니
• 배송
• 결제
• 추적
• 고객 서비스 등

왜 마이크로 프론트엔드인가?

• 여러 팀이 하나의 MFE 앱을 전담하여 개별적으로 작업할 수 있습니다.
• 코드 재사용성이 매우 높습니다.
• 각 팀은 자신의 기술(React/Angular/Vue), 배포, 개발 전략 등을 자유롭게 선택할 수 있습니다.
• 하나의 앱이 다운되어도 나머지 앱은 계속 작동합니다.
• 각 MFE 앱은 크기가 작아서 이해하고 변경하기 쉽습니다.

모놀리식 vs 마이크로 프론트엔드 앱 아키텍처

모놀리식 앱 :- 웹 애플리케이션의 모든 기능을 하나의 앱에 담았습니다.
마이크로 프론트엔드 앱 :- 각 기능은 독립적인 MFE 앱(예:
)에 의해 관리됩니다. MFE #1은 앱바를 담당합니다.
MFE #2는 제품 목록을 담당합니다.
MFE #3은 측면 탐색 모음을 담당합니다.
컨테이너 앱은 이러한 MFE 앱 간의 조정을 담당합니다.

MFE 앱이 서로 통합되는 방식

1. Build Time 통합(Compile Time 통합)
2. 런타임 통합(클라이언트측 통합)
3. 서버측 통합(SSR 통합).

Build Time 통합(Compile Time 통합)
이 통합에서 컨테이너 앱은 모든 MFE 앱 소스 코드에 액세스할 수 있으며 브라우저에 로드되기 전에 컨테이너 앱이 빌드/컴파일될 때 결합된 번들이 생성됩니다.

장점

• 설정 및 이해가 매우 간단합니다.
• MFE는 성능 향상을 위해 지연 로드될 수 있습니다.

단점

• MFE npm 패키지가 변경될 때마다 컨테이너 앱을 다시 빌드하고 다시 배포해야 합니다.
• 여러 MFE가 컨테이너 앱과 긴밀하게 결합되면 MFE 앱이 분산형 모놀리식 앱이 될 가능성이 있습니다.
• 간단히 말하면 MFE는 NPM 패키지와 유사한 컨테이너 앱과 통합됩니다.

Build Time Integration에서 MFE 앱을 통합하는 방법(여기에서는 전자상거래 애플리케이션을 예로 들어 설명)

1. 1팀, Products-List MFE 앱을 개발합니다.
2. 1팀은 Products-List MFE 앱을 배포하고 NPM 패키지로 게시합니다.
3. 컨테이너 앱을 관리하는 팀 #2는 제품 목록 MFE 앱을 컨테이너 앱의 NPM 패키지 종속성으로 포함합니다.
4. 2번 팀은 컨테이너 앱 번들을 컴파일하고 빌드합니다. 이 번들에는 Products-List MFE 앱 코드를 포함한 컨테이너 앱 코드도 포함되어 있습니다.
5. 간단히 말하면 MFE는 NPM 패키지와 유사한 컨테이너 앱과 통합됩니다.
6. 그렇습니다.

런타임 통합(클라이언트 측 통합)
이 통합에서는 컨테이너 앱이 브라우저에 로드되면 MFE 앱의 URL을 사용하여 MFE 앱에 액세스할 수 있습니다.

장점

• 컨테이너 앱을 다시 배포하지 않고도 각 MFE를 배포할 수 있습니다.
• 동일한 MFE 앱의 다른 버전을 사용할 수 있으며, 컨테이너는 사용할 MFE 버전과 시기를 결정할 수 있으므로 테스트와 통합이 쉬워집니다.
• 각 MFE 앱에는 개발 목적을 위한 자체 도구와 라이브러리가 있을 수 있습니다.

단점

• 런타임 MFE는 빌드 타임 MFE보다 설정 및 통합이 더 복잡합니다.

MFE 앱이 런타임 통합에 통합되는 방법(여기에서는 전자상거래 애플리케이션을 예로 들어 설명)

1. 1팀, Products-List MFE 앱을 개발합니다.
2. 팀 #1은 Products-List MFE(예: https://mystore.in/productslist.js)를 배포합니다.
3. 컨테이너 앱을 관리하는 #2팀에서는 webpack-module-federation을 사용하여 컨테이너 앱과 통합합니다.
4. 사용자가 https://mystore.in/을 열면 컨테이너 앱이 브라우저에 로드되고 Products-List MFE 앱을 가져와 컨테이너 앱 페이지의 정의된 위치에 표시합니다.
5. 그렇습니다.

서브사이드 통합(SSR 통합)

이 통합에서 마이크로 프론트엔드 앱은 SSR 구성 요소 작동과 유사한 방식으로 작동합니다. 모든 MFE 앱은 서버 측에 통합되고 합성된 컨테이너 앱은 브라우저로 반환됩니다.

장점

• 앱이 더 빠르게 로드됩니다.
• SEO 친화적인 접근 방식.

단점

제한된 상호작용.
개발에 도전하세요.

지금은 여기까지입니다. 시간 내주셔서 감사합니다.

위 내용은 마이크로 프론트엔드 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!