프론트엔드 스터디

Single SPA 프레임 워크를 사용하여 마이크로 프런트 엔드 구축

옹재 2021. 5. 17. 14:45
728x90
반응형

Single-SPA 프레임 워크를 사용하여 마이크로 프런트 엔드 구축

현대의 웹 애플리케이션들은 시간이 지날수록 복잡해지고 있습니다. 이로인해 품질 저하없이 소프트웨어를 빠르게 출시하는 것은 어렵습니다.

위의 해결책으로, Micro Frontends는 독립적으로 프론트엔드의 조각을 만들고, 테스트하고, 배포하는 것을 목표로하여 등장하였습니다.

이 기사에서는 싱글 SPA를 사용하여 마이크로 프론트 엔드 앱을 개발하는 단계를 보여드리겠습니다.

Introduction to Single-SPA

"Single-SPA는 여러 개의 JavaScript Microfrontend를 하나의 프런트엔드 애플리케이션에서 독립적으로 구축, 테스트 및 배치하기 위한 JavaScript 프레임워크입니다.

Single-SPA는 크게 두 부분으로 구성됩니다.

The Container App - single-SPA-root-config

  • 컨테이너 앱은 HTML 페이지와 해당 애플리케이션(두 번째 부분)의 JavaScript를 렌더링하는 역할을 합니다.

Applications

  • Single-SPA 애플리케이션은 모듈로 패키징되고 컨테이너 앱과 결합됩니다. 이러한 애플리케이션들은 React, Angular, Vue, Ember, 등과 같은 다른 프레임워크와 라이브러리를 기반으로 구축될 수 있습니다. 그러나 각 응용 프로그램은 DOM에서 마운트 및 언마운트하는 방법을 알고 있어야 합니다.

Architecture

Runtime MFs vs Build-time MFs

데모 앱에는 앱 헤더, 홈 페이지 및 테스트 페이지의 세 가지 마이크로 프런트 엔드가 있습니다. 세 개의 마이크로 프런트 엔드 모두 독립적 리액트 애플리케이션입니다.

Single SPA 프레임워크를 사용하면 런타임에 이러한 Micro frontends를 구성할 수 있는 컨테이너 역할을 합니다.

Step 01: Creating the Root Configuration Application

먼저 다음을 사용하여 루트 구성 응용 프로그램을 설정해야 합니다. single-SPA에서 제공하는 create-single-SPA CLI 도구입니다.

npm install -g create-single-spa
yarn global add create-single-spa

그러나 create-single-spa를 전체적으로 설치할 필요는 없습니다.

그런 다음 명령을 사용하여 루트 구성 앱을 생성하십시오.

//create a directory for the App
mkdir single-spa-example-root-config
cd single-spa-demo-root-config
​
//initializing the single-SPA
npx create-single-spa

이러한 명령을 실행한 후에는 Single-SPA를 루트 구성 애플리케이션으로 구성해야 합니다. 따라서 다음과 같이 지정된 옵션을 선택할 수 있습니다.

  • 새 프로젝트의 디렉터리를 현재 디렉터리로 유지합니다.
  • 생성할 유형의 Single-SPA 루프 구성(세 가지 옵션 중 표시된 것)을 선택하십시오.
  • 패키지 관리자(yarn 또는 npm)를 선택하십시오.
  • 프로젝트언어(javascript 또는 typescript)를 선택하십시오.
  • Layout Engine을 사용할 것인지 선택하십시오.
  • Orgnazation name을 지정할 수 있습니다.

  • example-root-config.js:응용 프로그램에서 사용하는 모든 Microfrontends를 등록하는 데 사용되는 파일입니다.
  • Index.ejs: 컴파일 후 Index.html 파일로 사용할 he 파일입니다. 이 파일에는 여러 응용 프로그램, 내비게이션 코드 등에서 사용할 수 있는 공통 모듈이 보관됩니다.

npm start를 실행하면 앱이 브라우저 포트 9000에서 로컬에서 시작합니다.

Step 02: Registering Three Applications

참고: Organization 이름은 root-config 앱 구성에 사용되는 이름과 같아야 합니다.

헤더, 홈 및 테스트 페이지를 위한 03개의 새 폴더를 생성하고 각각에 대해 세 개의 리액트 Single-SPA 애플리케이션을 초기화합니다.

Microfrontends APP의 최종 파일 구조를 아래에서 볼 수 있습니다.

3개의 APP들은 3개의 독립적인 포트에 실행할 수 있습니다.

yarn start --port 9001
yarn start --port 9002
yarn start --port 9003

Step 03: Configuring the Root App — Add Shared Dependencies

각 애플리케이션에서 사용하는 Dependency 등록을 위해 브라우저에서 루트 구성 앱으로 이동하여 아래 두 줄의 코드를 찾아 루트 구성 프로젝트의 index.ejs 파일에 있는 systemjs-import map에 추가합니다.

"react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js",
"vue": "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js",
"vue-router": "https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js"

Step 04: Register Applications

먼저 Microfrontend APP 중 하나로 이동합니다. 여기, 제 spa-demo-header를 첫 번째 APP로 하겠습니다. 그런 다음 패키지를 찾습니다.json 파일 및 프로젝트 이름을 찾아서 복사합니다. (내 이름은 @charuka95/spa-demo-home)

root-config App으로 돌아가서 @positionion_name-root-config.js 파일(Mineischaruka95-root-config.js)을 찾은 다음 registerApplication() 기능을 복사하여 파일에 붙여넣습니다.

registerApplication({
   name: “@charuka95/spa-demo-home”,
   app: () => System.import(“@charuka95/spa-demo-home”),
   activeWhen: [“/”]
});

registerApplication() 함수는 마이크로 프론트엔드 앱을 Single-SPA에 등록하는 기능을 담당합니다.

  • name : @organization/project 포맷을 가진 프로젝트 식별자
  • app : root-config app에 가져오는 걸 도와주는 앱을 호출하는 SystemJS import call입니다.
  • activeWhen : Single-SPA 응용 프로그램을 활성화 또는 비활성화해야 하는 시기를 관리합니다.

Step 05: Add the Single-SPA Application into the Import Map

마지막으로 root-config 앱에서 index.ejs 파일을 다시 찾고 등록된 Microfrontend App을 root-config App의 import map에 추가합니다.

“@charuka95/root-config”:“//localhost:9000/charuka95-root-config.js”

그 후에는 다른 모든 Microfrontend 애플리케이션에 대해 04단계와 05단계를 따라야 합니다.

 

Reference

https://blog.bitsrc.io/building-microfrontends-using-single-spa-framework-94019ca2fb4d

728x90
반응형