DR: 단일 스파를 사용하여 마이크로 프런트엔드를 구축하면 대규모 앱을 작고 독립적인 조각으로 쉽게 분할할 수 있으므로 여러 팀이 다른 팀에 영향을 주지 않고 부분적으로 작업할 수 있습니다. 이 블로그에서는 Angular 및 React 마이크로 프런트엔드를 생성하고 이를 루트 구성에 연결하고 배포하는 방법을 보여줍니다.

마이크로 프런트엔드는 특히 여러 팀이 사용자 인터페이스의 서로 다른 부분을 작업할 때 프런트엔드 앱을 확장하는 데 널리 사용되는 아키텍처 스타일이 되었습니다. 모놀리식 프런트엔드를 더 작고 독립적인 모듈로 분할함으로써 팀은 앱의 일부를 개별적으로 배포, 업데이트 및 확장할 수 있습니다. 이 문서에서는 단일 스파를 사용하여 다양한 프레임워크의 마이크로 프런트엔드를 만들고 연결하는 방법에 대해 설명합니다.

싱글스파 소개

Single-spa는 마이크로 프론트엔드 아키텍처용으로 설계된 JavaScript 기반 프레임워크입니다. Angular, React 및 Vue와 같은 프레임워크를 사용하여 마이크로 프런트엔드를 구축하고 이를 단일 앱으로 제공할 수 있습니다. 연결된 앱의 등록을 유지하고 경로를 사용하여 사용자를 다른 앱으로 리디렉션합니다.

단일 SPA 프레임워크를 사용하면 앱의 다양한 부분에 대해 다양한 언어 선택, 마이크로 프런트엔드의 독립적인 개발 및 배포, 확장성 등 많은 이점이 있습니다. 그럼 이제 싱글 스파 만들기를 시작해 보겠습니다.

단일 스파 만들기

전제 조건

싱글 스파를 구현하려면 Node.js와 npm를 설치하는 것이 중요합니다. 설치하려면 Node.js 웹사이트로 이동하여 운영 체제에 맞는 최신 버전을 다운로드하세요. 설치 프로그램을 실행하여 설치를 완료하세요.

그런 다음 명령 프롬프트에서 다음 명령을 실행하여 node.js 및 npm 설치를 확인합니다.

npm - version
node - version

1단계: 프로젝트 설정

이 예에서는 Angular와 React를 사용하여 두 개의 간단한 마이크로 프런트엔드를 생성합니다. 루트 구성은 두 개의 마이크로 프런트엔드를 제공합니다.

앱 만들기

다음 명령을 실행하여 간단한 Angular 마이크로 프런트엔드 앱을 만들 수 있습니다.

ng new angular-spa-frontend

프로젝트가 생성되면 다음 명령을 실행하여 단일 스파 라이브러리를 설치합니다.

ng add single-spa-angular

라이브러리가 제대로 설치되면 싱글 스파와 관련된 모든 구성이 포함된 main.single-spa.ts라는 파일이 Angular 프로젝트에 생성됩니다.

구성코드를 참고하세요.

if (environment.production) {
 enableProdMode();
}

const lifecycles = singleSpaAngular({
 bootstrapFunction: (singleSpaProps) => {
  singleSpaPropsSubject.next(singleSpaProps);

  const extraProviders = [
   ...getSingleSpaExtraProviders(),
   { provide: APP_BASE_HREF, useValue: '/' }
  ];

  return platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
 },
 template: '',
 Router,
 NavigationStart,
 NgZone,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

싱글 스파로 작동하려면 APP_BASE_HREF 값을 제공해야 합니다.

또한 단일 스파 라이브러리를 추가하면 package.json에 두 개의 추가 스크립트가 포함됩니다.

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "build:single-spa:angular-spa-frontend": "ng build angular-spa-frontend --prod",
  "serve:single-spa:angular-spa-frontend": "ng s --project angular-spa-frontend --disable-host-check --port 4200 --live-reload false"
 }

angular.json 파일은 다음 구성을 사용하여 수정됩니다.

"build": {
   "builder": "@angular-builders/custom-webpack:browser",
   "options": {
      "outputPath": "dist/angular-spa-frontend",
      "index": "src/index.html",
      "main": "src/main.single-spa.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "inlineStyleLanguage": "scss",
      "assets": [
       "src/favicon.ico",
       "src/assets"
      ],
      "styles": [
       "src/styles.scss"
      ],
      "scripts": [],
      "customWebpackConfig": {
       "path": "extra-webpack.config.js",
       "libraryName": "angular-spa-frontend",
       "libraryTarget": "umd"
      },
      "deployUrl": "http://localhost:4200/"
     },

}

“main”: “src/main.ts”는 “main”: “src/main.single-spa.ts”로 대체됩니다. 새로운 빌드 구성이 JavaScript 모듈로 추가됩니다.

구성이 완료되고 확인되면 다음 명령을 사용하여 Angular 앱을 제공할 수 있습니다.

npm run serve:single-spa:angular-spa-frontend

마이크로 프런트엔드 앱을 성공적으로 생성했으므로 이제 root-config를 구현하는 방법을 살펴보겠습니다.

루트 구성

다음 명령을 실행하여 루트 구성을 생성합니다.

npx create-single-spa

이 명령을 입력하면 루트 구성을 생성하기 위한 일련의 구성이 표시됩니다.

이전 구성을 선택한 후 여러 프런트엔드를 제공하기 위한 루트 구성이 생성됩니다.

생성된 마이크로 프런트엔드를 root-config에 연결하려면 root-config.ts 및 index.ejs 파일을 수정해야 합니다.

registerApplication({
 name: "@org/angular-spa-frontend",
 app: () =>
  System.import("@org/angular-spa-frontend")
   .then((module: LifeCycles) => ({
    bootstrap: module.bootstrap,
    mount: module.mount,
    unmount: module.unmount,
   }))
   .catch((error) => {
    console.error("Failed to load micro-frontend:", error);
    return Promise.reject(error);
   }),
  activeWhen: ['/'],
});

start({
 urlRerouteOnly: true,
});

이전 코드 블록에서 언급했듯이 생성된 마이크로 프런트엔드는 root-config.ts 파일로 가져와야 합니다.

name: "@org/angular-spa-frontend",

다음 스크립트를 index.ejs 파일에 추가해야 합니다.

마이크로 프런트엔드( @org/angular-spa-frontend )와 마이크로 프런트엔드( http://localhost:4200/main.js )를 생성했습니다. 프런트엔드가 호스팅되었으므로 가져오기 맵에 추가해야 합니다.

그런 다음 다음 명령을 실행하여 앱을 실행하세요.

npm run start

이러한 단계가 올바르게 수행되었다고 가정하면 다음 이미지와 유사하게 뷰에서 최종 단일 스파를 볼 수 있습니다.

2단계: 프로덕션 환경에 배포

프로덕션에 이러한 마이크로 프런트엔드를 배포하는 경우 각 마이크로 프런트엔드 앱을 독립적인 독립 실행형 앱으로 배포하는 것이 좋습니다. 루트 구성은 아마도 registerApplication.

3단계: 더 많은 마이크로 프런트엔드 추가

마이크로 프런트엔드를 더 추가하려면 앞서 언급한 단계를 반복하세요. React 마이크로 프론트엔드를 동일한 루트 구성에 통합하는 방법을 살펴보겠습니다.

다음 명령을 사용하여 새로운 React 마이크로 프런트엔드를 만듭니다.

npx create-single-spa --module-type react

그런 다음 생성된 프로젝트 내부를 탐색하여 Single-spa-react를 설치합니다.

npm install single-spa-react

앱이 단일 스파와 호환되도록 수명 주기 방법을 내보내도록 항목 파일을 수정합니다.

import React from "react";
import ReactDOM from "react-dom";
import singleSpaReact from "single-spa-react";
import App from "./App";

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  errorBoundary(err, info, props) {
    return 
Error loading React micro-frontend
;
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

구성이 완료되면 다음 명령을 사용하여 React 마이크로 프런트엔드를 제공할 수 있습니다.

npm start

생성된 마이크로 프런트엔드를 기존 root-config와 통합하려면 root-config의 파일에 다음 수정 사항을 구현합니다.

import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@org/angular-spa-frontend",
  app: () =>
    System.import("@org/angular-spa-frontend")
      .then((module) => ({
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      }))
      .catch((error) => {
        console.error("Failed to load Angular micro-frontend:", error);
        return Promise.reject(error);
      }),
  activeWhen: ["/"],
});

registerApplication({
  name: "@org/react-spa-frontend",
  app: () =>
    System.import("@org/react-spa-frontend")
      .then((module) => ({
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      }))
      .catch((error) => {
        console.error("Failed to load React micro-frontend:", error);
        return Promise.reject(error);
      }),
  activeWhen: ["/react"], 
});

start({
  urlRerouteOnly: true,
});

또한 index.ejs 파일을 React 앱의 기본 번들 경로로 업데이트해야 합니다.

GitHub 참조

이 GitHub 데모에서 이 단일 스파 애플리케이션의 전체 코드 예제를 확인하세요.

결론

단일 스파를 사용하여 마이크로 프런트엔드를 구축하면 대규모 앱을 작고 독립적인 조각으로 쉽게 분할할 수 있습니다. 이렇게 하면 여러 팀이 다른 팀에 영향을 주지 않고 각자 맡은 부분을 작업할 수 있으며 Angular나 React와 같이 자신이 선호하는 프레임워크를 사용할 수 있습니다. 이 가이드의 단계에 따라 단일 스파 프로젝트를 설정하고, 여러 마이크로 프런트엔드를 연결하고, 사용자에게 원활한 경험을 제공할 수 있습니다. 단일 스파를 사용하면 시간이 지남에 따라 간단하게 앱을 성장시키고 필요에 따라 새로운 기능을 추가할 수 있습니다.

관련 블로그

• RxJS로 비동기 JavaScript 마스터하기
• Axios와 Fetch API? 올바른 HTTP 클라이언트 선택
• TypeScript 유틸리티 유형: 전체 가이드
• 보안 JWT 저장소: 모범 사례