Module Federation 으로 MFE(Micro Frontend) 찍먹하기 (feat. Nx)

MFE(Micro Frontend)?

[A4] Webpack 5 Module Federation으로 Micro-Frontends 운영하기

Webpack 5 Module Federation으로 Micro-Frontends 운영하기 - 임지훈 | 비즈넵발표자료: https://drive.google.com/file/d/1GcTQ92CUN0SWyNO0DkKwAjSLgtIHdF4R/view?usp=sharing

https://youtu.be/0Eq6evGKJ68

토스ㅣSLASH 21 - Micro-frontend React, 점진적으로 도입하기

거대한 모놀리식 Django 프로젝트에 현대적인 프론트엔드 인프라를 구축한 사례를 공유합니다. 어떻게 해야 오래된 코드 베이스를 대대적으로 수정하지 않으면서도, 최신 프론트엔드 기술들을 적극적으로 도입해나갈 수 있을지 고민한 경험을 공유합니다.조유성 / 토스 Full Stack D...

https://youtu.be/DHPeeEvDbdo

[Track 2-4] 원지혁 - 프론트엔드에서의 마이크로 서비스 아카텍처

https://www.youtube.com/watch?v=FQoNY2W0s4E

NX 로 찍먹해보기

Nx Workspace 생성

npx create-nx-workspace@latest mfe-module-federation --preset=empty

❯ npx create-nx-workspace@latest mfe-module-federation --preset=empty       
✔ Use Nx Cloud? (It's free and doesn't require registration.) · Yes

 >  NX   Nx is creating your v14.3.3 workspace.

   To make sure the command works reliably in all environments, and that the preset is applied correctly,
   Nx will run "npm install" several times. Please wait.

✔ Installing dependencies with npm
✔ Nx has successfully created the workspace.
✔ NxCloud has been set up successfully

Nx CLI 설치

npm install -g nx

react 플러그인 설치

npm install -D @nrwl/react

Module Federation host, remotes 앱 생성

nx g @nrwl/react:host host --remotes=cat

---
❯ nx g @nrwl/react:host host --remotes=cat

>  NX  Generating @nrwl/react:host

? Which stylesheet format would you like to use? … 
  CSS
  SASS(.scss)       [ http://sass-lang.com                     ]
  Stylus(.styl)     [ http://stylus-lang.com                   ]
  LESS              [ http://lesscss.org                       ]
  styled-components [ https://styled-components.com            ]
❯ emotion           [ https://emotion.sh                       ]
  styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]
  None

폴더구조

mfe-module-federation
├──  apps
│   ├──  cat
│   ├──  cat-e2e
│   ├──  host
│   └──  host-e2e
├──  babel.config.json
├──  jest.config.ts
├──  jest.preset.js
├──  libs
├──  nx.json
├──  package-lock.json
├──  package.json
├──  README.md
├──  tools
│   ├──  generators
│   └──  tsconfig.tools.json
├──  tsconfig.base.json
└──  workspace.json

remote 추가하기

nx g @nrwl/react:remote dog --host=host

host app 실행하기

nx serve host

nx serve host --devRemotes=cat,dog

remotes 수정하기

import styled from '@emotion/styled';

const StyledApp = styled.div`
  border: 1px solid #c9c9c9;
  background-color: #C5D6D2;
`;

interface AppProps {
  query?: string
}

export function App({query = 'query'}: AppProps) {
  return (
    <StyledApp>
      <h1>cat</h1>
      <h2>{query}</h2>
    </StyledApp>
  );
}

export default App;

import styled from '@emotion/styled';

const StyledApp = styled.div`
  border: 1px solid #c9c9c9;
  background-color: #D0BDAF;
`;

interface AppProps {
  query?: string
}

export function App({query = 'query'}: AppProps) {
  return (
    <StyledApp>
      <h1>dog</h1>
      <h2>{query}</h2>
    </StyledApp>
  );
}

export default App;

host app 수정하기

import { useState } from 'react';
import * as React from 'react';
import { Link, Route, Routes } from 'react-router-dom';

const Cat = React.lazy(() => import('cat/Module'));
const Dog = React.lazy(() => import('dog/Module'));

export function App() {
  const [query, setQuery] = useState('Hello World!');

  return (
    <React.Suspense fallback={null}>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/cat">Cat</Link>
        </li>
        <li>
          <Link to="/dog">Dog</Link>
        </li>
      </ul>
      <h1>query: {query}</h1>
      <Routes>
        <Route path="/" element={<div />} />
        <Route path="/cat" element={<Cat query={query} />} />
        <Route path="/dog" element={<Dog query={query} />} />
      </Routes>
    </React.Suspense>
  );
}

export default App;

shared

nx g @nrwl/react:library shared/ui

❯ nx g @nrwl/react:library shared/ui

>  NX  Generating @nrwl/react:library

CREATE libs/shared/ui/project.json
UPDATE workspace.json
CREATE libs/shared/ui/.eslintrc.json
CREATE libs/shared/ui/.babelrc
CREATE libs/shared/ui/README.md
CREATE libs/shared/ui/src/index.ts
CREATE libs/shared/ui/tsconfig.json
CREATE libs/shared/ui/tsconfig.lib.json
UPDATE tsconfig.base.json
CREATE libs/shared/ui/jest.config.ts
CREATE libs/shared/ui/tsconfig.spec.json
CREATE libs/shared/ui/src/lib/shared-ui.spec.tsx
CREATE libs/shared/ui/src/lib/shared-ui.tsx

nx g @nrwl/react:component -p shared-ui --name JButton --fileName JButton

import styled from '@emotion/styled';
import { ComponentPropsWithoutRef } from 'react';

export interface JButtonProps extends ComponentPropsWithoutRef<'button'> {
  label: string;
}

const StyledJButton = styled.button`
  color: pink;
`;

export function JButton({ label, ...rest }: JButtonProps) {
  return <StyledJButton {...rest}>{label}</StyledJButton>;
}

export default JButton;

import styled from '@emotion/styled';
import { JButton } from '@mfe-module-federation/shared/ui';

const StyledApp = styled.div`
  border: 1px solid #c9c9c9;
  background-color: #c5d6d2;
`;

interface AppProps {
  query?: string;
}

export function App({ query = 'query' }: AppProps) {
  return (
    <StyledApp>
      <h1>cat</h1>
      <h2>{query}</h2>
      <JButton label="cat button" />
    </StyledApp>
  );
}

export default App;

import styled from '@emotion/styled';
import { JButton } from '@mfe-module-federation/shared/ui';

const StyledApp = styled.div`
  border: 1px solid #c9c9c9;
  background-color: #d0bdaf;
`;

interface AppProps {
  query?: string;
}

export function App({ query = 'query' }: AppProps) {
  return (
    <StyledApp>
      <h1>dog</h1>
      <h2>{query}</h2>
      <JButton label="dog button" />
    </StyledApp>
  );
}

export default App;

Main

import styled from '@emotion/styled';
import { JButton } from '@mfe-module-federation/shared/ui';

const StyledApp = styled.div`
  border: 1px solid #c9c9c9;
  background-color: #d0bdaf;
`;

interface AppProps {
  query?: string;
  handleButtonClick?: (foo: string) => void;
}

export function App({ query = 'query', handleButtonClick }: AppProps) {
  return (
    <StyledApp>
      <h3>by localhost:4202</h3>
      <h1>dog</h1>
      <h2>{query}</h2>
      <JButton
        label="dog button"
        onClick={() => handleButtonClick && handleButtonClick('dog foo')}
      />
    </StyledApp>
  );
}

export default App;

import styled from '@emotion/styled';
import { JButton } from '@mfe-module-federation/shared/ui';

const StyledApp = styled.div`
  border: 1px solid #c9c9c9;
  background-color: #c5d6d2;
`;

interface AppProps {
  query?: string;
  handleButtonClick?: (foo: string) => void;
}

export function App({ query = 'query', handleButtonClick }: AppProps) {
  return (
    <StyledApp>
      <h3>by localhost:4201</h3>
      <h1>cat</h1>
      <h2>{query}</h2>
      <JButton
        label="cat button"
        onClick={() => handleButtonClick && handleButtonClick('cat foo')}
      />
    </StyledApp>
  );
}

export default App;

import styled from '@emotion/styled';
import * as React from 'react';

const Cat = React.lazy(() => import('cat/Module'));
const Dog = React.lazy(() => import('dog/Module'));

const StyledBox = styled.div`
  display: flex;
`;

const Wrapper = styled.div`
  flex: 1;
`;

interface MainProps {
  query: string;
  handleButtonClick?: (foo: string) => void;
}

export function Main({ query, handleButtonClick }: MainProps) {
  return (
    <div>
      <StyledBox>
        <Wrapper>
          <Cat query={query} handleButtonClick={handleButtonClick} />
        </Wrapper>
        <Wrapper>
          <Dog query={query} handleButtonClick={handleButtonClick} />
        </Wrapper>
      </StyledBox>
    </div>
  );
}

import { useState } from 'react';
import * as React from 'react';
import { Link, Route, Routes } from 'react-router-dom';
import { Main } from './Main';

const Cat = React.lazy(() => import('cat/Module'));
const Dog = React.lazy(() => import('dog/Module'));

export function App() {
  const [query, setQuery] = useState('Hello World!');

  const handleButtonClick = (query: string) => {
    setQuery(query);
  };

  return (
    <React.Suspense fallback={null}>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/cat">Cat</Link>
        </li>
        <li>
          <Link to="/dog">Dog</Link>
        </li>
      </ul>
      <h1>query: {query}</h1>
      <Routes>
        <Route
          path="/"
          element={<Main query={query} handleButtonClick={handleButtonClick} />}
        />
        <Route
          path="/cat"
          element={<Cat query={query} handleButtonClick={handleButtonClick} />}
        />
        <Route
          path="/dog"
          element={<Dog query={query} handleButtonClick={handleButtonClick} />}
        />
      </Routes>
    </React.Suspense>
  );
}

export default App;

마무리

References

Deploying Micro Frontends to AWS Step by Step Using React, Webpack 5, and Module Federation

If you are new to Microfrontends, you may start with the following article: In this article, we will deploy MFE1 and MFE2 to AWS and access them from the internet, instead of LocalHost. I will try to use the bare minimum and simplest steps so that you can follow along and then explain, later how things work together, as usual.

https://medium.com/swlh/deploying-micro-frontends-to-aws-step-by-step-using-react-webpack-5-and-module-federation-3f97f6f1658c