내보내기 클래스 MicroFrontendRegistry

DDG 예에서 MicroFrontendRegistry.call()에 대한 호출에는 실제로 DDG 엔드포인트가 성공적으로 적중되었는지 확인하는 많은 ~마술~이 있습니다. 그럼 마법을 조금 해제해 봅시다.

추상화 구축 방법 결정

우리는 웹 구성 요소와 프런트엔드 브릭에 대한 레지스트리를 가능하게 하는 window.customElements 전역으로 많은 작업을 하기 때문에 마이크로 서비스 엔드포인트에 대한 병렬 개념을 구축할 때 약간 미러링하기로 결정했습니다.

source for MFR

defining services

npm

MicroFrontendRegistry는 주로 다음으로 구성됩니다.

선언한 시기에 관계없이 하나의 레지스트리만 존재하도록 싱글톤 인터페이스 제공

DOM 또는 직접 창 액세스를 통해 쿼리 가능하게 만들기(개인 취향, 저는 항상 싱글톤을 이런 식으로 작성합니다)

set/add - 활용할 수 있는 새로운 서비스

has - 호출하지 않고 서비스가 유효한지 확인

call - 서비스에 대한 요청 실행

url - 서비스에 대한 URL 생성(src 구축에 유용)

서비스의 정의

나는 항상 다양한 맥락에서 최대한의 재사용을 선택하려고 노력하고 있기 때문입니다. 나는 이것이 내가 이 마이크로서비스를 사용하는 유일한 프로젝트라고 생각하지 않았습니다. 또한 이러한 서비스가 충돌하지 않거나 항상 @core/whatever를 서비스로 갖고 싶어할 것이라고 가정하고 싶지 않습니다. 프로젝트.

결과적으로 단일 호출을 통해 정의할 수 있는 서비스 청크로 그룹화된 서비스가 있습니다. 지금 우리는 그것들을 활용하기 위한 지름길로 쉽게 포함될 수 있는 세 개의 그룹이 있습니다.

import { enableServices } from '@lrnwebcomponents/micro-frontend-registry/lib/microServices.js';
// then enable the service groups in question
enableServices(['core', 'experimental', 'haxcms']);

핵심 - 공통/예상/단순 서비스

실험적 - 가지고 놀기 위한 것/향후 고려 사항

haxcms - haxcms에 대한 응용 프로그램별 항목

다시 말하지만, 이것들은 전체 서비스를 신속하게 추가할 것입니다. 그러나 미들웨어 클래스가 무엇을 호출해야 하고 어디에 있는지 어떻게 알았는지에 대한 덕덕고 예제로 돌아가 봅시다.

DDG 마이크로서비스 등록

// duckDuckGo
  MicroFrontendRegistry.add(
    {
      endpoint: '/api/services/website/duckDuckGo',
      name: '@core/duckDuckGo',
      title: 'Duck Duck Go',
      description: 'Search results from duck duck go',
      params: {
        q: "query param to search on"
      }
    }
  );

여기에 엔드포인트와 이름이 있음을 알 수 있습니다. 제목, 설명 및 매개변수는 개발자가 이 정보를 시각화하기로 결정한 경우 대부분 알 수 있습니다. DDG의 경우 쿼리 매개변수q를 전달하면 이 엔드포인트가 호출되고 결과 블롭json이 반환됩니다. 이름에 대한 끝점의 간단한 연결을 통해 필요한 경우 나중에 끝점 이름을 교체하고 이동할 수 있습니다.

음... 언제 필요한가요?

당신이 물어봐야 재미있다! DDG 이후의 다음 정의는 다음과 같습니다.

  // screenshot - kept by itself bc of size of getBrowserInstance
  MicroFrontendRegistry.add({
    endpoint: "https://screenshoturl.elmsln.vercel.app/api/screenshotUrl",
    name: "@core/screenshotUrl",
    title: "Screenshot page",
    description: "Takes screenshot of a URL and returns image",
    params: {
      urlToCapture: "full url with https",
      quality: "Optional image quality parameter"
    }
  });

😺 - vercel에서 로컬로 스크린샷 서비스를 구축하고 있습니다.
😖 - 부르려고 노력하는 프로덕션의 나

이 경우의 이유는 우리screenshotUrl가 Chrome 및 기타 브라우저를 헤드리스로 실행하기 위해 놀랍지만 무거운(파일 용량) 라이브러리를 활용하기 때문입니다puppeteer. AWS 람다(Vercel이 기반으로 하는)의 제한으로 인해 우리의 모노 리포지토리는 퍼핏티어를 다른 모든 항목과 함께 실행할 수 없었습니다.

결과적으로 이 기능을 자체 리포지토리로 푸시할 때 경로를 변경해야 했습니다(따라서 독립적으로 빌드하고 파일 크기 제한 없이 작동할 수 있습니다!). 이렇게 변경하기 위해 원본endpoint: "/api/media/web/screenshot", for the full URL to the production path. All the places we were calling을 교체했습니다./screenshotUrl`은 그래도 변경되지 않았습니다!

이름 지정을 위한 npm -esk 방법론을 따르면 미래에 이를 호출하는 방법을 확장할 수 있습니다. 미래.

이사를 하는 다른 이유는 그다지 흥미롭지 않습니다. 이름 바꾸기, 리팩토링 등과 같은

이 세 기사를 요약한 동영상 시간

다음은 DDG가 종단 간 작동하도록 코드 및 호출 구조를 단계별로 설명하는 비디오입니다.