Open Microfrontends: Microfrontend를 위한 OpenAPI 스타일 표준 ("Open Microfrontends" Getting Started & Implementation Hints 요약)

Open Microfrontends는 Microfrontend 세계의 OpenAPI다. 자산, 설정, 메시지, API 프록시, 권한까지 하나의 스펙으로 정의해 타입 안전한 통합과 배포를 표준화한다.

---

1. Open Microfrontends란 무엇인가

• Microfrontend를 Microservice처럼 기술하기 위한 공식 스펙

• 역할: OpenAPI가 Microservice에 하는 역할을, Microfrontend에 대해 수행

• 하나의 Description(명세) 파일로 다음을 선언:

  • 메타데이터
  • 에셋(JS/CSS 번들, 모듈 시스템, 경로)
  • 설정 스키마(config schema + default)
  • 메시지 스키마(pub/sub)
  • API 프록시 정의
  • 보안 스킴/권한 모델(user permissions)

핵심 목표:

Microfrontend “개발”과 “호스트 앱 통합”을 분리하고,
서버가 노출하는 Microfrontend를 다른 애플리케이션에서 표준화된 방식으로 소비하게 만드는 것.

---

2. Description: Microfrontend의 계약(Contract)

2-1. 구조 개요

YAML/JSON으로 작성:

$schema: 'https://open-microfrontends.org/schemas/1-0-0.json'
openMicrofrontends: 1.0.0

servers:
  - url: 'http://localhost:7890'
    description: Local Test Server

microfrontends:
  - name: My First Microfrontend
    assets:
      basePath: /public
      js:
        moduleSystem: ESM
        initial:
          - Microfrontend.js
    rendererFunctionName: startMyFirstMicrofrontend
    config:
      schema: ...
      default: ...
    messages:
      ping:
        publish: true
        subscribe: true
        schema: ...

여기서 Description이 정의하는 것:

1. 에셋(assets)

   • JS 모듈 시스템(ESM/SystemJS 등)
   • 초기 로드 엔트리(initial)
   • basePath / buildManifestPath 등

2. 설정(config)

   • JSON Schema 기반의 schema
   • default 값
     → Host가 타입 안전하게 초기 설정 주입 가능

3. 메시지(messages)

   • 채널 이름별 publish / subscribe 가능 여부
   • 메시지 페이로드의 JSON Schema
     → 전역 message bus 위의 타입 안전한 Pub/Sub

4. (확장) userPermissions / apiProxies / securitySchemes

   • 어떤 권한이 필요한지
   • 어떤 API가 프록시되어야 하는지
   • 어떤 보안 헤더/토큰이 필요한지

즉 Description은 Microfrontend가 “무엇을 필요로 하고, 무엇을 제공하는지”를 모두 문서화하는 계약 객체다.

---

3. Generator가 만들어주는 것: 타입 세이프 코드

Description만 쓰고 나면, OpenMicrofrontends Generator가 다음을 생성:

1. Renderer 인터페이스 (각 Microfrontend 쪽)
2. Starter 함수 (Host 애플리케이션에서 호출)
3. 필요하다면 Host Backend Integration 코드 (API 프록시, 권한, 보안 등)

3-1. Renderer 구현 예시

import {
  MyFirstMicrofrontendRenderer,
  MyFirstMicrofrontendRendererFunctionName,
} from './_generated/microfrontendsRenderers';

const renderer: MyFirstMicrofrontendRenderer = async (host, context) => {
  const { config, messageBus } = context;

  host.innerHTML = `
    <div>
      <h2>${config.welcomeMessage}</h2>
    </div>
  `;

  const onPing = () => { /* ... */ };

  // 타입 안전한 메시지 구독
  messageBus.subscribe('ping', onPing);

  return {
    onRemove: () => {
      host.innerHTML = '';
      messageBus.unsubscribe('ping', onPing);
    },
  };
};

// 번들 방식에 따라 export 또는 window 할당
export default {
  [MyFirstMicrofrontendRendererFunctionName]: renderer,
};

특징:

• context.config가 JSON Schema 기반으로 바로 타입이 붙은 상태로 제공.
• messageBus.subscribe('ping', ...)는 Description의 messages.ping.schema와 연결되어 타입 안전.

3-2. Starter: Host에서 Microfrontend 부팅

import { startMyFirstMicrofrontend } from './_generated/microfrontendStarters';

const hostElement = document.getElementById('root')!;

const { close, messages } = await startMyFirstMicrofrontend(
  'https://my-microfrontend-server.com',
  hostElement,
  {
    id: '1',
    config: {
      welcomeMessage: 'Microfrontend Demo!',
    },
    messageBus: globalMessageBus,
  },
);

// 타입 안전한 메시지 발행
messages.publish('ping', { ping: true });

Host 개발자는:

• 서버 URL
• host 엘리먼트
• config
• messageBus
  만 넘기면 된다. 렌더링·메시지 타입·수명 주기(onRemove)는 모두 Generator가 정의한 인터페이스로 통제된다.

---

4. Host Backend Integration: API 프록시·보안·권한

더 복잡한 Description 예시:

• securitySchemes (예: ApiKeyAuth)
• userPermissions (권한 목록 + Fetch 경로)
• apiProxies (BFF, 외부 서비스 등)

Generator는 이에 맞춰:

• Host 서버(Express 등)에서 쓸 기반 설정 인터페이스와
• 미들웨어 함수를 생성.

4-1. Host 설정 클래스 구현

import { MySecondMicrofrontendBaseSetup } from './_generated/microfrontendHostIntegrations';

export default class MySecondMicrofrontendBaseSetupImpl
  implements MySecondMicrofrontendBaseSetup {

  get microfrontendBaseUrl() {
    return 'http://second-microfrontend...:8080';
  }

  async getUser(req) {
    // 인증/세션에서 유저 로딩
    return null;
  }

  async apiProxyRequestBffGetSecurityHeaders(req) {
    return { 'x-api-key': '123456' };
  }

  get apiProxySomeExternalApiUrl() {
    return 'http://my-service...:8080';
  }

  async userPermissionsRequestGetSecurityHeaders(req) {
    return { 'x-api-key': '123456' };
  }
}

4-2. Express 통합

import { mySecondMicrofrontendHostIntegrationMiddleware }
  from './_generated/microfrontendHostIntegrations';

app.use(
  mySecondMicrofrontendHostIntegrationMiddleware(
    new MySecondMicrofrontendBaseSetupImpl(),
  ),
);

이렇게 하면:

• BFF/외부 API 프록시 경로
• 보안 헤더 삽입
• 유저 권한 조회
  등이 스펙 기반으로 자동 연결된다.

Microfrontend 내부에서는:

const renderer: MySecondMicrofrontendRenderer = async (host, context) => {
  const { config, apiProxyPaths, permissions } = context;

  const canDelete = permissions.deleteCustomer; // boolean

  const response = await fetch(
    `${apiProxyPaths.bff}/customers/${config.customerId}`,
  );
};

→ apiProxyPaths / permissions도 Description 기반 타입이 붙어 있다.

---

5. 왜 중요한가: Microfrontend를 Microservice처럼 다루기

Open Microfrontends의 의미:

1. 계약 우선(Contract-first) 개발

   • Microfrontend를 “하나의 서비스”처럼 정의
   • Host와 Microfrontend가 느슨하게 결합

2. TypeScript 기반 타입 안전성

   • Description → 코드 제너레이션 → Renderer/Starter/Host Integration 모두 같은 타입 공유

3. 조직·플랫폼 관점의 이점

   • “어떤 Microfrontend가 어떤 API·권한·설정을 요구하는지”를 중앙에서 관리
   • 팀 간 인터페이스 정의·검증이 명시적이고 자동화 가능

4. 새로운 패러다임

   • Microfrontend를 단순한 FE 위젯이 아니라,
     “프론트엔드 Microservice”로 다루는 관점 제시

요약하면, Open Microfrontends는:

Microfrontend 세계의 OpenAPI

• TypeScript 기반 타입 안전 코드 생성기
• Host/FE 통합을 표준화하는 계약 시스템

을 한 번에 제공하는 스펙이다.

---

원문 - Open Microfrontends