GPT 한테 물어봤다.

두 깃헙 레포지토리에서 Single Page application을 제작하고, 한 앱처럼 보이기위 합치려고 해. 아마 A에 navigation 바와 page들에대한 export가 진행도고, B 레포지토리에선 Page만 export하려해. 그리고 A, B에서 만든 빌드 파일들을 합쳐 한 어플리케이션으로 돌리고 싶어. 아마도 navigation bar에서 클리이나 어떠한 이벤트로 웹서버로부터 page를 받아와 렌더링 해야할 것 같아. 뭐부터 해야할까??

일단 GPT에게 얻은 정보로는 express도 기본적인 정적 호스팅이 가능한걸로 보임. 그래서 nginx없이 express와 출처가 다른 앱들을 호출 및 렌더링 하는걸 우선 시도해 보려고 함.

Express + Vite 로 구성

• app1 (vue3, page들을 만들 레포)
• rapp2 (vue3, page들을 만들 레포)
• repo_root (vue3, nav bar를 구성할 레포)
• was_server (express, 여러 앱을 fetch하기 위한 서버)

폴더 구조는 일단 위와 같이 진행 해보려 함.

고려사항

• 각 앱의 vueRouter와 root앱 라우팅 조절이 필요함

결정사항 1

이거 page별로 html을 뱉어야하나. vue 컴포넌트를 뱉어야하나.

HTML을 만들어 뱉을 때

• SSR 하기 편할듯
• 어떤 프레임워크를 쓰든 무관할듯? Vue 빌드하면 Vue에만 쓸수 있으려나?
  • Dynamic Import 할때와 똑같이 할 수 있는건가?

컴포넌트 빌드 파일 뱉을 때

• 가볍다..?

구성 중간에 정해야할 기본적이 사항들 마저 정리되지 않은 것 같아 여기저기 MFEA와 그 방식들에대해 조금 리서치 진행.

앱의 포지션엔 여러가지 단위가 있는데, 보통 마이크로 앱을 부르는 앱과 불림 당하는 앱 두가지로 존재하며, 부름과 불림이 둘다 가능한 앱도 존재한다. (Container, Container Reference 요런식으로 단위를 구분하는 글도 있었다.)

module federation

하나의 앱을 독립적인 배포가 가능한 모듈 단위(Webpack에서의 청크)로 나누어 브라우저 런타임에 합체시키는 개념입니다.

마틴파울러가 포스트한 마이크로 프론트엔드 아키텍처 5가지

web component 방식?

사전 통합

1. Server-side template Composition

다른 페이지의 컴포넌트와 상호작용하기 힘듬

2. Build-time Integration

mirinae처럼 쪼갠 서비스 컴포넌트 버전. 분리된 만큼 빌드 타임도 분리되고, 오너쉽을 따로 가질 수 있음.

브라우저 런타임 통합

3. Run-time Integration via iframes

iframe의 고질적인 문제를 가져가야 함. (보안, webApi)

4. Run-time Integration via Web Components

장

• 비교적 최신 web 스펙
• iframe처럼 보안 문제가 없으면서 분리된 HTML을 기존 앱에 쉽게 통합할 수 있습니다.

단

• React와 같은 라이브러리의 컴포넌트를 개발하는 방식과 달라, 기존과 조금 다른 개발방식을 사용해야할 수 있음
• web-components는 커스텀한 HTML 태그의 형태를 가지고 있어서 속성값을 통해서만 데이터를 공유받을 수 있음

SAP에서 만든 오픈소스 Micro Frontends 도구인 luigi