1. 튜토리얼 설정
이 튜토리얼은 플러그인 작성자가 플러그인에 권한 지원을 추가하도록 돕기 위해 설계되었어요. 예시 todo-list와 todo-list-backend 플러그인에 권한 지원을 추가할 거지만, 다른 플러그인에서도 과정은 비슷할 거예요!
출처: 문서
본문
이 튜토리얼은 플러그인 작성자가 플러그인에 권한 지원을 추가하도록 돕기 위해 설계되었어요. 예시 todo-list와 todo-list-backend 플러그인에 권한 지원을 추가할 거지만, 다른 플러그인에서도 과정은 비슷할 거예요!
이 페이지의 나머지는 Backstage 인스턴스에 todo-list와 todo-list-backend 플러그인을 추가하는 데 초점을 맞춰요. 대신 자체 플러그인에 권한 지원을 추가하고 싶다면 다음 섹션으로 건너뛰어도 좋아요.
튜토리얼 설정
참고: Getting Started 문서의 일부로 만들어진 파일들을 갱신할 거예요. 이 튜토리얼은 이미 그 단계들을 보고 진행했다고 가정해요!
우리는 todo-list와 todo-list-backend 플러그인과 그들의 의존성인 todo-list-common으로 구성된 "Todo list" 기능을 만들 거예요.
소스 코드는 여기에서 볼 수 있어요.
- todo-list
- todo-list-backend
- todo-list-common
세 폴더를 Backstage 애플리케이션 저장소의 plugins 폴더에 복사-붙여넣기 하거나(각 폴더에서 example- 접두사 제거), Backstage 애플리케이션 루트에서 다음 스크립트를 실행하세요.
$ cd $(mktemp -d) git clone --depth 1 --quiet --no-checkout --filter=blob:none https://github.com/backstage/backstage.git . git checkout master -- plugins/example-todo-list/ git checkout master -- plugins/example-todo-list-backend/ git checkout master -- plugins/example-todo-list-common/ sed -i '' 's/workspace:\^/\*/g' plugins/example-todo-list/package.json sed -i '' 's/workspace:\^/\*/g' plugins/example-todo-list-backend/package.json sed -i '' 's/workspace:\^/\*/g' plugins/example-todo-list-common/package.json for file in plugins/*; do mv "$file" "$OLDPWD/${file/example-todo/todo}"; done cd -
이제 프로젝트의 plugins 디렉터리에 todo-list, todo-list-backend, todo-list-common이 포함되어 있어야 해요.
중요: Windows를 사용 중이라면 위 스크립트를 실행하기 전에 머신에 WSL과 git이 설치되어 있는지 확인하세요.
- 이 패키지들을 Backstage 앱의 의존성으로 추가하세요.
Backstage 루트 디렉터리에서
yarn --cwd packages/backend add @backstage/plugin-permission-backend @backstage/plugin-permission-backend-module-allow-all-policy @internal/plugin-todo-list-backend @internal/plugin-todo-list-commonyarn --cwd packages/app add @internal/plugin-todo-list
- 애플리케이션에 백엔드와 프론트엔드 플러그인을 포함하세요.
packages/backend/src/index.ts에 다음 변경을 적용하세요.
packages/backend/src/index.ts
import { createBackend } from '@backstage/backend-defaults';//...const backend = createBackend();//...// Installing the permission pluginbackend.add(import('@backstage/plugin-permission-backend'));// Installing the allow all permission policy modulebackend.add( import('@backstage/plugin-permission-backend-module-allow-all-policy'),);// Installing the todolist pluginbackend.add(import('@internal/plugin-todo-list-backend'));//...backend.start();
packages/app/src/App.tsx에 다음 변경을 적용하세요.
packages/app/src/App.tsx
import { TodoListPage } from '@internal/plugin-todo-list';//...const routes = ( <FlatRoutes> {/* ... */} <Route path="/todo-list" element={<TodoListPage />} /> {/* ... */} </FlatRoutes>);
이제 애플리케이션을 시작하면 /todo-list 페이지에 도달할 수 있어야 해요.
새 플러그인 통합
UI를 가지고 놀면 몇 가지 액션을 수행할 수 있다는 것을 알게 될 거예요.
- 새 todo 항목 만들기 (
POST /todos) - todo 항목 보기 (
GET /todos) - 기존 todo 항목 편집 (
PUT /todos)
각각에 인가를 도입해 보겠어요.