플러그인 만들기
레거시 문서
출처: 문서
본문
레거시 문서
이 섹션은 레거시 플러그인 문서의 일부예요. 새 개발에 대해서는 새 프론트엔드 시스템과 새 백엔드 시스템 문서를 참고하세요.
이 페이지는 Backstage에서 처음부터 플러그인을 만드는 과정을 설명해요.
플러그인 만들기
Backstage 저장소 루트에서 다음을 실행하고 plugin을 선택하세요.
yarn new
플러그인 이름을 제공하라는 요청을 받을 거예요. 이것은 NPM 패키지 이름의 일부가 될 식별자이므로 짧게, 소문자만 사용하고 대시로 구분해야 해요. 예를 들어 Carmen이라는 시스템과의 통합을 추가하는 패키지라면 carmen이 될 수 있어요. 그러면 전체 NPM 패키지 이름은 new 명령에 전달하는 다른 플래그와 루트 package.json의 new 명령 설정에 따라 @internal/plugin-carmen 같은 형태가 될 거예요.
플러그인을 만드는 데는 시간이 조금 걸리므로 인내심을 갖으세요. 초기 설치와 빌드 명령을 유용하게 실행해 주므로 패키지가 바로 해킹할 준비가 될 거예요! plugins 디렉터리의 새 폴더에 위치할 거예요. 이 예시에서는 plugins/carmen이에요.
플러그인 개발
갓 생성된 프론트엔드 플러그인은 앱의 /carmen 라우트에 마운트된 페이지 하나와 함께 제공돼요. plugins/carmen/src/plugin.ts에 플러그인 인스턴스가 있고, plugins/carmen/src/components/에 컴포넌트가 있어요. 라우트는 plugins/carmen/src/routes.ts에 정의돼요.
Backstage에 플러그인을 추가하려면 packages/app 디렉터리에 플러그인 패키지를 추가해야 해요.
Backstage 루트 디렉터리에서
yarn --cwd packages/app add @internal/plugin-carmen
그런 다음 packages/app/src/App.tsx에서 등록하세요.
const routes = ( <FlatRoutes> {/* ... */} <Route path="/carmen" element={<CarmenPage />} /> {/* ... */} </FlatRoutes>);