ストーリー

Backstageのアーキテクチャ

コア構成

Backstage のアーキテクチャ:

Frontend（React SPA）:
  ├── @backstage/core-components    # 共通UIコンポーネント
  ├── @backstage/plugin-catalog     # サービスカタログUI
  ├── @backstage/plugin-scaffolder  # テンプレートUI
  ├── @backstage/plugin-techdocs    # ドキュメントUI
  └── カスタムプラグイン             # 独自機能

Backend（Node.js）:
  ├── @backstage/backend-core       # バックエンドフレームワーク
  ├── Catalog Backend               # サービスカタログAPI
  ├── Scaffolder Backend            # テンプレート実行エンジン
  ├── TechDocs Backend              # ドキュメントビルダー
  ├── Auth Backend                  # 認証（OAuth、SAML等）
  └── カスタムバックエンドプラグイン

Database:
  └── PostgreSQL                    # メタデータストア

主要プラグイン

catalog-info.yaml の設計

エンティティの種類

catalog-info.yaml の例

# payment-service/catalog-info.yaml
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: payment-service
  description: "決済処理マイクロサービス"
  tags:
    - typescript
    - nestjs
    - production
  annotations:
    github.com/project-slug: cloudops/payment-service
    backstage.io/techdocs-ref: dir:.
    datadoghq.com/service-name: payment-service
    argocd/app-name: payment-service
    pagerduty.com/service-id: P1234567
  links:
    - url: https://payment.api.cloudops.io/docs
      title: API Documentation
      icon: docs
    - url: https://app.datadoghq.com/dashboard/xxx
      title: Datadog Dashboard
      icon: dashboard
spec:
  type: service
  lifecycle: production
  owner: payment-team
  system: payment-system
  providesApis:
    - payment-api
  consumesApis:
    - user-api
    - notification-api
  dependsOn:
    - resource:payment-db
    - resource:payment-redis
---
apiVersion: backstage.io/v1alpha1
kind: API
metadata:
  name: payment-api
  description: "Payment Service REST API"
spec:
  type: openapi
  lifecycle: production
  owner: payment-team
  system: payment-system
  definition:
    $text: ./openapi.yaml
---
apiVersion: backstage.io/v1alpha1
kind: Resource
metadata:
  name: payment-db
  description: "Payment Service PostgreSQL Database"
spec:
  type: database
  owner: payment-team
  system: payment-system

認証とアクセス管理

認証プロバイダ

Backstageの権限モデル

# app-config.yaml の認証設定例
auth:
  environment: production
  providers:
    github:
      production:
        clientId: ${GITHUB_CLIENT_ID}
        clientSecret: ${GITHUB_CLIENT_SECRET}

permission:
  enabled: true
  # チーム単位のアクセス制御
  # Component の編集は owner のみ
  # テンプレートの実行は全開発者
  # 管理機能はプラットフォームチームのみ

Backstageの運用

デプロイ方法

メンテナンスの考慮点

「Backstageの導入で最も重要なのは、catalog-info.yamlの品質だ。情報が古ければIDPの価値はゼロになる。各チームが自分のサービス情報を最新に保つ文化を作ることが成功の鍵」 — 田中VPoE

まとめ

チェックリスト

• Backstageのアーキテクチャ（Frontend + Backend + DB）を説明できる
• 主要なプラグインの種類と用途を理解した
• catalog-info.yamlのエンティティ定義を記述できる
• 認証設定と運用方法を理解した

次のステップへ

次は「サービスカタログの設計」を学びます。組織のすべてのサービスを一元管理するカタログの設計方法を身につけましょう。

推定読了時間: 30分