공개 진입 활성화

원문 보기 위키 갱신 2026.10.07

공개 진입 활성화 (Enable Public Entry) (실험적)

info

출처: 문서

본문

info

이 문서는 여전히 이전 프런트엔드 시스템을 사용하는 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 { createApp } from '@backstage/app-defaults';import { AppRouter } from '@backstage/core-app-api';import {  AlertDisplay,  OAuthRequestDialog,  SignInPage,} from '@backstage/core-components';import {  configApiRef,  discoveryApiRef,  createApiFactory,} from '@backstage/core-plugin-api';import { CookieAuthRedirect } from '@backstage/plugin-auth-react';// Notice that this is only setting up what is needed by the sign-in pagesconst app = createApp({  // If you have any custom APIs that your sign-in page depends on, you need to add them here  apis: [],  components: {    SignInPage: props => {      return (        <SignInPage          {...props}          providers={['guest']}          title="Select a sign-in method"        />      );    },  },});const App = app.createRoot(  <>    <AlertDisplay transientTimeoutMs={2500} />    <OAuthRequestDialog />    <AppRouter>      {/* This component triggers an authenticated redirect to the main app, while staying on the same URL */}      <CookieAuthRedirect />    </AppRouter>  </>,);ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

note

프런트엔드가 쿠키 새로 고침을 자동으로 처리하므로 걱정할 필요가 없습니다.

모든 것이 로컬에서 작동하는지 확인해 봅시다. 프로젝트 루트 폴더에서 다음 명령을 실행해 앱을 빌드하고 백엔드를 시작합니다.

# building the app packageyarn workspace app start# starting the backend apiyarn start-backend

http://localhost:7007을 방문해 공개 앱을 보고 index.html 응답에 최소한의 애플리케이션만 포함되어 있는지 확인합니다.

note

일반적인 앱 서빙은 항상 인증 없이 보호 앱을 제공합니다.

마지막으로 로그인하는 즉시 주요 앱 홈 페이지로 리다이렉트됩니다 (페이지를 검사해 리다이렉트 후 보호된 번들이 앱 백엔드에서 서빙되었는지 확인하세요).

그것뿐입니다!

공개 진입 활성화