기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
서비스 검색
프런트엔드 검색 패턴은 마이크로 프런트엔드를 개발, 테스트 및 제공할 때 개발 경험을 개선합니다. 패턴은 마이크로 프런트엔드의 진입점을 설명하는 공유 가능한 구성을 사용합니다. 공유 가능한 구성에는 canary 릴리스를 사용하여 각 환경에서 안전하게 배포하는 데 사용되는 추가 메타데이터도 포함됩니다.
최신 프런트엔드 개발에는 개발 중에 모듈화를 지원하기 위해 다양한 도구와 라이브러리가 필요합니다. 일반적으로이 프로세스는 초기 로드(브라우저에서 앱이 열릴 때) 및 사용량(고객이 버튼 선택 또는 정보 삽입과 같은 작업을 수행할 때)을 포함하여 런타임 중에 네트워크 호출을 최소한으로 유지하기 위해 CDN에서 호스팅할 수 있는 개별 파일로 코드를 번들링하는 것으로 구성되었습니다.
번들 분할
마이크로 프론트엔드 아키텍처는 대규모 기능 세트를 개별적으로 번들링하여 생성된 매우 큰 번들로 인한 성능 문제를 해결합니다. 예를 들어, 매우 큰 전자 상거래 웹 사이트를 6MB JavaScript 파일로 번들링할 수 있습니다. 압축에도 불구하고 해당 파일의 크기는 앱을 로드하고 엣지 최적화 CDN에서 파일을 다운로드할 때 사용자의 경험에 부정적인 영향을 미칠 수 있습니다.
앱을 홈 페이지, 제품 세부 정보 및 장바구니 마이크로 프론트엔드로 분할하는 경우 번들링 메커니즘을 사용하여 개별 2MB 번들 3개를 생성할 수 있습니다. 이 변경으로 인해 사용자가 홈 페이지를 사용할 때 첫 번째 로드의 성능이 300% 향상될 수 있습니다. 제품 또는 장바구니 마이크로 프론트엔드 번들은 사용자가 항목에 대한 제품 페이지를 방문하여 구매하기로 결정한 경우에만 비동기식으로 로드됩니다.
이 접근 방식을 기반으로 많은 프레임워크와 라이브러리를 사용할 수 있으며 고객과 개발자 모두에게 이점이 있습니다. 코드의 종속성을 분리할 수 있는 비즈니스 경계를 식별하기 위해 다양한 비즈니스 기능을 여러 팀에 매핑할 수 있습니다. 분산 소유권은 독립성과 민첩성을 도입합니다.
빌드 패키지를 분할할 때 구성을 사용하여 마이크로 프런트엔드를 매핑하고 초기 로드 및 사후 로드 탐색을 위한 오케스트레이션을 구동할 수 있습니다. 그러면 빌드 시간이 아닌 런타임 중에 구성을 사용할 수 있습니다. 예를 들어 클라이언트 측 프런트엔드 코드 또는 서버 측 백엔드 코드는 API에 대한 초기 네트워크 호출을 수행하여 마이크로 프런트엔드 목록을 동적으로 가져올 수 있습니다. 또한 구성 및 통합에 필요한 메타데이터를 가져옵니다. 신뢰성과 성능을 위해 장애 조치 전략과 캐싱을 구성할 수 있습니다. 마이크로 프론트엔드를 매핑하면 쉘 앱에서 오케스트레이션한 이전에 배포된 마이크로 프론트엔드에서 마이크로 프론트엔드를 개별적으로 배포할 수 있습니다.
카나리아 릴리스
카나리아 릴리스는 마이크로 서비스를 배포하기 위해 잘 정립되고 널리 사용되는 패턴입니다. Canary는 릴리스의 대상 사용자를 여러 그룹으로 버킷팅하고 즉각적인 대체(블루/그린 배포라고도 함)와 달리 변경 사항을 점진적으로 릴리스합니다. 카나리아 릴리스 전략의 예로는 대상 사용자의 10%에 새 변경 사항을 롤아웃하고 1분마다 10%를 추가하는 것이 있으며, 총 기간은 10분으로 100%에 도달합니다.
카나리아 릴리스의 목표는 변경 사항에 대한 초기 피드백을 받아 시스템을 모니터링하여 문제의 영향을 줄이는 것입니다. 자동화가 적용되면 배포를 중지하거나 롤백을 시작할 수 있는 내부 시스템에서 비즈니스 또는 시스템 지표를 모니터링할 수 있습니다.
예를 들어 변경으로 인해 릴리스 후 처음 몇 분 내에 수익 손실 또는 성능 저하를 초래하는 버그가 발생할 수 있습니다. 자동 모니터링은 경보를 시작할 수 있습니다. 서비스 검색 패턴을 사용하면이 경보가 배포를 중지하고 즉시 롤백하여 사용자의 100%가 아닌 20%만 영향을 받을 수 있습니다. 비즈니스는 문제의 범위가 축소되어 이점을 얻을 수 있습니다.
DynamoDB를 스토리지로 사용하여 REST 관리자 API를 구현하는 아키텍처 예제는 GitHub의 AWS에서 프런트엔드 서비스 검색을
