시작하기

Backstage Notifications 시스템은 플러그인과 외부 서비스가 Backstage 사용자에게 알림을 보낼 수 있는 방법을 제공해요.

출처: 문서

본문

info

이 문서는 새 Backstage 앱에서 기본이 되는 새 프론트엔드 시스템을 위해 작성됐습니다. Backstage 앱이 여전히 옛 프론트엔드 시스템을 사용한다면, 대신 이 가이드의 옛 프론트엔드 시스템 버전을 읽으세요.

Backstage Notifications 시스템은 플러그인과 외부 서비스가 Backstage 사용자에게 알림을 보낼 수 있는 방법을 제공해요. 이 알림은 Backstage 프론트엔드 UI의 전용 페이지에 표시되거나, 특정 시나리오에 따라 프론트엔드 플러그인이 표시해요. 또한 알림은 플러그인 안에 구현된 "프로세서(processors)"를 통해 외부 채널(이메일 같은)로 보낼 수도 있어요.

알림은 signals 플러그인으로 선택적으로 확장할 수 있으며, 이 플러그인은 사용자가 즉시 알림을 받도록 하는 푸시 메커니즘을 제공해요.

최신 버전의 Backstage로 업그레이드하기

Backstage 버전에 모든 최신 알림 및 signals 관련 기능이 있는지 확인하려면 최신 버전으로 업그레이드하는 것이 중요해요. Backstage 업그레이드 헬퍼는 업그레이드 동안 필요한 모든 변경을 했는지 확인하는 데 도움이 되는 훌륭한 도구예요!

알림에 대해

알림은 개별 사용자 또는 그룹에게 보내는 메시지예요. 어떤 종류의 프로세스 간 통신도 위한 것이 아니에요.

알림에는 두 가지 기본 유형이 있어요.

• Broadcast: Backstage의 모든 사용자에게 보내는 메시지.

• Entity: 나열된 특정 엔티티(예: 사용자, 그룹)에게 전달되는 메시지.

사용 사례 예시:

• 시스템 전체 공지나 알림

• 컴포넌트 소유자를 위한 알림, 예: 빌드 실패, 성공적인 배포, 새 취약점

• 개인을 위한 알림, 예: 구독한 업데이트, 새 필수 교육 과정

• 카탈로그의 특정 엔티티와 관련된 알림: 어떤 알림은 엔티티와 소유 팀에 적용될 수 있어요.

설치

note

Backstage의 1.42.0 릴리스부터 Notifications와 Signals는 기본 @backstage/create-app 인스턴스의 일부로 설치되므로, 여기에 설명된 설치 단계를 따를 필요가 없습니다. 유일한 예외는 Notifications 사이드바 항목과 선택적으로 User Settings에 Notifications 탭을 추가하는 것입니다.

다음 섹션에서는 Backstage Notification System의 다양한 부분을 설치하는 방법을 안내할게요.

Notifications 백엔드 추가

먼저 백엔드 패키지를 추가해야 해요.

Backstage 루트 디렉터리에서

yarn --cwd packages/backend add @backstage/plugin-notifications-backend

그런 다음 백엔드에 추가해야 해요.

packages/backend/src/index.ts

const backend = createBackend();// ...backend.add(import('@backstage/plugin-notifications-backend'));

Notifications 프론트엔드 추가

먼저 프론트엔드 패키지를 추가해야 해요.

Backstage 루트 디렉터리에서

yarn --cwd packages/app add @backstage/plugin-notifications

설치되면 notifications 플러그인은 기본 기능 발견을 통해 앱에서 자동으로 사용 가능해져요. /notifications에 알림 페이지와 notifications API를 제공해요. 자세한 내용과 대체 설치 방법은 installing plugins를 참고하세요.

Notifications 사이드바 항목 추가

notifications 플러그인에는 아직 내장 내비게이션 항목이 없으므로, 사이드바에 NotificationsSidebarItem 컴포넌트를 수동으로 추가해야 해요. 커스텀 사이드바를 NavContentBlueprint로 갖고 있다면 그 컴포넌트를 거기에 추가하세요.

import { NotificationsSidebarItem } from '@backstage/plugin-notifications';// Inside your NavContentBlueprint component:<Sidebar>  <SidebarGroup label="Menu" icon={<MenuIcon />}>    {/* ... other items ... */}  </SidebarGroup>  <SidebarGroup label="Settings" icon={<SettingsIcon />} to="/settings">    <NotificationsSidebarItem />  </SidebarGroup></Sidebar>;

선택: Signals 추가

signals 사용은 선택 사항이지만 실시간 푸시 업데이트를 제공해 사용자 경험을 개선해요.

선택: Signals 백엔드 추가

먼저 백엔드 패키지를 추가해 백엔드에 signals를 추가하세요.

Backstage 루트 디렉터리에서

yarn --cwd packages/backend add @backstage/plugin-signals-backend

그런 다음 백엔드에 signals 플러그인을 추가하세요.

packages/backend/src/index.ts

const backend = createBackend();// ...backend.add(import('@backstage/plugin-signals-backend'));

선택: Signals 프론트엔드

먼저 프론트엔드 패키지를 추가하세요.

Backstage 루트 디렉터리에서

yarn --cwd packages/app add @backstage/plugin-signals

설치되면 signals 플러그인은 기본 기능 발견을 통해 앱에서 자동으로 사용 가능해져요. 추가 구성은 필요 없어요. signals 플러그인이 제대로 구성되면 notifications 플러그인이 자동으로 발견해서 사용해요.

사용자별 알림 설정

notifications 플러그인은 사용자가 자신의 알림 설정을 관리할 수 있는 방법을 제공해요. 이를 활성화하려면 SubPageBlueprint를 사용해 user-settings 플러그인에 설정 탭을 추가하는 프론트엔드 모듈을 만들 수 있어요.

packages/app/src/modules/NotificationSettingsPage.tsx

import { Content } from '@backstage/core-components';import { UserNotificationSettingsCard } from '@backstage/plugin-notifications';export function NotificationSettingsPage() {  return (    <Content>      <UserNotificationSettingsCard        originNames={{ 'plugin:scaffolder': 'Scaffolder' }}      />    </Content>  );}

packages/app/src/modules/notificationSettings.tsx

import { createFrontendModule } from '@backstage/frontend-plugin-api';import { SubPageBlueprint } from '@backstage/frontend-plugin-api';export const notificationSettingsModule = createFrontendModule({  pluginId: 'user-settings',  extensions: [    SubPageBlueprint.make({      name: 'notifications',      params: {        path: 'notifications',        title: 'Notifications',        loader: () =>          import('./NotificationSettingsPage').then(m => (            <m.NotificationSettingsPage />          )),      },    }),  ],});

그런 다음 createApp의 features 배열에 추가하거나, 앱이 지원한다면 기본 기능 발견을 통해 이 모듈을 앱에 설치하세요.

UI에 표시되는 오리진 이름을 커스터마이즈하려면 키가 오리진이고 값이 UI에 표시할 이름인 객체를 전달할 수 있어요.

각 알림 프로세서는 설정 페이지에서 자체 행을 받아, 사용자가 해당 프로세서의 알림을 활성화/비활성화할 수 있어요.

기본 알림 설정

app-config.yaml 파일에서 모든 사용자에 대한 기본 알림 설정을 구성할 수 있어요. 이렇게 하면 특정 채널이나 오리진을 기본적으로 비활성화하고, 옵트아웃 대신 옵트인 전략을 구현하는 등 알림 기본 설정을 전역으로 지정할 수 있어요.

채널 수준 기본값

전체 채널에 대한 기본 활성화 상태를 설정할 수 있어요. false로 설정하면 해당 채널은 알림이 사용자나 특정 오리진에 의해 명시적으로 활성화되지 않는 한 기본적으로 비활성화되는 옵트인 전략을 사용해요.

notifications:  defaultSettings:    channels:      - id: 'Web'        enabled: false # Opt-in strategy: channel disabled by default      - id: 'Email'        enabled: true # Opt-out strategy: channel enabled by default (default behavior)

오리진 수준 기본값

채널 안의 특정 오리진에 대한 기본값도 구성할 수 있어요.

notifications:  defaultSettings:    channels:      - id: 'Web'        enabled: true # Channel is enabled by default        origins:          - id: 'plugin:scaffolder'            enabled: false # Disable scaffolder notifications by default          - id: 'plugin:catalog'            enabled: true # Enable catalog notifications by default

토픽 수준 기본값

더 세밀한 제어를 위해 오리진 안의 특정 토픽에 대한 기본값을 설정할 수 있어요.

notifications:  defaultSettings:    channels:      - id: 'Email'        enabled: false # Email is opt-in by default        origins:          - id: 'plugin:catalog'            enabled: true # But catalog notifications are enabled            topics:              - id: 'entity:validation:error'                enabled: false # Except validation errors

참고: 채널의 enabled 플래그가 설정되지 않으면 하위 호환성을 위해 기본값은 true예요. 채널이 enabled: false로 설정되면, 명시적으로 활성화되지 않는 한 채널 안의 모든 오리진은 기본적으로 비활성화돼요.

자동 알림 정리

데이터베이스가 무한정 커지지 않고 사용자 인터페이스를 깨끗하게 유지하기 위해 알림은 일정 기간이 지나면 자동으로 삭제돼요. 기본 보존 기간은 1년으로 설정되어 있으며, 그보다 오래된 알림은 자동으로 삭제돼요.

보존 기간은 app-config.yaml 파일에서 notifications.retention을 설정해 구성할 수 있어요.

notifications:  retention: 1y

보존 기간을 false로 설정하면 알림이 자동으로 삭제되지 않아요.

Scaffolder 액션

note

Backstage의 1.42.0 릴리스부터 Notifications Scaffolder 액션은 기본 @backstage/create-app 인스턴스의 일부로 설치되므로, 여기에 설명된 설치 단계를 따를 필요가 없습니다. Basic Example로 건너뛰어도 됩니다.

Software Template의 일부로 알림을 보내는 데 사용할 수 있는 Scaffolder 액션도 있어요.

먼저 백엔드 패키지를 추가해야 해요.

Backstage 루트 디렉터리에서

yarn --cwd packages/backend add @backstage/plugin-scaffolder-backend-module-notifications

그런 다음 백엔드에 추가해야 해요.

packages/backend/src/index.ts

const backend = createBackend();// ...backend.add(  import('@backstage/plugin-scaffolder-backend-module-notifications'),);

기본 예시

Software Template에서 이렇게 사용할 수 있는 예시예요. 더 자세한 내용과 예시는 Backstage 인스턴스의 "Installed actions" 화면에서 확인할 수 있어요.

template.yaml

steps:  - id: notify    name: Notify    action: notification:send    input:      recipients: entity      entityRefs:        - user:default/guest      title: 'Template executed'      info: 'Your template has been executed'      severity: 'normal'

위 예시는 Guest 사용자(user:default/guest)에게 알림을 보내요.

추가 정보

알림을 보내는 백엔드 플러그인의 예시는 @backstage/plugin-scaffolder-backend-module-notifications 패키지에서 찾을 수 있어요.

notifications 및 signals 플러그인의 소스:

• notifications

• notifications-backend

• notifications-common

• notifications-node

• signals-backend

• signals

• signals-node

• signals-react

더 알아보기 (Learn more)