𝗦𝗶𝗻𝗴𝗹𝗲𝗦𝗣𝗔 𝗪𝗼𝗿𝗸𝘀. 𝗜𝗺𝗽𝗼𝗿𝘁 𝗠𝗮𝗽𝘀 𝗗𝗼𝗻'𝘁 𝗠𝗮𝗻𝗮𝗴𝗲 𝗧𝗵𝗲𝗺𝘀𝗲𝗹𝘃𝗲𝘀
SingleSPA는 잘 작동합니다. 우리는 하나의 페이지에서 React, Vue, Angular 앱을 실행합니다. 이들은 독립적으로 로드됩니다. 프레임워크는 제 역할을 다합니다.
문제는 프레임워크가 아닙니다. 문제는 그 주변의 생태계입니다.
분산 아키텍처에서는 소유권(ownership), 감사(auditing), 거버넌스(governance)가 필요합니다. SingleSPA는 import map이 조정의 중심점 역할을 하기 때문에 이러한 필요성을 가시화합니다.
import map은 root config에 존재합니다. 이는 JSON 파일입니다. 모든 마이크로 프론트엔드(MFE)에 어떤 버전의 React를 로드할지 알려줍니다. 이론적으로는 이것이 신뢰할 수 있는 단일 원천(source of truth)입니다. 하지만 실제로는 아무도 이를 관리하지 않습니다.
각 팀은 자신들의 MFE를 소유합니다. 하지만 아무도 map을 소유하지 않습니다.
이로 인해 다음과 같은 문제가 발생합니다:
- 팀이 MFE를 폐기해도 map에는 항목이 남아 있습니다.
- 새로운 의존성(dependency)이 생겨도 아무도 map에 추가하지 않습니다.
- 방치하는 동안 map은 노후화됩니다.
우리는 map에서 8개월 동안 배포되지 않은 MFE를 발견했습니다. 이미 사용되지 않는 것이었지만, 프로덕션 환경에서는 여전히 로드되고 있었습니다. 아무도 확인하지 않았기에 아무도 눈치채지 못했습니다.
빌드 과정에서 map을 자동 생성하는 방법을 생각할 수도 있습니다. 저희도 시도해 보았습니다. 하지만 이는 머지 충돌(merge conflicts)이라는 새로운 문제를 야기합니다. 14개의 팀이 매 배포마다 하나의 JSON 파일에 쓰기를 시도한다면, CI 파이프라인은 엉망이 될 것입니다.
또 다른 문제는 드리프트(drift)입니다. 패턴은 간단합니다. 설정에서 React를 external로 지정하고, import map이 이를 제공하도록 하는 것입니다. 이렇게 하면 중복 번들(bundle)을 방지할 수 있습니다.
하지만 누군가 코드를 리팩토링하다가 실수로 React를 다시 MFE에 번들링해 버릴 수 있습니다. 빌드도 통과하고, 테스트도 통과하며, 배포도 성공(green)합니다.
다음과 같은 상황이 되어서야 문제를 인지하게 됩니다:
- 번들 크기가 급증할 때.
- 버전 불일치로 인해 컴포넌트가 깨질 때.
- Chrome DevTools에서 React가 두 번 로드되는 것을 발견했을 때.
시스템을 감사한 결과, 자체적으로 React를 포함하여 배포하는 두 개의 MFE를 발견했습니다. 빌드는 성공 상태였지만, 그들은 자신들이 규정(compliance)을 어기고 있다는 사실을 전혀 모르고 있었습니다.
import map과 package.json 파일은 서로 별개의 입력값입니다. 이 둘은 조용히 서로 어긋나기 시작합니다.
CI 체크를 통해 중복 번들을 찾아낼 수는 있습니다. 하지만 버전 불일치는 찾아낼 수 없습니다. MFE A는 React 18.2를 사용하고 MFE B는 18.3을 사용한다면, 빌드는 실패하지 않습니다. 하지만 런타임(runtime)에서 공유 컴포넌트가 깨지게 됩니다.
React를 업데이트해야 할 때, 우리는 14개의 서로 다른 저장소를 grepping하며 몇 시간을 허비합니다. 이는 매우 비효율적입니다.
우리는 이를 해결하기 위해 도구를 만들었습니다. 이 도구는 두 가지 일을 합니다:
- 모든 MFE의
package.json으로부터 버전 매트릭스를 생성합니다. - 해당 매트릭스를 import map과 비교합니다.
이 도구는 그 격차를 보여줍니다. 어떤 팀이 규정을 준수하고 있고 어떤 팀에서 차이(drift)가 발생했는지 보여줍니다. 또한 오래된 항목(stale entries)과 깨진 URL도 찾아냅니다. 우리는 매주 월요일 아침마다 이 도구를 실행합니다. 실행 시간은 12초가 걸립니다.
우리가 얻은 교훈은 기술적인 것이 아니었습니다. 모든 분산 아키텍처에는 공유 인프라를 관리할 책임자(owner)가 필요합니다. SingleSPA에서 import map은 인프라입니다. 이를 단순한 공유 파일처럼 취급하지 마세요. 관리되는 자산(managed asset)으로 취급해야 합니다.
여러분은 이를 어떻게 처리하시나요? import map 담당자가 있나요? 아니면 월요일 아침을 파일들을 grepping 하는 데 보내고 계신가요?
출처: https://dev.to/siongsheng/singlespa-works-import-maps-dont-manage-themselves-4jbe