https://github.com/daily1hour/pickme-mfa-root
마이크로 프론트엔드 통합
https://github.com/daily1hour/pickme-mfa-root
single-spa
Last synced: 6 months ago
JSON representation
마이크로 프론트엔드 통합
- Host: GitHub
- URL: https://github.com/daily1hour/pickme-mfa-root
- Owner: Daily1Hour
- Created: 2024-11-25T12:23:49.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-07T08:35:23.000Z (8 months ago)
- Last Synced: 2025-05-07T09:38:02.861Z (8 months ago)
- Topics: single-spa
- Language: EJS
- Homepage: https://main.dpdmc4drvy3w0.amplifyapp.com/
- Size: 273 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 마이크로 프론트엔드 통합
> Single-Spa Root 구성
## 🛠️ 기술 스택
[](https://single-spa.js.org/)
[](https://module-federation.io/)
[](https://ejs.co/)
[](https://webpack.kr/)
## 💡 주요 기능
1. **Single-Spa Root**
- Single-SPA 응용 프로그램을 시작하는 루트 HTML
- `singleSpa.registerApplication`을 호출
2. **Single-SPA**
- 여러 JavaScript 마이크로프론트엔드를 동적으로 통합하는 프레임워크
- 페이지 새로고침 없이 Vue, Svelte, React 등 프레임워크 사용
- 마이크로프론트엔드를 독립적으로 개발 및 배포 가능
- Application, Parcel, Root로 구분
- 각 싱글페이지를 책임 단위로 나누어 서로 다른 프레임워크로 구현 및 배포
3. **Module Federation**
- Webpack 5 기반의 탈중앙화 아키텍처 패턴
- 애플리케이션 간 코드 및 리소스 공유
- 런타임에서 원격 모듈을 동적으로 로드
- Remote와 Host로 구분
- 스타일가이드를 공유하기 위해 사용
## 🧩 마이크로 프론트 애플리케이션 구성
## 📦 프로젝트 의존 그래프
### 개괄
```mermaid
flowchart BT
Nav ==> Auth -.-> Style-Guide
MFA-Root ==> Nav & Chat & Reminder & Record & Report & Review
MFA-Root -...-> Style-Guide
Record & Report & Review & Chat & Reminder --> Auth
Record & Report & Review -.-> Style-Guide
click MFA-Root "https://github.com/Daily1Hour/PickMe-MFA-Root"
click Style-Guide "https://github.com/Daily1Hour/PickMe-Style-Guide"
click Nav "https://github.com/Daily1Hour/PickMe-Nav-Application"
click Auth "https://github.com/Daily1Hour/PickMe-Auth-Parcel"
click Record "https://github.com/Daily1Hour/PickMe-Record-Application"
click Report "https://github.com/Daily1Hour/PickMe-Report-Application"
click Review "https://github.com/Daily1Hour/PickMe-Review-Application"
click Reminder "https://github.com/Daily1Hour/PickMe-Reminder-Application"
click Chat "https://github.com/Daily1Hour/PickMe-Chat-Application"
subgraph info[<화살표 안내>]
style info fill:#FAFAFA,stroke:#9F9F9F,stroke-width:1px
direction BT
A ==Single-SPA mount==> B
A --Single-SPA utility--> C
A -.Module Federation.-> D
end
```
- 노드 클릭 시 각 프로젝트 이동
- 연관 관계는 [Single-SPA](https://single-spa.js.org/)와 [Module Federation](https://module-federation.io/)
- svelte: _Nav_
- vue: _Report_, _Chat_
- react: _Auth_, _Record_, _Review_
### 개요
```mermaid
flowchart BT
%% 스타일 및 컴포넌트 공유
subgraph styleguide[pickme/style-guide]
subgraph styles["/styles"]
styleguide/styles/global.ts[global.css]
end
subgraph vue["/vue-components"]
styleguide/vue/components[Shared Components]
end
subgraph react["/react-components"]
styleguide/react/chakra-ui-system.jsx[chakra-ui-system.jsx]
styleguide/react/components[Shared Components]
end
end
%% Single-SPA Parcel 앱
subgraph auth[pickme/auth]
auth/ChakraProvider[ChakraProvider]
end
auth/ChakraProvider -.-> styleguide/react/chakra-ui-system.jsx
%% Svelte 앱
subgraph nav[pickme/nav]
nav/auth[parcel/auth]
end
nav/auth ==>|object| auth
%% React 앱
subgraph record[pickme/record]
record/ChakraProvider[ChakraProvider]
record/Components[Components]
end
record:::delegate -->|utility| auth
record/ChakraProvider -.-> styleguide/react/chakra-ui-system.jsx
record/Components -.-> styleguide/react/components
%% Vue 앱
subgraph report[pickme/report]
report/Components[Components]
end
report:::delegate -->|utility| auth
report/Components -.-> styleguide/vue/components
%% Microfrontend 루트 앱
subgraph mfa-root[pickme/mfa-root]
mfa-root/microfrontend-layout.html[microfrontend-layout.html]
mfa-root/index.ejs[index.ejs]
end
mfa-root ==> nav
mfa-root ==> record
mfa-root ==> report
mfa-root/index.ejs -.-> styleguide/styles/global.ts
%% 대표 앱 표시
classDef delegate stroke-width:3px;
```
- 각 애플리케이션(_Nav_, _Chat_, _Reminder_, _Record_, _Report_, _Review_)들은 **MFA-Root**에서 Single-SPA 애플리케이션으로써 동적 호출됨.
- *Auth*는 *Nav*에 Single-SPA 파셀로써 동적 호출됨.
- *Auth*는 각 애플리케이션들에 유틸리티로써 동적 호출됨.
- **Style-Guide**는 MFA-Root에 스타일 제공을 위해 Module Federation으로 동적 호출됨.
- *Style-Guide*는 각 애플리케이션에 공유 컴포넌트 제공을 위해 Module Federation으로 동적 호출됨.
## 🏗️ 아키텍처 다이어그램
1. 각 마이크로프론트엔드는 _GitHub Actions_ CI/CD를 통해 빌드되어 *S3*에 정적 파일로 저장됨.
2. *CloudFront*가 *S3*의 정적 파일을 CDN으로 배포함.
3. Importmap 타입의 JSON을 *CloudFront*를 통해 배포하여 동적 리소스 매핑 제공.
4. Root 프로젝트의 레포지토리 변경 사항을 *Amplify*가 감지하여 자동 배포함.
5. 사용자가 _Route53_ DNS로 접근하면 *Amplify*가 루트 파일을 클라이언트에 전송함.
6. 클라이언트는 Importmap을 통해 각 Single-SPA 리소스를 동적으로 불러옴.
7. `singleSpa.registerApplication`을 사용해 개별 마이크로프론트엔드를 동적으로 통합함.
## 🚀 실행 방법
### 환경변수
```python
IMPORT_MAPS_URL= # 개별 애플리케이션 리소스 매핑 주소
```
### 서버 실행
```sh
$ npm run start
```