View a markdown version of this page

AWS의 서버 측 렌더링 마이크로 프런트엔드 - AWS의 서버 측 렌더링 마이크로 프런트엔드

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

AWS의 서버 측 렌더링 마이크로 프런트엔드

게시일: 2022년 9월 9일(다이어그램 기록)

이 아키텍처는 서버리스 접근 방식을 AWS 사용하여에서 서버 측 렌더링 마이크로 프론트엔드를 구현하는 방법을 보여줍니다. 모든 서버리스 마이크로 프론트엔드는 HTML 조각(HTML-on-the-wire)을 반환하고 UI 컴포저는 이러한 독립적인 부분을 연결하여 사용자에게 원활한 경험을 제공합니다.

AWS의 서버 측 렌더링 마이크로 프런트엔드

Amazon CloudFront, Amazon Simple Storage Service, AWS Fargate AWS Lambda AWS Step Functions및 Amazon DynamoDB를 사용한 서버 측 렌더링 마이크로 프런트엔드를 보여주는 아키텍처 다이어그램입니다.

다음 단계에서는 아키텍처를 설명합니다.

  1. Amazon CloudFrontAmazon Simple Storage Service 버킷과 퍼블릭 Application Load Balancer라는 두 가지 오리진이 있는 진입점 역할을 합니다.

  2. Amazon S3 버킷에는 일반적인 마이크로 프런트엔드 종속성, 이미지 및 CSS 파일과 같은 브라우저의 모든 정적 파일이 포함되어 있습니다. 또한 UI 작성기가 모든 마이크로 프론트엔드를 HTML 페이지에 배치하는 데 사용하는 템플릿도 포함되어 있습니다.

  3. UI 컴포저는 AWS Fargate 클러스터에서 실행되고 다양한 마이크로 프런트엔드를 연결하여 응답을 스트리밍하여 성능을 개선합니다. 추가 성능 향상을 위해 Amazon Amazon ElastiCache를 사용하여 마이크로 프런트엔드 출력 또는 전체 페이지를 캐싱합니다.

  4. AWS Systems Manager Parameter Store를 사용하여 모든 마이크로 서비스 엔드포인트를 수집합니다. HTTP 엔드포인트 또는 Amazon 리소스 이름(ARNs)이 될 수 있으며 팀 수준 종속성을 분리할 수 있습니다.

  5. 서버리스 마이크로 프론트엔드는 AWS LambdaAmazon DynamoDB를 사용하여 데이터를 저장하고 UI 컴포저 템플릿에 임베딩할 준비가 된 HTML 조각을 렌더링합니다.

  6. 타사 마이크로 프론트엔드의 경우 Amazon API Gateway를 사용하여 토큰 또는 API 키를 검증하여 애플리케이션만 해당 엔드포인트에 액세스할 수 있도록 합니다.

  7. 마이크로 프론트엔드를 생성하기 위한 로우 코드 솔루션으로 AWS Step Functions Express를 사용합니다. Step Functions는 200개 이상의 서비스와 통합되어 계산을 줄이고, DynamoDB에서 데이터를 기본적으로 검색하고, 렌더링을 Lambda 함수에 위임합니다.

참조 자료

자세한 내용은 다음 리소스를 참조하세요.

다이어그램 기록

이 참조 아키텍처 다이어그램의 업데이트에 대한 알림을 받으려면 RSS 피드를 구독하세요.

변경 사항설명날짜

최초 게시

참조 아키텍처 다이어그램이 처음 게시되었습니다.

2022년 9월 9일

참고

RSS 업데이트를 구독하려면 사용 중인 브라우저에 대해 RSS 플러그인이 활성화되어 있어야 합니다.