공개 진입 활성화
공개 진입 활성화 (Enable Public Entry) (실험적)
info
출처: 문서
본문
info
이 문서는 새 Backstage 앱에서 기본이 되는 새 프런트엔드 시스템을 위해 작성되었습니다. Backstage 앱이 여전히 이전 프런트엔드 시스템을 사용한다면 이 가이드의 이전 프런트엔드 시스템 버전을 대신 읽으세요.
이 튜토리얼에서는 주요 Backstage 앱 번들에 대한 접근을 인증된 사용자로만 제한하는 방법을 배웁니다.
보호된 번들 기능은 향후 개발 반복에서 정제될 것으로 예상되지만, 지금은 다음과 같이 단순화된 방식으로 작동합니다.
Backstage 앱 번들은 두 개의 코드 진입점으로 나뉩니다.
- 로그인 페이지를 포함하는 공개 진입점(public entry point);
- 로그인 후 보게 되는 코드를 포함하는 보호된 주요 진입점(protected main entry point)도 있습니다.
이를 통해 Backstage의 cli와 백엔드는 공개 진입점을 감지해 인증되지 않은 사용자에게 제공하고, 보호된 주요 진입점은 인증된 사용자에게만 제공합니다.
요구 사항 (Requirements)
- 앱이
app-backend플러그인에 의해 서빙되어야 합니다. 그렇지 않으면 작동하지 않습니다. - 또한
backstage-cli를 사용해 Backstage 앱을 빌드하고 서빙하는 경우에만 작동합니다.
단계별 (Step-by-step)
앱 src 폴더에 index-public-experimental.tsx를 만드세요.
note
파일 이름은 관례일 뿐이며, 현재는 구성할 수 없습니다.
이 파일은 애플리케이션의 공개 진입점이며, 인증되지 않은 사용자가 보아야 할 것만 포함해야 합니다.
in packages/app/src/index-public-experimental.tsx
import ReactDOM from 'react-dom/client';import { signInPageModule } from './overrides/SignInPage';import { appModulePublicSignIn } from '@backstage/plugin-app/alpha';import { createApp } from '@backstage/frontend-defaults';const app = createApp({ features: [signInPageModule, appModulePublicSignIn],});ReactDOM.createRoot(document.getElementById('root')!).render( app.createRoot(),);
signInPageModule은 사용자 지정 로그인 페이지 확장으로, 앱에 이미 구성되어 있어야 합니다. @backstage/plugin-app/alpha의 appModulePublicSignIn은 로그인 후 주요 앱으로 인증된 리다이렉트를 트리거하는 CookieAuthRedirect 구성 요소를 제공합니다.
note
프런트엔드가 쿠키 새로 고침을 자동으로 처리하므로 걱정할 필요가 없습니다.
모든 것이 로컬에서 작동하는지 확인해 봅시다. 프로젝트 루트 폴더에서 다음 명령을 실행해 앱을 빌드하고 백엔드를 시작합니다.
# building the app packageyarn workspace app start# starting the backend apiyarn start-backend
http://localhost:7007을 방문해 공개 앱을 보고 index.html 응답에 최소한의 애플리케이션만 포함되어 있는지 확인합니다.
note
일반적인 앱 서빙은 항상 인증 없이 보호 앱을 제공합니다.
마지막으로 로그인하는 즉시 주요 앱 홈 페이지로 리다이렉트됩니다 (페이지를 검사해 리다이렉트 후 보호된 번들이 앱 백엔드에서 서빙되었는지 확인하세요).
그것뿐입니다!