플러그인으로 앱 구성하기
Backstage 플러그인은 앱을 여러분의 필요에 맞게 커스터마이징해요. CI/CD, 모니터링, 감사 등 많은 공통 인프라 요구사항에 대응하는 플러그인이 이미 준비되어 있어요. 이 글에서는 기존에 만들어진 플러그인을 Backstage 앱에 추가하고 구성하는 방법을 단계별로 설명드릴게요.
출처: 문서
본문
이 문서는 새 Backstage 앱에서 기본값으로 사용되는 새 프론트엔드 시스템을 기준으로 작성되었어요. 만약 Backstage 앱이 아직 이전 프론트엔드 시스템을 사용하고 있다면, 이 가이드의 이전 프론트엔드 시스템 버전을 읽어보세요.
대상 독자: 개발자
Backstage 플러그인은 주로 TypeScript, Node.js, React로 작성돼요. 이 기술들에 대한 이해가 있다면 Backstage를 커스터마이징하는 여정에 큰 도움이 될 거예요.
요약
Backstage 플러그인은 여러분의 필요에 맞게 앱을 커스터마이징해요. CI/CD, 모니터링, 감사 등 많은 공통 인프라 요구사항을 위한 플러그인을 담은 플러그인 디렉터리가 있어요.
기존 플러그인을 앱에 추가하기
다음 단계는 Backstage 앱을 이미 만들었고 여기에 기존 플러그인을 추가하려는 상황을 가정해요.
커뮤니티 플러그인 저장소와 Backstage 플러그인 디렉터리 등에서 Backstage용 훌륭한 플러그인을 많이 찾을 수 있어요.
Backstage 앱에 플러그인을 추가하는 것은 일반적으로 간단한 과정이며, 이상적으로 각 플러그인은 설치 및 구성 방법에 대한 자체 문서를 함께 제공해요. 이 예시에서는 Tech Radar 플러그인을 우리 Backstage 앱에 추가해 볼게요.
1. 플러그인 패키지 설치하기
플러그인의 npm 패키지를 저장소에 추가해요:
Backstage 루트 디렉터리에서
yarn --cwd packages/app add @backstage-community/plugin-tech-radar
플러그인은 루트 package.json이 아니라 app 패키지에 추가된다는 점에 주의하세요. Backstage 앱은 Yarn 워크스페이스를 사용하는 모노레포로 구성돼요. 프론트엔드 UI 플러그인은 일반적으로 app 폴더에 추가되고, 백엔드 플러그인은 backend 폴더에 추가돼요.
2. 플러그인 사용 가능 여부 확인하기
새 프론트엔드 시스템에서는 기능 탐색(feature discovery)을 통해 플러그인이 자동으로 발견되어 앱에 설치돼요. 이 기능은 기본 app-config.yaml 설정으로 활성화되어 있어요:
app-config.yaml
app: packages: all
패키지가 설치되면 별도의 코드 변경 없이도 플러그인을 바로 사용할 수 있어요! yarn start로 앱을 시작하고 /tech-radar로 이동하면 플러그인이 동작하는 모습을 확인할 수 있어요.
이것은 하나의 예시일 뿐이며, Tech Radar 플러그인을 계속 추가하려면 여기에서 이어 나갈 수 있어요. 각 Backstage 인스턴스는 필요에 따라 서로 다른 페이지나 탭 등에 콘텐츠나 카드를 통합할 수 있다는 점을 기억하세요. 또한 이 예시처럼 독립적으로 사용하도록 설계된 플러그인이 있는 반면, 특정 소프트웨어 카탈로그 엔티티를 주석 처리하거나 지원하기 위한 플러그인은 앱의 다른 곳에 추가될 수도 있어요.
3. 선택 사항: 플러그인 구성하기
플러그인은 app-config.yaml의 구성을 통해 추가로 커스터마이징할 수 있어요. 예를 들어 app.extensions 섹션에서 확장 설정을 구성할 수 있어요:
app-config.yaml
app: extensions: - page:tech-radar: config: path: /tech-radar
어떤 구성 옵션을 사용할 수 있는지에 대한 자세한 내용은 플러그인 자체 문서 또는 확장 구성 가이드를 참고하세요.
4. 선택 사항: 플러그인 수동 설치하기
플러그인 설치를 더 세밀하게 제어해야 하거나 기능 탐색이 활성화되어 있지 않다면, 플러그인을 import해서 createApp에 전달하는 방식으로 수동으로 설치할 수 있어요:
packages/app/src/App.tsx
import { createApp } from '@backstage/frontend-defaults';import techRadarPlugin from '@backstage-community/plugin-tech-radar/alpha';const app = createApp({ features: [techRadarPlugin],});export default app.createRoot();
더 자세한 내용과 대체 설치 방법은 플러그인 설치를 참고하세요.
사이드바의 동작 방식
새 프론트엔드 시스템에서는 페이지를 제공하는 플러그인이 사이드바에 탐색 항목을 자동으로 등록해요. 대부분의 플러그인에 SidebarItem 요소를 수동으로 추가할 필요는 없어요.
항목 재정렬, 그룹화, 사용자 정의 항목 추가 등 사이드바 동작을 커스터마이징하려면 내장 app/nav 확장을 오버라이드하면 돼요. 사용자 정의 사이드바 레이아웃을 만드는 방법에 대한 자세한 내용은 마이그레이션 가이드의 사이드바 섹션을 참고하세요.