---
title: Backstage入門
tags:  #backstage  
author: [Hitoshi Kamezaki](https://convert.docswell.com/user/turtle2005)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/27VDMDMY7Q.jpg?width=480
description: 内部開発者ポータルの代表格、Backstageの機能と導入手順などをご紹介いたします。
published: November 07, 24
canonical: https://convert.docswell.com/s/turtle2005/KWW4E4-2024-11-06-210000
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/27VDMDMY7Q.jpg)

Backstage入門
2024年11月6日


# Page. 2

![Page Image](https://bcdn.docswell.com/page/5JGYGYGWJL.jpg)

Who am I
亀崎 仁志
株式会社エーピーコミュニケーションズにて
Azure x Platform Engineeringに関する
サービス／プロダクト開発に従事
X @turtle2005
Linked in in/hitoshikamezaki


# Page. 3

![Page Image](https://bcdn.docswell.com/page/47QMXMXQEP.jpg)

What is Backstage
Backstage
独自拡張可能な開発者ポータルを作成するオープンソースフレームワーク。
この開発者ポータルは、一元化されたソフトウェアカタログを用いて、開発チー
ムがマイクロサービスやインフラストラクチャを一定の秩序を保ちつつも、チー
ムの自律性を損なうことなく、高品質のコード・サービスを素早くリリースでき
るようにするものです。


# Page. 4

![Page Image](https://bcdn.docswell.com/page/KE4V6V6Y71.jpg)

Spotify’s problem
Spotify社の成長の過程でおきた課題
「組織拡大の速度の維持」と「個別の製品開発の速度の維持」の両立が困難に。
その要因は以下のもの。
● Hard to find things
● Context switching
● Lack of standardization
● Infrastructure toil


# Page. 5

![Page Image](https://bcdn.docswell.com/page/L713V3VNEG.jpg)

Spotify’s solution
課題解決の３つのテーマ(CREATE / MANAGE / EXPLORE)
● CREATE
○
ベストプラクティスに沿った新しいソフトウェア（および開発環境）を数秒で作成
● MANAGE
○
組織がもつすべてのソフトウェア（ソフトウェア資産）を1箇所で集中管理
● EXPLORE
○
ソフトウェアエコシステム全体を探索し、組織全体でのコラボレーションを実現


# Page. 6

![Page Image](https://bcdn.docswell.com/page/G7WPLP3ME2.jpg)

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月時点）


# Page. 7

![Page Image](https://bcdn.docswell.com/page/4JZKMKVMJ3.jpg)

Core Features
主要3機能
● Software Catalog
● Software Template
● TechDocs
その他のCore Feature
● Kubernetes対応
● Search


# Page. 8

![Page Image](https://bcdn.docswell.com/page/YE6QNQ55EV.jpg)

デモ


# Page. 9

![Page Image](https://bcdn.docswell.com/page/GE5R5RYGJ4.jpg)

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]


# Page. 10

![Page Image](https://bcdn.docswell.com/page/972DNDGD7R.jpg)

Software Catalog
リソース内の情報をまとめて表示
DependabotやGitHub Actions, Issuesの表示
K8sのDeployment等のステータス表示


# Page. 11

![Page Image](https://bcdn.docswell.com/page/DJY2P2VMJM.jpg)

Software Catalog
様々な種類をサポート
● Core Entities :
○
Component / Resource / API
● Ecosystem Modeling :
○
System / Domain
● Organizational Entities :
○
User / Group
● Others :
○
Template / Location
Catalog Entity間の依存関係も表示可能


# Page. 12

![Page Image](https://bcdn.docswell.com/page/V7N858M3E8.jpg)

Software Template
組織内で利用可能なコードやIaCのテンプレートを公開


# Page. 13

![Page Image](https://bcdn.docswell.com/page/YJ9KYKNPJ3.jpg)

Software Template
いくつかの項目を入力して、
実行することで
● Git Repository作成
● PullReqとして登録
● コマンド実行
などが可能


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GJ8R6RKX7D.jpg)

TechDocs
ドキュメント表示（Mkdocs）
● リポジトリに記載されているMarkdownファイルを収集し、Backstage側で
HTMLに変換
● Searchを通じてリポジトリ横断で検索可能となる


# Page. 15

![Page Image](https://bcdn.docswell.com/page/LJLK9KZN7R.jpg)

TechDocs
Backstage内でドキュメントを表示
# Chocott-Backstageの使い方
## システム構成
[Backstage](https://backstage.io/) は
[Plugin](https://backstage.io/plugins) を組み込む
ことで様々な外部システムと連携することができます。
chocott-backstageでは GitHubと連携するPluginをいく
つか組み込んであります。
chocott-backstageのシステム構成を以下に示します。
![sytem-overview](./system-overview.drawio.png)


# Page. 16

![Page Image](https://bcdn.docswell.com/page/47M2Z2VQ7W.jpg)

TechDocs
組織のMarkdownドキュメントを一覧で表示


# Page. 17

![Page Image](https://bcdn.docswell.com/page/P7RM6M2KJ9.jpg)

Search
Catalog/Template/TechDocsなどのBackstageデータはSearch機能で検索可能


# Page. 18

![Page Image](https://bcdn.docswell.com/page/PJXVMVD5EX.jpg)

Kubernetes
deploymentなどの状況がBackstage内から確認可能


# Page. 19

![Page Image](https://bcdn.docswell.com/page/3JKQGQXRJD.jpg)

Backstageの構成
Frontend/Backend x plugins x IdP (x 外部サービス)


# Page. 20

![Page Image](https://bcdn.docswell.com/page/LE3PNP5GJ5.jpg)

How to “create” Backstage


# Page. 21

![Page Image](https://bcdn.docswell.com/page/8EDLWLDNJG.jpg)

How to “create” Backstage
Backstageはコードから生成するもの


# Page. 22

![Page Image](https://bcdn.docswell.com/page/V7P292XN78.jpg)

How to “create” Backstage
前提
●
●
●
●
Node.js(LTS)
yarn
git
docker (option)
TechDocsを利用する場合
● Python3
● mkdocs-techdocs-core (mkdocs plugin)


# Page. 23

![Page Image](https://bcdn.docswell.com/page/2JVDMDLYJQ.jpg)

How to “create” Backstage
実行環境
● データベース（デフォルトではPostgreSQL）
● TechDocsを格納するストレージ
○
○
ローカルストレージ
Cloud Storage
■ AWS S3 Bucket
■ Azure Blob Storage
■ Google GCS
■ OpenStack Swift Container


# Page. 24

![Page Image](https://bcdn.docswell.com/page/5EGYGYXWEL.jpg)

How to “create” Backstage
$ npx @backstage/create-app
実行すると以下の内容を含むフォルダ
ができあがる


# Page. 25

![Page Image](https://bcdn.docswell.com/page/4JQMXM8Q7P.jpg)

How to “create” Backstage
$ yarn install
$ yarn dev
上記を実行するとローカルPC上
で最小限構成のBackstageが起動
する。


# Page. 26

![Page Image](https://bcdn.docswell.com/page/K74V6V2YJ1.jpg)

How to “add” plugins
into your Backstage


# Page. 27

![Page Image](https://bcdn.docswell.com/page/LJ13V3MN7G.jpg)

How to “add” plugins into your Backstage
BackstageはPluginを追加することで
様々な機能を追加することが可能。
Pluginの例
https://backstage.io/plugins


# Page. 28

![Page Image](https://bcdn.docswell.com/page/GJWPLPDM72.jpg)

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(&#039;@backstage/plugin-catalog-backend&#039;));
backend.add(
import(&#039;@backstage/plugin-catalog-backend-module-scaffolder-entity-model&#039;),
);
backend.add(
import(&#039;@backstage/plugin-catalog-backend-module-github&#039;)
);
追加


# Page. 29

![Page Image](https://bcdn.docswell.com/page/4EZKMKGME3.jpg)

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 &#039;@backstage-community/plugin-github-actions&#039;;
// You can add the tab to any number of pages, the service page is shown as an
// example here
const serviceEntityPage = (
&lt;EntityLayout&gt;
{/* other tabs... */}
&lt;EntityLayout.Route path=&quot;/github-actions&quot; title=&quot;GitHub Actions&quot;&gt;
&lt;EntityGithubActionsContent /&gt;
&lt;/EntityLayout.Route&gt;
これらの内容を
追加


# Page. 30

![Page Image](https://bcdn.docswell.com/page/Y76QNQY57V.jpg)

It’s very troublesome


# Page. 31

![Page Image](https://bcdn.docswell.com/page/G75R5RGGE4.jpg)

I eliminated this troublesome for you
始めるには実に面倒なので
「ちょこっとBackstage」を作ってみました。
https://github.com/ap-communications/chocott-backstage
（2023年9月公開）


# Page. 32

![Page Image](https://bcdn.docswell.com/page/9J2DNDYDJR.jpg)

ちょこっとBackstage
● create-app実行
● @roadiehq/backstage-plugin-github-pull-requests 組み込み済み
● コンテナイメージ作成済 / compose.yaml 用意
必要なことは
●
●
GitHub Appの登録
docker compose up 実行
のみ。catalog entityのサンプルとして「ちょこっとBackstage」の情報が利用可能。
リポジトリのソースコードはそのままご利用いただいてもOK。


# Page. 33

![Page Image](https://bcdn.docswell.com/page/DEY2P2GMEM.jpg)

References


# Page. 34

![Page Image](https://bcdn.docswell.com/page/VJN858G378.jpg)

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に沿った定義方法をご紹介


# Page. 35

![Page Image](https://bcdn.docswell.com/page/YE9KYKWPE3.jpg)

References
Backstage
● Backstage.io / GitHub Repo : backstage
● Discord
もちろんAPCでも情報を多数発信しています。
● APC techblog (Backstage関連情報カテゴリはこちら）


# Page. 36

![Page Image](https://bcdn.docswell.com/page/GE8R6RNXJD.jpg)

References
Plugins
● Backstage Plugins / GitHub Repo: backstage/plugins
● Backstage community plugins (2024年2月にBackstage本体から分離）
● Spotify Marketplace
● Roadie RoadieHQ/roadie-backstage-plugins
● Janus IDP
● etc


# Page. 37

![Page Image](https://bcdn.docswell.com/page/LELK9KPNJR.jpg)

Fin


# Page. 38

![Page Image](https://bcdn.docswell.com/page/4JM2Z24QJW.jpg)

BACK Stack
BACK Stack( backstack.dev )
●
●
●
●
B: Backstage
A: ArgoCD
C: Crossplane
K: Kyverno
を組み合わせたもの。
APC Tech Blog より


# Page. 39

![Page Image](https://bcdn.docswell.com/page/PJRM6MWKE9.jpg)

BACK Stack Architecture
https://backstack.dev/arch/


# Page. 40

![Page Image](https://bcdn.docswell.com/page/PEXVMVP57X.jpg)

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)


