호스트 React 앱과 원격 React 앱 구성하기

원격 애플리케이션은 웹팩 구성에 ModuleFederationPlugin을 추가하고 세 가지 핵심 속성을 설정합니다. name은 고유 식별자(예: "buttonApp"), filename은 매니페스트 출력 파일("remoteEntry.js"), exposes는 공개 이름과 소스 파일 경로를 연결하는 맵입니다.

exposes 구성은 공개 모듈 경로를 로컬 파일에 연결합니다: { './Button': './src/Button' }. 따라서 호스트는 'buttonApp/Button'을 가져와 ./src/Button.tsx의 컴포넌트를 받을 수 있습니다. 여러 컴포넌트, 유틸리티 또는 전체 페이지를 노출할 수도 있습니다.

shared 속성은 중복하지 않고 호스트와 원격 애플리케이션 간에 공유해야 하는 모듈을 Module Federation에 알려 줍니다. 리액트의 경우 다음과 같이 설정합니다: shared: { react: { singleton: true, requiredVersion: deps.react }, 'react-dom': { singleton: true } }. singleton:true는 여러 인스턴스가 동시에 로드되는 것을 방지합니다.

호스트 애플리케이션의 ModuleFederationPlugin 구성에는 다음과 같은 remotes 속성이 포함됩니다: { buttonApp: 'buttonApp@http://localhost:3001/remoteEntry.js' }. 키는 가져오기 네임스페이스이고, 값은 원격의 이름과 @로 결합한 주소입니다. 이를 통해 웹팩은 런타임에 원격을 가져올 위치를 알 수 있습니다.

호스트의 리액트 코드에서는 동적 가져오기를 사용하여 원격 컴포넌트를 가져옵니다: const Button = React.lazy(() => import('buttonApp/Button')). 가져오기 경로는 원격의 네임스페이스와 노출된 모듈 이름에 맞습니다. React.lazy는 가져오기를 코드 분할하고 비동기적으로 로드합니다.

원격 모듈은 비동기적으로 로드되므로, 지연 로드한 원격 컴포넌트는 항상 Suspense 경계로 감싸야 합니다: Suspense fallback=Loading... /. 대체 콘텐츠는 Module Federation이 원격 주소에서 remoteEntry.js와 컴포넌트 청크를 가져오는 동안 렌더링됩니다.

리액트의 훅(useState, useContext, useEffect)은 컴포넌트 상태를 추적하기 위해 하나의 내부 리액트 인스턴스에 의존합니다. 호스트와 원격 애플리케이션이 각자의 리액트 사본을 로드하면 훅에서 "invalid hook call" 오류가 발생합니다. singleton:true를 사용하면 두 애플리케이션이 하나의 리액트 인스턴스를 공유하게 되어 이러한 종류의 오류가 완전히 해결됩니다.

호스트가 react@18.2.0을 사용하고 원격 애플리케이션이 react@18.3.0을 사용하면 Module Federation의 공유 범위가 사용할 버전을 조정합니다. singleton:true와 requiredVersion을 함께 사용하면 호환되는 경우 일반적으로 더 높은 버전을 사용합니다. 고정된 버전 대신 requiredVersion: '>=18.0.0'을 설정하면 유연한 버전 범위를 사용할 수 있습니다.

TypeScript는 컴파일 시점에 원격 모듈을 알지 못하므로 선언이 없으면 import('buttonApp/Button') 같은 가져오기에서 형식 오류가 발생합니다. @module-federation/typescript를 사용하거나 모듈 유형을 선언하는 .d.ts 파일을 직접 만들어 원격 컴포넌트 속성에 대한 형식 안정성을 확보하십시오.

두 앱을 동시에 실행하십시오. 원격 애플리케이션은 포트 3001에서, 호스트는 포트 3000에서 실행합니다. 호스트를 열면 호스트의 Module Federation 런타임이 http://localhost:3001/remoteEntry.js를 가져와 Button 모듈을 찾고, 해당 모듈의 청크를 다운로드한 다음 로컬 컴포넌트인 것처럼 호스트 앱 안에서 렌더링합니다.

프로덕션에서는 localhost:3001을 배포된 원격 애플리케이션의 주소로 바꾸십시오. 일반적인 방식은 원격 주소에 환경 변수를 사용하여 CI/CD가 환경별로 올바른 주소를 주입하도록 하는 것입니다: buttonApp: 'buttonApp@' + process.env.BUTTON_REMOTE_URL + '/remoteEntry.js'.

Module Federation의 공유 구성에서 리액트를 싱글턴으로 설정해야 하는 이유는 무엇입니까?

Module Federation을 구성하려면 원격 애플리케이션에는 name, filename, exposes를 포함한 ModuleFederationPlugin을 설정하고, 호스트에는 remotes를 설정해야 합니다. 원격 컴포넌트는 React.lazy와 동적 가져오기를 사용하고 Suspense로 감싸서 사용하십시오. 리액트와 리액트 DOM은 여러 인스턴스로 인한 훅 오류를 방지하기 위해 공유 싱글턴이어야 합니다. TypeScript 선언과 환경 변수 기반 원격 주소를 추가하면 프로덕션에 사용할 수 있는 구성이 완성됩니다.