Backstage入門
-- Views
November 07, 24
スライド概要
内部開発者ポータルの代表格、Backstageの機能と導入手順などをご紹介いたします。
Software Engineer
関連スライド
各ページのテキスト
Backstage入門 2024年11月6日
Who am I 亀崎 仁志 株式会社エーピーコミュニケーションズにて Azure x Platform Engineeringに関する サービス／プロダクト開発に従事 X @turtle2005 Linked in in/hitoshikamezaki
What is Backstage Backstage 独自拡張可能な開発者ポータルを作成するオープンソースフレームワーク。 この開発者ポータルは、一元化されたソフトウェアカタログを用いて、開発チー ムがマイクロサービスやインフラストラクチャを一定の秩序を保ちつつも、チー ムの自律性を損なうことなく、高品質のコード・サービスを素早くリリースでき るようにするものです。
Spotify’s problem Spotify社の成長の過程でおきた課題 「組織拡大の速度の維持」と「個別の製品開発の速度の維持」の両立が困難に。 その要因は以下のもの。 ● Hard to find things ● Context switching ● Lack of standardization ● Infrastructure toil
Spotify’s solution 課題解決の３つのテーマ(CREATE / MANAGE / EXPLORE) ● CREATE ○ ベストプラクティスに沿った新しいソフトウェア（および開発環境）を数秒で作成 ● MANAGE ○ 組織がもつすべてのソフトウェア（ソフトウェア資産）を1箇所で集中管理 ● EXPLORE ○ ソフトウェアエコシステム全体を探索し、組織全体でのコラボレーションを実現
History of Backstage ● ● ● ● ● ● Spotify社内部ツールとして開発 2020年3月 オープンソースとして公開 2020年9月 CNCF 寄贈 Sandbox 2022年3月 v1.0 / CNCF Incubator 2022年11月 BackStageCON 開催（以降KubeCon NA/EUで併催） 2025年3月 5周年 2500+ Adopters、1.4k+ Contributor、13k+ Discord member 5k forks, 50k+ total contributions, 150+ open source plugins 大きく成長しているオープンソースプロジェクト（2024年3月時点）
Core Features 主要3機能 ● Software Catalog ● Software Template ● TechDocs その他のCore Feature ● Kubernetes対応 ● Search
デモ
Software Catalog 組織内のさまざまなリソースを一覧表示 apiVersion: backstage.io/v1alpha1 kind: Component metadata: name: example-website spec: type: website lifecycle: experimental owner: guests system: examples providesApis: [example-grpc-api]
Software Catalog リソース内の情報をまとめて表示 DependabotやGitHub Actions, Issuesの表示 K8sのDeployment等のステータス表示
Software Catalog 様々な種類をサポート ● Core Entities : ○ Component / Resource / API ● Ecosystem Modeling : ○ System / Domain ● Organizational Entities : ○ User / Group ● Others : ○ Template / Location Catalog Entity間の依存関係も表示可能
Software Template 組織内で利用可能なコードやIaCのテンプレートを公開
Software Template いくつかの項目を入力して、 実行することで ● Git Repository作成 ● PullReqとして登録 ● コマンド実行 などが可能
TechDocs ドキュメント表示（Mkdocs） ● リポジトリに記載されているMarkdownファイルを収集し、Backstage側で HTMLに変換 ● Searchを通じてリポジトリ横断で検索可能となる
TechDocs Backstage内でドキュメントを表示 # Chocott-Backstageの使い方 ## システム構成 [Backstage](https://backstage.io/) は [Plugin](https://backstage.io/plugins) を組み込む ことで様々な外部システムと連携することができます。 chocott-backstageでは GitHubと連携するPluginをいく つか組み込んであります。 chocott-backstageのシステム構成を以下に示します。 
TechDocs 組織のMarkdownドキュメントを一覧で表示
Search Catalog/Template/TechDocsなどのBackstageデータはSearch機能で検索可能
Kubernetes deploymentなどの状況がBackstage内から確認可能
Backstageの構成 Frontend/Backend x plugins x IdP (x 外部サービス)
How to “create” Backstage
How to “create” Backstage Backstageはコードから生成するもの
How to “create” Backstage 前提 ● ● ● ● Node.js(LTS) yarn git docker (option) TechDocsを利用する場合 ● Python3 ● mkdocs-techdocs-core (mkdocs plugin)
How to “create” Backstage 実行環境 ● データベース（デフォルトではPostgreSQL） ● TechDocsを格納するストレージ ○ ○ ローカルストレージ Cloud Storage ■ AWS S3 Bucket ■ Azure Blob Storage ■ Google GCS ■ OpenStack Swift Container
How to “create” Backstage $ npx @backstage/create-app 実行すると以下の内容を含むフォルダ ができあがる
How to “create” Backstage $ yarn install $ yarn dev 上記を実行するとローカルPC上 で最小限構成のBackstageが起動 する。
How to “add” plugins into your Backstage
How to “add” plugins into your Backstage BackstageはPluginを追加することで 様々な機能を追加することが可能。 Pluginの例 https://backstage.io/plugins
How to “add” plugins into your Backstage Backend Pluginを追加 $ yarn add –cwd packages/backend ¥ @backstage/plugin-catalog-backend-module-github 上記を実行後、packages/backend/index.tsを編集 // catalog plugin backend.add(import('@backstage/plugin-catalog-backend')); backend.add( import('@backstage/plugin-catalog-backend-module-scaffolder-entity-model'), ); backend.add( import('@backstage/plugin-catalog-backend-module-github') ); 追加
How to “add” plugins into your Backstage
Frontend Pluginsの追加
$ yarn --cwd packages/app add @backstage-community/plugin-github-actions
上記を実行後、packages/app/src/components/catalog/EntityPage.tsx を修正
import {
EntityGithubActionsContent,
isGithubActionsAvailable,
} from '@backstage-community/plugin-github-actions';
// You can add the tab to any number of pages, the service page is shown as an
// example here
const serviceEntityPage = (
<EntityLayout>
{/* other tabs... */}
<EntityLayout.Route path="/github-actions" title="GitHub Actions">
<EntityGithubActionsContent />
</EntityLayout.Route>
これらの内容を
追加
It’s very troublesome
I eliminated this troublesome for you 始めるには実に面倒なので 「ちょこっとBackstage」を作ってみました。 https://github.com/ap-communications/chocott-backstage （2023年9月公開）
ちょこっとBackstage ● create-app実行 ● @roadiehq/backstage-plugin-github-pull-requests 組み込み済み ● コンテナイメージ作成済 / compose.yaml 用意 必要なことは ● ● GitHub Appの登録 docker compose up 実行 のみ。catalog entityのサンプルとして「ちょこっとBackstage」の情報が利用可能。 リポジトリのソースコードはそのままご利用いただいてもOK。
References
More information ドキュメントでNew Backend/Frontend Systemに ついての言及があるためご紹介します。 Pluginを簡単に追加可能なように New Pluginsシステムへの移行を発表 ● New Backend System ○ ○ ○ ○ 2023年2月α版公開 2023年11月β版公開、2024年2月本格移行開始 2024年9月 New Backend System 1.0 本プレゼンテーションではNew Backend Systemに沿った定義方法をご紹介 ● New Frontend System ○ ○ 2023年11月αトライアル版公開、鋭意作業中 本プレゼンテーションではOld(Traditional) Frontend Systemに沿った定義方法をご紹介
References Backstage ● Backstage.io / GitHub Repo : backstage ● Discord もちろんAPCでも情報を多数発信しています。 ● APC techblog (Backstage関連情報カテゴリはこちら）
References Plugins ● Backstage Plugins / GitHub Repo: backstage/plugins ● Backstage community plugins (2024年2月にBackstage本体から分離） ● Spotify Marketplace ● Roadie RoadieHQ/roadie-backstage-plugins ● Janus IDP ● etc
Fin
BACK Stack BACK Stack( backstack.dev ) ● ● ● ● B: Backstage A: ArgoCD C: Crossplane K: Kyverno を組み合わせたもの。 APC Tech Blog より
BACK Stack Architecture https://backstack.dev/arch/
OAM ポイント「Separation of Concerns」 OAM以外でも取り上げらているテーマ ● KubeVela : Separation of Concerns ○ Platform TeamとEnd user(Developer Team) ● Humanitec: What is Dynamic Configuration Management ○ 静的部分と動的部分（≒ Platform TeamとDeveloper Team)