마이크로 프론트엔드로 페이지 및 뷰 작성

클라이언트 측 컴포지션, 엣지 사이드 컴포지션 및 서버 측 컴포지션을 사용하여 응용 프로그램 뷰를 구성할 수 있습니다. 구성 패턴은 필요한 팀 기술, 내결함성, 성능 및 캐시 동작 측면에서 서로 다른 특성을 가지고 있습니다.

다음 다이어그램은 마이크로 프런트엔드 아키텍처의 클라이언트 측, 에지 측 및 서버 측 계층에서 구성이 어떻게 발생하는지를 보여줍니다.

클라이언트 측, 엣지 사이드 및 서버 측 레이어는 다음 섹션에서 설명합니다.

클라이언트 측 구성

클라이언트 (브라우저 또는 모바일 웹 뷰) 에서 마이크로 프론트엔드를 DOM (Document Object Model) 프래그먼트로 동적으로 로드하고 추가합니다. CDN (콘텐츠 전송 네트워크) 에서 CSS 파일과 같은 JavaScript 마이크로 프론트엔드 아티팩트를 로드하여 지연 시간을 줄일 수 있습니다. 클라이언트측 구성을 위해서는 다음이 필요합니다.

• 브라우저에서 런타임에 마이크로 프론트엔드 구성 요소를 검색, 로드 및 렌더링할 수 있도록 셸 애플리케이션 또는 마이크로 프론트엔드 프레임워크를 소유하고 유지 관리하는 팀

• HTML, CSS 및 같은 프론트엔드 기술에 대한 높은 기술 수준 및 JavaScript 브라우저 환경에 대한 심층적인 이해

• 페이지에 JavaScript 로드되는 양의 최적화 및 글로벌 네임스페이스 충돌을 방지하기 위한 규칙

다음 다이어그램은 서버리스 클라이언트측 구성을 위한 예제 AWS 아키텍처를 보여줍니다.

클라이언트측 구성은 셸 애플리케이션을 통해 브라우저 환경에서 이루어집니다. 다이어그램에는 다음과 같은 세부 정보가 나와 있습니다.

1. 셸 애플리케이션이 로드되면 CloudFrontAmazon에 매니페스트 엔드포인트를 통해 로드될 마이크로 프론트엔드를 검색해 달라는 초기 요청을 보냅니다.

2. 매니페스트에는 각 마이크로 프론트엔드에 대한 정보 (예: 이름, URL, 버전, 폴백 동작) 가 포함됩니다. 매니페스트는 마이크로 프론트엔드 검색 서비스에서 제공됩니다. 다이어그램에서 이 검색 서비스는 AWS Lambda 함수인 Amazon API Gateway와 Amazon DynamoDB로 표현됩니다. 셸 애플리케이션은 매니페스트 정보를 사용하여 개별 마이크로 프론트엔드에 지정된 레이아웃 내에서 페이지를 구성하도록 요청합니다.

3. 각 마이크로 프론트엔드 번들은 정적 파일 (예: CSS, HTML) 로 구성됩니다. JavaScript 파일은 Amazon Simple Storage 서비스 (Amazon S3) 버킷에서 호스팅되고 이를 통해 제공됩니다. CloudFront

4. 팀은 소유한 배포 파이프라인을 사용하여 새 버전의 마이크로 프론트엔드를 배포하고 매니페스트 정보를 업데이트할 수 있습니다.

엣지 사이드 컴포지션

원본 서버 앞의 일부 CDN 및 프록시에서 지원하는 ESI (엣지 사이드 포함) 또는 SSI (서버 사이드 포함) 와 같은 트랜스클루전 기법을 사용하여 페이지를 구성한 후 클라이언트에 전송하십시오. ESI에는 다음이 필요합니다.

• ESI 기능이 있는 CDN 또는 서버 측 마이크로 프론트엔드 앞에 프록시 배포를 사용하는 경우 HAProxy, Varnish, NGINX와 같은 프록시 구현은 SSI를 지원합니다.

• ESI 및 SSI 구현의 사용 및 제한에 대한 이해

새 애플리케이션을 시작하는 팀에서는 일반적으로 컴포지션 패턴을 위해 엣지 사이드 컴포지션을 선택하지 않습니다. 하지만 이 패턴은 트랜스클루전에 의존하는 레거시 애플리케이션을 위한 경로를 제공할 수 있습니다.

서버 측 구성

페이지가 엣지에 캐시되기 전에 오리진 서버를 사용하여 페이지를 작성할 수 있습니다. PHP, Jakarta Server Pages (JSP) 또는 템플릿 라이브러리와 같은 기존 기술을 사용하여 마이크로 프론트엔드의 프래그먼트를 포함하여 페이지를 구성할 수 있습니다. 또한 서버에서 실행되는 Next.js 같은 JavaScript 프레임워크를 사용하여 서버 측 렌더링 (SSR) 으로 서버의 페이지를 작성할 수 있습니다.

페이지를 서버에서 렌더링한 후 CDN에 캐시하여 지연 시간을 줄일 수 있습니다. 새 버전의 마이크로 프론트엔드를 배포할 때는 페이지를 다시 렌더링하고 캐시를 업데이트하여 고객에게 최신 버전을 제공해야 합니다.

서버측 구성을 위해서는 서버 환경을 심층적으로 이해하여 배포 패턴을 설정하고, 서버측 마이크로 프론트엔드를 검색하고, 캐시 관리를 수행해야 합니다.

다음 다이어그램은 서버측 구성을 보여줍니다.

다이어그램에는 다음과 같은 구성 요소 및 프로세스가 포함됩니다.

1. CloudFrontAmazon은 애플리케이션에 고유한 진입점을 제공합니다. 배포에는 두 개의 오리진이 있습니다. 첫 번째는 정적 파일용이고 다른 하나는 UI 컴포저용입니다.

2. 정적 파일은 Amazon S3 버킷에서 호스팅됩니다. 브라우저와 UI 컴포저에서 HTML 템플릿용으로 사용합니다.

3. UI 컴포저는 의 컨테이너 클러스터에서 실행됩니다. AWS Fargate 컨테이너식 솔루션을 사용하면 필요한 경우 스트리밍 기능과 멀티스레드 렌더링을 사용할 수 있습니다.

4. 의 기능인 Parameter Store는 기본 AWS Systems Manager마이크로 프런트엔드 검색 시스템으로 사용됩니다. 이 기능은 UI 컴포저가 사용할 마이크로 프런트엔드 엔드포인트를 검색하는 데 사용하는 키-값 저장소를 제공합니다.

5. 알림 마이크로 프론트엔드는 최적화된 번들을 S3 버킷에 저장합니다. JavaScript 이는 사용자 상호 작용에 반응해야 하므로 클라이언트에서 렌더링됩니다.

6. 리뷰 마이크로 프론트엔드는 Lambda 함수로 구성되며 사용자 리뷰는 DynamoDB에 저장됩니다. 리뷰 마이크로 프론트엔드는 완전히 서버 측에서 렌더링되며 HTML 프래그먼트를 출력합니다.

7. 제품 세부 정보 마이크로 프론트엔드는 사용하는 로우 코드 마이크로 프론트엔드입니다. AWS Step Functions 익스프레스 워크플로는 동기적으로 호출할 수 있으며 HTML 프래그먼트와 캐싱 레이어를 렌더링하기 위한 로직이 포함되어 있습니다.

서버측 컴포지션에 대한 자세한 내용은 블로그 게시물 서버측 렌더링 마이크로 프론트엔드 — 아키텍처를 참조하십시오.