【Backstage】 New Frontend System導入ガイド（Part1「SSOの設定」）

はじめに

皆さんこんにちは。エーピーコミュニケーションズ ACS事業部亀崎です。

早いもので2026年も半分を過ぎました。2026年のBackstageに関する大きなニュースの１つとして「New Frontend System（NFS）」が挙げられるのではないでしょうか。

techblog.ap-com.co.jp

いままで課題であった「コードを書く」という部分がかなり削減されるらしいぞ、簡単になるらしいぞ、というのはわかるのですが、いざ実際にやろうとすると、「この部分はどうなるんだろうか？」「どのように指定すればいいのだろうか？」といったところが出てきます。そうした点があって、なかなかNFS採用に踏み切れないという方もいらっしゃると思います。

本ブログではそうした「これどうなるの？？」を少しずつ解説していきたいと思っています。

今考えている解説の候補としては

SSOの指定
サイドメニューの指定
CatalogのOverviewやTabへの追加
Scaffolder Extension機能の追加

といったものを考えています。

New Frontend Systemにおける GitHub SSOの有効化

ということで、今回は第一弾として「SSOの設定」を取り上げます。簡単になるというけれど、SSOの指定って実際どうなるの？？

結論からいうと、実はまだそこまで簡単にはなっていません。SSOの設定は多くの場合最初の一度きりではないかと思いますので「簡単になってない」点はご容赦ください。

その代わりといってはなんですが、今回Backend側でも使えるようになってるPlugin Auto Discovery機能を有効にして、 Pluginの追加そのものが簡単になるという点も併せてご紹介します。

Backend

実は多くのモジュールは初期状態で組み込まれています。必要になるのはGitHub側のユーザーとチーム情報を BackstageのUser/Groupに同期する部分です。以下のコマンドでモジュールを backend に追加します。

yarn --cwd packages/backend @backstage/plugin-catalog-backend-module-github-org
yarn --cwd packages/backend @backstage/plugin-catalog-backend-module-github

今回はさきほどご紹介したようにBackend側もPluginのAuto Discovery 機能を有効にしたいと思います。

techblog.ap-com.co.jp

packages/backend/src/index.ts の内容を以下のようにします。

import {
  createBackend,
  discoveryFeatureLoader
} from '@backstage/backend-defaults';

const backend = createBackend();
backend.add(discoveryFeatureLoader);

backend.start();

以前ご紹介したとおり、Plugin追加のたびにコードを修正する必要はなくなります。

Frontend

ここからがSSOを有効にする部分の本体です。

2026年7月現在でも、サインイン画面はコードで記述する必要があります。

まず packages/app/src/modules 内に signIn フォルダを作成し、以下のファイルを追加します。

packages/app/src/modules/signIn/signInPage.tsx

import { githubAuthApiRef } from '@backstage/core-plugin-api';
import { SignInPageBlueprint } from '@backstage/plugin-app-react';
import { SignInPage } from '@backstage/core-components';

export const signInPage = SignInPageBlueprint.make({
  params: {
    loader: async () => props =>
      (
        <SignInPage
          {...props}
          provider={{
            id: 'github-auth-provider',
            title: 'GitHub',
            message: 'Sign in using GitHub',
            apiRef: githubAuthApiRef,
          }}
        />
      ),
  },
});

packages/app/src/modules/signIn/index.ts

import { createFrontendModule } from '@backstage/frontend-plugin-api';
import { signInPage } from './signInPage';

export const signInModule = createFrontendModule({
  pluginId: 'app',
  extensions: [signInPage],
});

packages/app/src/modules/index.ts

export * from './nav';
export * from './signIn';

最後に packages/app/src/App.tsx の内容を以下のように変更します。

packages/app/src/App.tsx

import { createApp } from '@backstage/frontend-defaults';
import catalogPlugin from '@backstage/plugin-catalog/alpha';
import { navModule, signInModule } from './modules';

export default createApp({
  features: [catalogPlugin, navModule, signInModule],
});

続いてコンフィグレーションです。GitHub SSOを有効にする箇所をピックアップしています。

app:
  # Enable all packages by default, this will discover packages from packages/app/package.json
  packages: all

  extensions:

auth:
  environment: production
  providers:
    github:
      production:
        clientId: ${GITHUB_CLIENT_ID}
        clientSecret: ${GITHUB_CLIENT_SECRET}
        signIn:
          resolvers:
            - resolver: usernameMatchingUserEntityName

backend:
  packages:
    exclude:
      - '@backstage/plugin-auth-backend-module-guest-provider'

integrations:
  github:
    - host: github.com
      apps:
        - $include: ${GITHUB_CREDENTIAL_FILE}


catalog:
  providers:
    githubOrg:
      id: 'github-local'
      githubUrl: 'https://github.com'
      webhook: enabled
      schedule:
        frequency:
          days: 1
        timeout:
          minutes: 5

app.packages はFrontend のPlugin Auto Discovery機能を、backend.packages はBackendのPlugin Auto Discovery 機能を有効にするためのものです。

@backstage/plugin-auth-backend-module-guest-provider はBackendにもともと組み込まれているモジュールで、今回GitHub SSOを有効にするため不要となります。 backend/package.json からこのモジュール指定部分を削除してもよいのですが、今回はあえて exclude 指定することで機能を無効にしています。

変更前は以下のようなGuest Userのメッセージが表示されていたと思います。

今回の変更を行うことで、以下のようにGitHub SSOのSign In UIが表示されるようになると思います。

今日はここまで。

最後に

弊社では、Backstageのマネージドサービスである「PlaTT」を提供しています。開発者ポータルの前提となる Platform Engineeringの導入支援も行っております。開発者体験を向上し、開発生産性を高めたいとご検討の皆様、ぜひ弊社までご相談ください。

APC 技術ブログ

株式会社エーピーコミュニケーションズの技術ブログです。

【Backstage】 New Frontend System導入ガイド（Part1「SSOの設定」）

はじめに

New Frontend Systemにおける GitHub SSOの有効化

Backend

Frontend

最後に