기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다. # AWS Amplify, Angular 및 Module Federation을 사용하여 마이크로 프런트엔드용 포털 생성 *Milena Godau 및 Pedro Garcia, Amazon Web Services* ## 요약 마이크로 프런트엔드 아키텍처를 사용하면 여러 팀이 프런트엔드 애플리케이션의 여러 부분에서 독립적으로 작업할 수 있습니다. 각 팀은 애플리케이션의 다른 부분을 방해하지 않고 프런트엔드의 조각을 개발, 구축 및 배포할 수 있습니다. 최종 사용자의 관점에서 볼 때 단일하고 일관된 애플리케이션인 것으로 보입니다. 그러나 서로 다른 팀이 게시하는 여러 독립 애플리케이션과 상호 작용하고 있습니다. 이 문서에서는 [AWS Amplify](https://docs.amplify.aws/gen1/angular/), [Angular](https://angular.dev/overview) 프런트엔드 프레임워크 및 [모듈 페더레이션](https://webpack.js.org/concepts/module-federation/)을 사용하여 마이크로 프런트엔드 아키텍처를 생성하는 방법을 설명합니다. 이 패턴에서 마이크로 프런트엔드는 쉘(또는 *상위*) 애플리케이션에 의해 클라이언트 측에서 결합됩니다. 쉘 애플리케이션은 마이크로 프런트엔드를 검색, 표시 및 통합하는 컨테이너 역할을 합니다. 쉘 애플리케이션은 다양한 마이크로 프런트엔드를 로드하는 글로벌 라우팅을 처리합니다. [@angular-Architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation) 플러그인은 모듈 페더레이션을 Angular와 통합합니다. 를 사용하여 쉘 애플리케이션과 마이크로 프런트엔드를 배포합니다 AWS Amplify. 최종 사용자는 웹 기반 포털을 통해 애플리케이션에 액세스합니다. 포털은 세로로 분할됩니다. 즉, 마이크로 프런트엔드는 동일한 뷰의 일부가 아닌 전체 뷰 또는 뷰 그룹입니다. 따라서 쉘 애플리케이션은 한 번에 하나의 마이크로 프런트엔드만 로드합니다. 마이크로 프런트엔드는 원격 모듈로 구현됩니다. 쉘 애플리케이션은 이러한 원격 모듈을 느리게 로드하므로 필요할 때까지 마이크로 프런트엔드 초기화가 지연됩니다. 이 접근 방식은 필요한 모듈만 로드하여 애플리케이션 성능을 최적화합니다. 이렇게 하면 초기 로드 시간이 단축되고 전체 사용자 경험이 향상됩니다. 또한 webpack 구성 파일(**webpack.config.js**)을 통해 모듈 간에 공통 종속성을 공유합니다. 이 방법은 코드 재사용을 촉진하고, 중복을 줄이고, 번들링 프로세스를 간소화합니다. ## 사전 조건 및 제한 사항 **사전 조건 ** + 활성 AWS 계정 + Node.js 및 npm이 [설치되었습니다](https://nodejs.org/en/download/). + Amplify CLI, [설치](https://docs.amplify.aws/gen1/angular/tools/cli/)됨 + [Angular CLI 설치됨](https://angular.io/cli) + 사용 [권한](https://docs.aws.amazon.com/service-authorization/latest/reference/list_awsamplify.html) AWS Amplify + Angular에 대한 지식 **제품 버전** + Angular CLI 버전 13.1.2 이상 + @angular-Architects/module-federation 버전 14.0.1 이상 + Webpack 버전 5.4.0 이상 + AWS Amplify 1세대 **제한 사항 ** 마이크로 프론트엔드 아키텍처는 확장 가능하고 복원력이 뛰어난 웹 애플리케이션을 구축하기 위한 강력한 접근 방식입니다. 그러나이 접근 방식을 채택하기 전에 다음과 같은 잠재적 문제를 이해하는 것이 중요합니다. + **통합** - 모놀리식 프런트엔드에 비해 복잡성이 증가할 가능성이 있습니다. 여러 마이크로 프런트엔드를 오케스트레이션하고, 이들 간의 통신을 처리하고, 공유 종속성을 관리하는 것은 더 복잡할 수 있습니다. 또한 마이크로 프런트엔드 간의 통신과 관련된 성능 오버헤드가 있을 수 있습니다. 이 통신은 지연 시간을 늘리고 성능을 저하시킬 수 있습니다. 이는 효율적인 메시징 메커니즘과 데이터 공유 전략을 통해 해결해야 합니다. + **코드 복제 **- 각 마이크로 프런트엔드는 독립적으로 개발되므로 공통 기능 또는 공유 라이브러리에 대한 코드를 복제할 리스크가 있습니다. 이렇게 하면 전체 애플리케이션 크기가 증가하고 유지 관리 문제가 발생할 수 있습니다. + **조정 및 관리** - 여러 마이크로 프런트엔드에서 개발 및 배포 프로세스를 조정하는 것은 어려울 수 있습니다. 분산 아키텍처에서는 일관된 버전 관리, 종속성 관리, 구성 요소 간 호환성 유지가 더 중요해집니다. 원활한 협업 및 제공을 위해서는 명확한 거버넌스, 지침, 자동화된 테스트 및 배포 파이프라인을 수립하는 것이 필수적입니다. + **테스트** - 마이크로 프런트엔드 아키텍처 테스트는 모놀리식 프런트엔드 테스트보다 더 복잡할 수 있습니다. 구성 요소 간 통합 테스트 및 엔드 투 엔드 테스트를 수행하고 여러 마이크로 프런트엔드에서 일관된 사용자 경험을 검증하려면 추가 노력과 특수한 테스트 전략이 필요합니다. 마이크로 프론트엔드 접근 방식을 적용하기 전에 [마이크로 프론트엔드 이해 및 구현을 검토하는 AWS](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html) 것이 좋습니다. ## 아키텍처 마이크로 프런트엔드 아키텍처에서 각 팀은 독립적으로 기능을 개발하고 배포합니다. 다음 이미지는 여러 DevOps 팀이 어떻게 협력하는지 보여줍니다. 포털 팀은 쉘 애플리케이션을 개발합니다. 쉘 애플리케이션은 컨테이너 역할을 합니다. 다른 DevOps 팀이 게시한 마이크로 프런트엔드 애플리케이션을 검색, 표시 및 통합합니다. AWS Amplify 를 사용하여 쉘 애플리케이션과 마이크로 프론트엔드 애플리케이션을 게시합니다. ![사용자가 웹 포털을 통해 액세스하는 쉘 앱에 여러 마이크로 프런트엔드 게시.](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/images/pattern-img/ddf82a69-bf1b-4ad1-8e60-3dd375699936/images/cf045bf1-11ea-46d9-93cb-3c603122450d.png) 다이어그램은 다음 아키텍처를 보여줍니다. 1. 포털 팀은 쉘 애플리케이션을 개발하고 유지 관리합니다. 쉘 애플리케이션은 전체 포털을 구성하기 위해 마이크로 프런트엔드의 통합 및 렌더링을 오케스트레이션합니다. 1. 팀 A와 B는 포털에 통합된 하나 이상의 마이크로 프런트엔드 또는 기능을 개발하고 유지 관리합니다. 각 팀은 각 마이크로 프런트엔드에서 독립적으로 작업할 수 있습니다. 1. 최종 사용자는 Amazon Cognito를 사용하여 인증합니다. 1. 최종 사용자가 포털에 액세스하면 쉘 애플리케이션이 로드됩니다. 사용자가 탐색할 때 쉘 애플리케이션은 라우팅을 처리하고 요청된 마이크로 프론트엔드를 검색하여 번들을 로드합니다. ## 도구 **AWS 서비스** + [AWS Amplify](https://docs.amplify.aws/angular/start/)는 프런트엔드 웹 및 모바일 개발자가 풀 스택 애플리케이션을 빠르게 구축할 수 있도록 특별히 제작된 도구 및 기능 세트입니다 AWS. 이 패턴에서는 Amplify CLI를 사용하여 Amplify 마이크로 프런트엔드 애플리케이션을 배포합니다. + [AWS Command Line Interface (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html)는 명령줄 셸의 명령을 AWS 서비스 통해와 상호 작용하는 데 도움이 되는 오픈 소스 도구입니다. **기타 도구** + [@angular-Architects/module-federation](https://github.com/angular-architects/module-federation-plugin)은 Angular를 모듈 페더레이션과 통합하는 플러그인입니다. + [Angular](https://angular.dev/overview)는 현대적이고 확장 가능하며 테스트 가능한 단일 페이지 애플리케이션을 구축하기 위한 오픈 소스 웹 애플리케이션 프레임워크입니다. 코드 재사용 및 유지 관리를 촉진하는 모듈식 구성 요소 기반 아키텍처를 따릅니다. + [Node.js](https://nodejs.org/en/docs/)는 확장 가능한 네트워크 애플리케이션 구축을 위해 설계된 이벤트 기반 JavaScript 런타임 환경입니다. + [npm](https://docs.npmjs.com/about-npm)은 Node.js 환경에서 실행되는 소프트웨어 레지스트리로, 패키지를 공유 또는 대여하고 개인 패키지의 배포를 관리하는 데 사용됩니다. + [Webpack Module Federation](https://webpack.js.org/concepts/module-federation/)을 사용하면 마이크로 프런트엔드 또는 플러그인과 같이 독립적으로 컴파일되고 배포된 코드를 애플리케이션에 로드할 수 있습니다. **코드 리포지토리** 이 패턴의 코드는 [Angular 및 Module Federation GitHub 리포지토리를 사용하는 Micro-frontend 포털](https://github.com/aws-samples/angular-module-federation-mfe)에서 사용할 수 있습니다. GitHub 이 리포지토리에는 다음 두 개의 폴더가 포함되어 있습니다. + `shell-app` 에는 쉘 애플리케이션의 코드가 포함되어 있습니다. + `feature1-app` 에는 샘플 마이크로 프론트엔드가 포함되어 있습니다. 쉘 애플리케이션은이 마이크로 프론트엔드를 가져와 포털 애플리케이션 내의 페이지로 표시합니다. ## 모범 사례 마이크로 프론트엔드 아키텍처는 많은 이점을 제공하지만 복잡성도 초래합니다. 다음은 원활한 개발, 고품질 코드 및 우수한 사용자 경험을 위한 몇 가지 모범 사례입니다. + **계획 및 커뮤니케이션** - 협업을 간소화하기 위해 선결제 계획, 설계 및 명확한 커뮤니케이션 채널에 투자합니다. + **설계 일관성** - 설계 시스템, 스타일 가이드 및 구성 요소 라이브러리를 사용하여 마이크로 프런트엔드에서 일관된 시각적 스타일을 적용합니다. 이를 통해 일관된 사용자 환경을 제공하고 개발을 가속화할 수 있습니다. + **종속성 관리** - 마이크로 프론트엔드는 독립적으로 발전하기 때문에 표준화된 계약 및 버전 관리 전략을 채택하여 종속성을 효과적으로 관리하고 호환성 문제를 방지합니다. + **마이크로 프론트엔드 아키텍처 -** 독립적인 개발 및 배포를 가능하게 하려면 각 마이크로 프론트엔드에 캡슐화된 기능에 대한 명확하고 잘 정의된 책임이 있어야 합니다. + **통합 및 통신** - 원활한 통합을 촉진하고 충돌을 최소화하기 위해 API, 이벤트 및 공유 데이터 모델을 포함한 마이크로 프런트엔드 간의 명확한 계약 및 통신 프로토콜을 정의합니다. + **테스트 및 품질 보증** - 마이크로 프런트엔드를 위한 테스트 자동화 및 지속적 통합 파이프라인을 구현합니다. 이렇게 하면 전반적인 품질이 향상되고 수동 테스트 작업이 줄어들며 마이크로 프런트엔드 상호 작용 간의 기능이 검증됩니다. + **성능 최적화** - 성능 지표를** **지속적으로 모니터링하고 마이크로 프런트엔드 간의 종속성을 추적합니다. 이를 통해 병목 현상을 식별하고 최적의 애플리케이션 성능을 유지할 수 있습니다. 이를 위해 성능 모니터링 및 종속성 분석 도구를 사용합니다. + **개발자 경험** - 명확한 설명서, 도구 및 예시를 제공하여 개발자 경험에 집중합니다. 이를 통해 개발을 간소화하고 새 팀원을 온보딩할 수 있습니다. ## 에픽 ### 샘플 애플리케이션을 생성합니다. | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | 샘플 애플리케이션을 생성합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | | 플러그인을 설치합니다. | Angular CLI에 다음 명령을 입력하여 [@angular-Architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation) 플러그인을 설치합니다.
ng add @angular-architects/module-federation --project shell --port 4200
| 앱 개발자 | | 마이크로 프런트엔드 URL을 환경 변수로 추가합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | | 라우팅 정의 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | | `mfe1` 모듈을 선언합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | | 마이크로 프런트엔드에 대한 사전 로드를 준비합니다. | 마이크로 프런트엔드를 미리 로드하면 웹팩이 공유 라이브러리와 패키지를 올바르게 협상하는 데 도움이 됩니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | | HTML 콘텐츠를 조정합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | ### 마이크로 프론트엔드 애플리케이션 생성 | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | 마이크로 프런트엔드를 생성합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | | 플러그인을 설치합니다. | 다음 명령을 입력하여 @angular-Architects/module-federation 플러그인을 설치합니다.
ng add @angular-architects/module-federation --project mfe1 --port 5000
| 앱 개발자 | | 모듈과 구성 요소를 생성합니다. | 다음 명령을 입력하여 모듈과 구성 요소를 생성하고 원격 항목 모듈로 내보냅니다.
ng g module mfe1 --routing
ng g c mfe1
| 앱 개발자 | | 기본 라우팅 경로를 설정합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | | `mfe1` 경로를 추가합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | | **webpack.config.js** 파일을 편집합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | | HTML 콘텐츠를 조정합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | ### 로컬로 애플리케이션 테스트합니다. | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | 애플리케이션을 실행합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | | 쉘 애플리케이션을 실행합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | ### 마이크로 프런트엔드 로드 오류를 처리하도록 쉘 애플리케이션을 리팩터링합니다. | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | 모듈과 구성 요소를 생성합니다. | 쉘 애플리케이션의 루트 폴더에 다음 명령을 입력하여 오류 페이지에 대한 모듈과 구성 요소를 생성합니다.
ng g module error-page --routing
ng g c error-page
| 앱 개발자 | | HTML 콘텐츠를 조정합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | | 기본 라우팅 경로를 설정합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | | 마이크로 프런트엔드를 로드하는 함수를 생성합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | | 오류 처리를 테스트합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | ### 를 사용하여 애플리케이션 배포 AWS Amplify | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | 마이크로 프런트엔드를 배포합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자, AWS DevOps | | SAM 애플리케이션 배포 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자, 앱 소유자 | | CORS를 활성화합니다. | 쉘 및 마이크로 프론트엔드 애플리케이션은 서로 다른 도메인에서 독립적으로 호스팅되므로 마이크로 프론트엔드에서 크로스 오리진 리소스 공유(CORS)를 활성화해야 합니다. 이렇게 하면 쉘 애플리케이션이 다른 오리진에서 콘텐츠를 로드할 수 있습니다. CORS를 활성화하려면 사용자 지정 헤더를 추가합니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자, AWS DevOps | | 쉘 애플리케이션에 재작성 규칙을 생성합니다. | Angular 쉘 애플리케이션은 HTML5 라우팅을 사용하도록 구성됩니다. 사용자가 하드 새로 고침을 수행하는 경우 Amplify는 현재 URL에서 페이지를 로드하려고 시도합니다. 이렇게 하면 403 오류가 생성됩니다. 이를 방지하려면 Amplify 콘솔에 재작성 규칙을 추가합니다.
재작성 규칙을 생성하려면 다음 단계를 따릅니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자, AWS DevOps | | 웹 포털을 테스트합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 앱 개발자 | ### 리소스 정리 | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | 애플리케이션을 삭제합니다. | 쉘 및 마이크로 프론트엔드 애플리케이션이 더 이상 필요하지 않은 경우 삭제합니다. 이렇게 하면 사용하지 않는 리소스에 대한 요금을 방지할 수 있습니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 일반 AWS | ## 문제 해결 | 문제 | Solution | | --- | --- | | `amplify init` 명령을 실행할 때 사용할 수 있는 AWS 프로필 없음 | AWS 프로필이 구성되지 않은 경우에도 `amplify init` 명령을 계속 진행할 수 있습니다. 그러나 인증 방법을 묻는 메시지가 표시되면 `AWS access keys` 옵션을 선택해야 합니다. AWS 액세스 키와 보안 키를 사용할 수 있도록 합니다.
또는에 대해 명명된 프로파일을 구성할 수 있습니다 AWS CLI. 지침은 AWS CLI 설명서의 [구성 및 자격 증명 파일 설정을](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html) 참조하세요. | | 원격 항목 로드 오류 | 쉘 애플리케이션의 **main.ts** 파일에 원격 항목을 로드할 때 오류가 발생하면 `environment.mfe1URL` 변수가 올바르게 설정되었는지 확인합니다. 이 변수의 값은 마이크로 프론트엔드의 URL이어야 합니다. | | 마이크로 프런트엔드에 액세스할 때 404 오류 발생 | 에서와 같이 로컬 마이크로 프론트엔드에 액세스하려고 할 때 404 오류가 발생하면 다음을 `http://localhost:4200/mfe1`확인하세요.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | ## 추가 정보 **AWS 설명서** + [의 마이크로 프런트엔드 이해 및 구현 AWS](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html)(AWS 권고 가이드) + [Amplify](https://docs.amplify.aws/gen1/angular/tools/cli/)(Amplify 설명서) + [Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)(Amplify 설명서) **기타 참조** + [모듈 페더레이션](https://webpack.js.org/concepts/module-federation/) + [Node.js](https://nodejs.org/en/) + [각형](https://angular.io/) + [@angular-Architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation)