마이크로 프론트엔드 통합

Single-Spa Root 구성

🛠️ 기술 스택

💡 주요 기능

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로 구분

     • 스타일가이드를 공유하기 위해 사용

🧩 마이크로 프론트 애플리케이션 구성

📦 프로젝트 의존 그래프

개괄

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

Loading

• 노드 클릭 시 각 프로젝트 이동

• 연관 관계는 Single-SPA와 Module Federation

• svelte: Nav

• vue: Report, Chat

• react: Auth, Record, Review

개요

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;

Loading

• 각 애플리케이션(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을 사용해 개별 마이크로프론트엔드를 동적으로 통합함.

🚀 실행 방법

환경변수

IMPORT_MAPS_URL= # 개별 애플리케이션 리소스 매핑 주소

서버 실행

$ npm run start