Backstage 프로젝트 구조
Backstage는 복잡한 프로젝트이며, GitHub 저장소에는 여러 다른 파일과 폴더가 있어요. 이 문서는 그 파일과 폴더의 목적을 명확히 하기 위한 것이에요.
출처: 문서
본문
Backstage는 복잡한 프로젝트이며, GitHub 저장소에는 여러 다른 파일과 폴더가 있어요. 이 문서는 그 파일과 폴더의 목적을 명확히 하기 위한 것이에요.
일반 목적의 파일과 폴더
프로젝트 루트에는 프로젝트 자체의 일부가 아닌 파일과 폴더 집합이 있으며, 코드를 살펴보는 사람에게 익숙할 수도 아닐 수도 있어요.
.changeset/- 이 폴더에는 마지막 릴리스 이후 프로젝트에서 어떤 변경이 발생했는지 설명하는 파일이 들어 있어요. 이 파일들은 수동으로 추가되지만 changesets가 관리하며 새 릴리스마다 제거돼요. 이는 본질적으로 CHANGELOG의 구성 요소예요..github/- 표준 GitHub 폴더예요. 무엇보다도 우리의 워크플로 정의와 템플릿이 들어 있어요. 주목할 만한 것은 Markdown 맞춤법 검사기에 사용되는vale하위 폴더예요..yarn/- Backstage는 자체yarn구현을 함께 제공해요. 이를 통해yarn.lock파일을 더 잘 제어하고, yarn 버전 차이로 인한 문제를 피할 수 있기를 바라요.contrib/- 커뮤니티가 기여한 예제나 리소스 모음이에요. 이곳의 기여를 정말 감사하게 생각하며, 최신 상태로 유지되기를 장려해요.docs/- 모든 문서 Markdown 파일을 보관하는 곳이에요. 이 파일들은 https://backstage.io/docs 에 게시돼요. 섹션이 추가/제거됨에 따라sidebars.ts파일을 변경해야 할 수도 있다는 점만 기억하세요..editorconfig- 대부분의 일반적인 코드 편집기에서 사용하는 구성 파일이에요. 자세한 내용은 EditorConfig.org에서 확인하세요..imgbotconfig- 이미지 크기를 줄이는 데 도움을 주는 봇의 구성이에요.
모노레포 패키지
packages/와 plugins/의 모든 폴더는 package.json에 정의된 대로 우리의 모노레포 설정 안에 있어요.
"workspaces": [
"packages/*",
"plugins/*"
],
각각을 하나씩 살펴볼게요.
packages/
이것들은 프로젝트 안에서 사용하는 모든 패키지예요. 플러그인은 아래에서 더 설명하듯 자체 폴더로 분리돼요.
app/- App이 어떻게 보일 수 있는지에 대한 우리의 견해로, 패키지와 플러그인 집합을 하나의 작동하는 Backstage App으로 통합해요. 이는 게시된 패키지가 아니며, 주요 목표는 App이 어떻게 보일 수 있는지 데모를 제공하고 로컬 개발을 가능하게 하는 것이에요.backend/- 독립형 Backstage 프로젝트는 모두app과backend패키지를 가져요.backend는 플러그인을 사용해 프론트엔드(app)가 사용할 수 있는 작동하는 백엔드를 구축해요.backend-app-api/- 이 패키지는 Backstage 백엔드를 만드는 방법에 대한 중심 배선(wiring)을 포함해요.backend-plugin-api/- 이 패키지는 플러그인, 모듈 같은 Backstage 백엔드 기능을 만드는 데 사용되는 핵심 API를 포함해요.catalog-client- Software Catalog와 상호작용하는 동형(isomorphic) 클라이언트예요. 백엔드 플러그인은 이 패키지를 직접 사용할 수 있어요. 프론트엔드 플러그인은@backstage/plugin-catalog을useApi및catalogApiRef와 함께 사용해 클라이언트를 사용할 수 있어요.catalog-model/- 이것은 카탈로그를 다루는 라이브러리라고 생각하면 돼요.Entity의 정의와 그것과 관련된 검증 및 기타 로직을 포함해요. 이 패키지는 프론트엔드와 백엔드 모두에서 사용할 수 있어요.cli/- 우리 프로젝트에서 가장 큰 패키지 중 하나로,cli는 빌드, 서빙, diff, 플러그인 생성 등을 하는 데 사용돼요. 프로젝트 초기에는package.json을 통해eslint같은 도구를 직접 호출하는 것에서 시작했어요. 하지만 명명된 도구를 바꿀 때 그 주변에서 좋은 개발 경험을 갖기가 까다로워서, 우리 자체 CLI로 감싸기로 했어요. 그렇게 하면package.json안의 모든 것이 동일해 보여요. react-scripts와 매우 비슷해요.cli-common/- 이 패키지는 주로 경로 해석을 처리해요. CLI에서 버그를 줄이기 위한 별도 패키지예요. CLI를 실행할 때 다운로드 시간을 줄이기 위해 의존성을 최대한 적게 유지하고 싶은데, 이것이 별도 패키지인 또 다른 이유예요.config/- 구성 데이터를 읽는 방식이에요. 이 패키지는 여러 구성 객체를 받아 함께 병합할 수 있어요.app-config.yaml은 구성 객체의 예시예요.config-loader/- 이 패키지는 구성 객체를 읽는 데 사용돼요. 병합하는 방법은 모르고 파일만 읽어 구성으로 전달해요. 이 부분은 백엔드에서만 사용하므로,config와config-loader를 두 개의 다른 패키지로 분리하기로 했어요.core-app-api/- 이 패키지는 Backstage 앱을 함께 배선하는 데 사용되는 핵심 API를 포함해요.core-components/- 이 패키지는 우리의 시각적 React 컴포넌트를 포함하며, 그중 일부는 플러그인 예시에서 찾을 수 있어요.core-plugin-api/- 이 패키지는 Backstage 플러그인을 구축하는 데 사용되는 핵심 API를 포함해요.create-app/- 새 Backstage App을 구체적으로 스캐폴딩하는 CLI예요. 템플릿을 사용해 그렇게 해요.dev-utils/- 플러그인이 별도로 서빙될 수 있도록 격리된 개발을 위해 플러그인을 설정하는 데 도움을 줘요. 레거시 프론트엔드 시스템을 사용하는 플러그인을 위한 것이에요.frontend-dev-utils/- 새 프론트엔드 시스템을 사용해 프론트엔드 플러그인을 개발하기 위한 유틸리티예요. 플러그인의dev/엔트리 포인트에서 최소 개발 앱을 설정하는createDevApp헬퍼를 제공해요.e2e-test/- 모든 패키지를 빌드하고, 게시하고, 새 앱을 만들고, 실행한다면 어떤 일이 일어나는지 시도해볼 수 있는 또 다른 CLI예요. CI는 e2e 테스트에 이걸 사용해요.integration/- GitHub, GitLab 등의 통합에 대한 공통 기능이에요..storybook/- 이 폴더는 재사용 가능한 React 컴포넌트를 시각화하는 데 도움을 주는 Storybook 구성을 포함해요. 스토리는 모노레포 전반의 패키지와 플러그인에서 스캔되며, Backstage Storybook에 게시돼요.techdocs-node/- TechDocs를 위한 공통 Node.js 기능으로, techdocs-backend 플러그인과 techdocs-cli 사이에서 공유하기 위한 것이에요.test-utils/- 이 패키지는 Backstage App이나 그 플러그인을 테스트하기 위한 범용 테스트 설비를 포함해요.theme/- Backstage 테마를 보관해요.
plugins/
Backstage App의 기능 대부분은 플러그인에서 나와요. 핵심 기능조차 플러그인이 될 수 있어요. catalog를 예로 들어보세요.
플러그인은 프론트엔드(Frontend), 백엔드(Backend), GraphQL의 세 가지 유형으로 분류할 수 있어요. 이름을 지을 때 대시 접미사로 이런 유형을 구분해요. -backend는 백엔드 플러그인이라는 뜻이에요.
플러그인을 분리하는 한 가지 이유는 의존성 때문이에요. 또 다른 이유는 관심사의 명확한 분리 때문이에요.
플러그인 디렉토리(Plugin Directory)를 보거나 plugins/ 폴더를 둘러보세요.
모노레포 밖의 패키지
편의를 위해 모노레포 설정에 속하지 않는 패키지도 프로젝트에 포함해요.
microsite/- 이 폴더는 backstage.io의 소스 코드를 포함해요. Docusaurus로 구축돼요. 의존성 때문에 이 폴더는 모노레포에 속하지 않아요. 로컬에서 실행하는 방법은 microsite README를 참고하세요.
app이 특별히 사용하는 루트 파일
이 파일들은 대부분 역사적인 이유로 프로젝트 루트에 보관돼요. 이 중 일부는 언젠가 루트에서 옮겨질 수 있어요.
.npmrc- 회사가 자체 npm 레지스트리를 갖는 것이 흔한데, 이 파일은 이 폴더가 항상 공개 레지스트리를 사용하도록 보장해요..yarnrc.yml- "우리" 버전의 Yarn을 강제해요.app-config.yaml- 프론트엔드와 백엔드 모두에 대한 앱 구성이에요.catalog-info.yaml- Backstage Entity 형식으로 된 Backstage에 대한 설명이에요.