View a markdown version of this page

마이크로 프런트엔드로 페이지 및 뷰 구성 - AWS 권장 가이드
클라이언트 측 구성엣지 측 구성서버 측 구성

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

마이크로 프런트엔드로 페이지 및 뷰 구성

클라이언트 측 구성, 엣지 측 구성 및 서버 측 구성을 사용하여 애플리케이션의 보기를 구성할 수 있습니다. 구성 패턴은 필요한 팀 기술, 내결함성, 성능 및 캐시 동작 측면에서 서로 다른 특성을 갖습니다.

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

클라이언트 측, 엣지 측 및 서버 측 계층에 마이크로 프런트엔드가 있는 오리진, CDN 및 클라이언트.

클라이언트 측, 엣지 측 및 서버 측 계층은 다음 섹션에서 설명합니다.

클라이언트 측 구성

클라이언트(브라우저 또는 모바일 웹 보기)에서 마이크로 프런트엔드를 문서 객체 모델(DOM) 조각으로 동적으로 로드하고 추가합니다. JavaScript 또는 CSS 파일과 같은 마이크로 프론트엔드 아티팩트는 지연 시간을 줄이기 위해 콘텐츠 전송 네트워크(CDNs)에서 로드할 수 있습니다. 클라이언트 측 구성에는 다음이 필요합니다.

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

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

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

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

웹 앱은 CloudFront를 통해 마이크로 프런트엔드 검색 서비스 및 Amazon S3에 연결됩니다.

클라이언트 측 구성은 쉘 애플리케이션을 통해 브라우저 환경에서 발생합니다. 다이어그램은 다음 세부 정보를 보여줍니다.

  1. 쉘 애플리케이션을 로드한 후 Amazon CloudFront에 매니페스트 엔드포인트를 통해 로드할 마이크로 프런트엔드를 검색하도록 초기 요청합니다.

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

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

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

엣지 측 구성

오리진 서버 앞의 일부 CDNs 및 프록시에서 지원하는 엣지 측 포함(ESI) 또는 서버 측 포함(SSI)과 같은 트랜스클루전 기술을 사용하여 클라이언트에 유선으로 전송하기 전에 페이지를 작성합니다. ESI에는 다음이 필요합니다.

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

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

새 애플리케이션을 시작하는 팀은 일반적으로 구성 패턴에 엣지 측 구성을 선택하지 않습니다. 그러나이 패턴은 트랜스클루전에 의존하는 레거시 애플리케이션에 대한 경로를 제공할 수 있습니다.

서버 측 구성

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

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

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

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

7단계로 구성된 서버 측 구성입니다.

다이어그램에는 다음 구성 요소와 프로세스가 포함되어 있습니다.

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

  2. 정적 파일은 Amazon S3 버킷에서 호스팅됩니다. 브라우저와 HTML 템플릿용 UI 작성기에서 사용됩니다.

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

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

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

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

  7. 제품 세부 정보 마이크로 프론트엔드는를 사용하는 로우 코드 마이크로 프론트엔드입니다AWS Step Functions. Express 워크플로는 동기식으로 호출할 수 있으며 HTML 조각과 캐싱 계층을 렌더링하기 위한 로직이 포함되어 있습니다.

서버 측 구성에 대한 자세한 내용은 블로그 게시물 서버 측 렌더링 마이크로 프론트엔드 - 아키텍처를 참조하세요.