플러그인 구조
레거시 문서
출처: 문서
본문
레거시 문서
이 페이지는 이전 프론트엔드 시스템용 플러그인의 구조를 설명해요. 새 프론트엔드 시스템은 Building Frontend Plugins를 참고하세요. 일반적인 폴더 구조는 비슷하지만, plugin.ts의 플러그인 배선은 상당히 다르게요.
좋아요, 새 플러그인이 생겼네요! 곧 그것을 훌륭한 일을 하도록 발전시키는 방법을 보게 될 거예요. 하지만 먼저 기본 제공되는 것을 살펴보겠어요.
폴더 구조
새 플러그인은 이렇게 보여야 해요.
new-plugin/ dev/ index.ts node_modules/ src/ components/ ExampleComponent/ ExampleComponent.test.tsx ExampleComponent.tsx index.ts ExampleFetchComponent/ ExampleFetchComponent.test.tsx ExampleFetchComponent.tsx index.ts index.ts plugin.test.ts plugin.ts routes.ts setupTests.ts .eslintrc.js package.json README.md
한두 가지를 눈치챘을 거예요. 그렇습니다, 플러그인은 package.json과 src 폴더가 있는 미니 프로젝트처럼 보여요. 플러그인을 별도 패키지로 만들고 싶기 때문이에요. 이렇게 하면 npm에 플러그인을 배포할 수 있고, 잠재적으로 큰 Backstage 앱에서 다른 모든 플러그인을 로드하지 않고도 플러그인을 격리해 작업할 수 있어요.
index.ts 파일은 특정 파일이 아니라 폴더 경로에서 import할 수 있게 해줘요. 폴더마다 한 파일에서 export를 제어하는 방법이에요.
기본 파일
플러그인에 대한 정보를 채울 readme와 플러그인 의존성, 메타데이터, 스크립트를 선언할 package.json을 받아요.
플러그인 파일
src 폴더에서 흥미로운 부분으로 갑니다. plugin.ts를 확인하세요.
import { createPlugin, createRoutableExtension,} from '@backstage/core-plugin-api';import { rootRouteRef } from './routes';export const examplePlugin = createPlugin({ id: 'example', routes: { root: rootRouteRef, },});export const ExamplePage = examplePlugin.provide( createRoutableExtension({ name: 'ExamplePage', component: () => import('./components/ExampleComponent').then(m => m.ExampleComponent), mountPoint: rootRouteRef, }),);
이것이 플러그인이 생성되고, 앱에서 import하고 사용할 수 있는 확장을 만들고 내보내는 곳이에요. createPlugin에 대한 참조 문서나 새 Composability System 소개를 참고하세요.
컴포넌트
생성된 플러그인에는 우리가 플러그인을 어떻게 구조화하는지 보여 주는 두 개의 예시 컴포넌트가 포함돼요. 보통 하나 또는 여러 개의 페이지 컴포넌트가 있고, 옆에 원하는 만큼 많은 컴포넌트로 UI를 나눌 수 있어요.
ExampleComponent는 예시 Backstage 페이지 컴포넌트를 보여 줘요. ExampleFetchComponent는 공개 API에 비동기 요청을 하고 응답 데이터를 Material UI 컴포넌트로 테이블에 그리는 일반적인 작업을 보여 줘요.
이 컴포넌트들은 수정하거나, 이름을 바꾸거나, 완전히 교체할 수 있어요.
플러그인을 Backstage 앱에 연결
Backstage 앱이 플러그인을 사용하기 시작하려면 두 가지가 필요해요.
app/package.json에 플러그인을 의존성으로 추가- 예를 들어
app/src/App.tsx에서 하나 이상의 플러그인 확장을 import하고 사용
다행히도 Backstage CLI로 플러그인을 만들면 이 두 단계가 모두 자동으로 일어나요.
외부 세계와 소통
플러그인이 Backstage 환경 밖의 서비스와 통신해야 한다면 아마 CORS 정책 및/또는 백엔드 측 인가 같은 문제에 직면할 거예요. 이 과정을 부드럽게 하려면 프록시를 사용할 수 있어요 — 이미 가진 것(Nginx, HAProxy 등)이나 Backstage 백엔드를 위해 우리가 제공하는 proxy-backend 플러그인 중 하나요. 더 읽기