React Js로 Micro Frontend 애플리케이션 설정

이 기사에서는 모듈 연합을 설정하기 위한 부트스트랩 도구인 잘 알려진 CLI 도구 "create-mf-app"를 사용하여 마이크로 프런트엔드 애플리케이션을 설정할 것입니다.

마이크로 프론트엔드란?🤨

마이크로 프런트엔드 설계는 프런트 엔드 애플리케이션을 느슨하게 함께 작동하는 작은 반독립적인 "마이크로앱"으로 분해합니다. 이는 복잡한 프로젝트 관리에 도움이 될 수 있습니다.

프로젝트 설정

이제 우리는 2개의 마이크로 프런트엔드와 모든 마이크로 프런트엔드 앱을 담을 하나의 컨테이너 앱을 포함하는 프로젝트를 설정할 것입니다.
이 기사에서는 React js에서만 프로젝트를 설정하는 데 중점을 두지만 여러 프레임워크를 가질 수 있습니다.

프로젝트를 설정할 cmd/터미널을 열고 아래 명령을 입력합니다.

npx create-mf-app

create-mf-app이 이미 설치되어 있는 경우 애플리케이션 이름을 직접 묻는 메시지가 표시되고 그렇지 않은 경우 'y'를 입력하기만 하면 설치하라는 메시지가 표시됩니다. 그러면 자동으로 설치됩니다.

create-mf-app이 설치되면 다음 정보를 묻습니다.



Shell 앱을 만들고 애플리케이션을 실행하기 위해 포트 3000을 지정했습니다.

이름이 'common-components-lib'인 또 다른 마이크로 앱을 만들 수 있습니다.
위와 동일한 단계를 따르지만 포트와 이름만 다릅니다.



Shell 앱을 만들고 애플리케이션을 실행하기 위해 포트 3000을 지정했습니다.

이제 각 앱 내부로 이동하고 아래 명령을 입력하여 앱을 빌드하고 실행해야 합니다.npm install && npm start
두 개의 다른 cmd/터미널에서 이 두 개의 앱을 여는 것이 좋습니다.



common-components-lib 앱을 만들고 애플리케이션을 실행하기 위해 포트 3001을 지정했습니다.

이 2개의 앱을 만드는 기본 아이디어는 Shell이 ​​모든 마이크로 앱의 컨테이너가 되고 common-components-lib에 머리글, 바닥글 등과 같은 공통 구성 요소가 포함된다는 것입니다.

이제 코드 편집기에서 폴더를 엽니다. 내가 가장 좋아하는 편집기는 Visual Studio Code❤이지만 원하는 코드 편집기를 사용할 수 있습니다.

열면 폴더 구조는 다음과 같습니다.



참고: 두 앱이 서로 다른 포트에서 실행 중인지 확인하십시오.

마이크로 앱 내부 구성 요소 만들기

이제 common-components-lib 앱 내에 하나의 머리글 및 바닥글 구성 요소를 추가할 수 있습니다.

헤더 구성 요소를 만들고 코드 아래에 붙여 넣습니다.

import React from 'react';
import './header.css';

function Header() {
  return (
    <div class="header">
      <a href="#default" class="logo">
        Header Component
      </a>
      <div class="header-right">
        <a class="active" href="#home">
          Home
        </a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
      </div>
    </div>
  );
}

export default Header;

구성 요소의 스타일을 지정하기 위해 하나의 header.css 파일도 추가합니다.

.header {
    overflow: hidden;
    background-color: #f1f1f1;
    padding: 20px 10px;
}

.header a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    line-height: 25px;
    border-radius: 4px;
}

.header a.logo {
    font-size: 25px;
    font-weight: bold;
}

.header a:hover {
    background-color: #ddd;
    color: black;
}

.header a.active {
    background-color: dodgerblue;
    color: white;
}

.header-right {
    float: right;
}

@media screen and (max-width: 500px) {
    .header a {
        float: none;
        display: block;
        text-align: left;
    }

    .header-right {
        float: none;
    }
}

바닥글 구성 요소 및 header.css 추가

import React from 'react';
import './footer.css';

function Footer() {
  return (
    <div class="footer">
      <p>Footer Component</p>
    </div>
  );
}

export default Footer;

바닥글 추가

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #f1f1f1;
    color: black;
    text-align: center;
}

앱 구성 요소에서 머리글 및 바닥글 구성 요소를 가져옵니다.

import React from 'react';
import ReactDOM from 'react-dom';
import Footer from './Footer';
import Header from './Header';

import './index.css';

const App = () => (
  <>
    <Header />
    <Footer />
  </>
);
ReactDOM.render(<App />, document.getElementById('app'));

머리글과 바닥글을 추가하면 앱이 다음과 같이 표시됩니다.

구성 요소를 리모컨에 노출

이제 Shell 앱에서 사용할 수 있도록 이 두 구성 요소를 노출해 보겠습니다.

common-components-lib의 webpack.config.js를 열고 다음과 같이 플러그인 내부의 코드를 업데이트합니다.

new ModuleFederationPlugin({
      name: 'common_components_lib',
      filename: 'remoteEntry.js',
      remotes: {},
      exposes: {
        './Header': './src/Header.jsx',
        './Footer': './src/Footer.jsx',
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        'react-dom': {
          singleton: true,
          requiredVersion: deps['react-dom'],
        },
      },
    }),

참고: "노출"만 업데이트했습니다.

Shell 앱에서 구성 요소를 사용합니다.

이제 Shell 앱의 webpack.config.js를 열고 플러그인 내부의 코드를 업데이트합니다.

const HtmlWebPackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

const deps = require('./package.json').dependencies;
module.exports = {
  output: {
    publicPath: 'http://localhost:3000/',
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
  },

  devServer: {
    port: 3000,
    historyApiFallback: true,
  },

  module: {
    rules: [
      {
        test: /\.m?js/,
        type: 'javascript/auto',
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\.(css|s[ac]ss)$/i,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },

  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      filename: 'remoteEntry.js',
      remotes: {
        common_components_lib:
          'common_components_lib@http://localhost:3001/remoteEntry.js',
      },
      exposes: {},
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        'react-dom': {
          singleton: true,
          requiredVersion: deps['react-dom'],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: './src/index.html',
    }),
  ],
};

참고: 원격만 업데이트했습니다.

Make sure you use same name as the app name inside the plugin.
In our case app name is "common_components_lib" and "shell"

Shell App에서 원격(마이크로 앱의 구성 요소) 렌더링

이제 Shell 애플리케이션에서 원격 구성 요소를 실제로 가져와 애플리케이션을 테스트할 시간입니다.

App.jsx 내에서 common-components-lib 앱의 머리글 및 바닥글 구성 요소를 가져옵니다.

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';

const Header = React.lazy(() => import('common_components_lib/Header'));
const Footer = React.lazy(() => import('common_components_lib/Footer'));

import './index.css';

const App = () => (
  <>
    <Suspense fallback={<>Loading...</>}>
      <Header />
      <Footer />
    </Suspense>
  </>
);
ReactDOM.render(<App />, document.getElementById('app'));

참고: Lazy Loading을 사용하여 원격 구성 요소를 가져왔습니다. 지연 로딩에 대한 자세한 내용은 here의 공식 문서를 참조하세요.

Shell 앱을 실행할 시간입니다.

webpack.config.js에서 변경한 대로 두 애플리케이션을 모두 다시 시작합니다.

두 앱이 모두 다시 시작되면 Shell 앱에 머리글과 바닥글이 표시되는지 확인합니다.

예!!😍

결론

이 기사는 마이크로 프런트엔드 애플리케이션의 설정에 초점을 맞추고 있으며 이를 성공적으로 구성했습니다.

Please do share your feedback and experiences with Micro Frontend in the comments section below. I’d love to see what you come up with!

이 기사가 유용했다면 친구 및 동료와 공유하십시오!❤️

Dev.To에서 더 많은 기사 보기 ➡️

팔로우 ⤵️
🌐
🌐 Github