オープンソース開発者ポータル比較：Backstage vs Port でデベロッパーエクスペリエンスを改善する

大規模なエンジニアリング組織では「どのサービスが誰によって管理されているか」「どのAPIが使えるか」「デプロイ方法は何か」を一元的に把握することが困難になります。Backstage・Portはオープンソースのデベロッパーポータル（IDP: Internal Developer Portal）で、サービスカタログ・テンプレート・ドキュメントを一箇所に集約します。

デベロッパーポータルが解決する問題

• サービス発見: 社内に何のサービス・マイクロサービス・APIがあるかわからない
• オーナーシップ不明: 障害が起きたときに誰に連絡すればいいかわからない
• ゴールデンパス: 新しいサービスを立ち上げるたびに同じセットアップ作業が発生する
• ドキュメント散乱: 技術ドキュメントがWiki・Notion・コードコメントに分散している

主要ツールの概要

Backstage

Spotifyが開発しCNCFに寄贈したオープンソースのデベロッパーポータルプラットフォームです。プラグインエコシステムが豊富で、GitHub・Kubernetes・PagerDuty・CircleCI等との統合が揃っています。

# Backstageプロジェクトの作成
npx @backstage/create-app@latest
cd my-backstage-app
yarn dev  # ローカル起動（http://localhost:3000）

# catalog-info.yaml（サービスカタログに登録するメタデータ）
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: payment-service
  description: 決済処理マイクロサービス
  tags:
    - java
    - spring-boot
    - payments
  annotations:
    github.com/project-slug: my-org/payment-service
    backstage.io/techdocs-ref: dir:.
    pagerduty.com/service-id: P1234567
    kubernetes.io/label-selector: app=payment-service
spec:
  type: service
  lifecycle: production
  owner: group:payments-team
  system: ecommerce-platform
  dependsOn:
    - component:database-service
    - component:notification-service
  providesApis:
    - payment-api

# ソフトウェアテンプレート（新サービスの自動作成）
# template.yaml
apiVersion: scaffolder.backstage.io/v1beta3
kind: Template
metadata:
  name: new-microservice
  title: 新しいマイクロサービスを作成
spec:
  parameters:
    - title: サービス情報
      properties:
        serviceName:
          title: サービス名
          type: string
        description:
          title: サービスの説明
          type: string
        owner:
          title: オーナーチーム
          type: string

  steps:
    - id: fetch
      name: テンプレートを取得
      action: fetch:template
      input:
        url: ./skeleton
        values:
          serviceName: ${{ parameters.serviceName }}
          owner: ${{ parameters.owner }}

    - id: publish
      name: GitHubにリポジトリを作成
      action: publish:github
      input:
        repoUrl: github.com?repo=${{ parameters.serviceName }}&owner=my-org
        defaultBranch: main

    - id: register
      name: カタログに登録
      action: catalog:register
      input:
        repoContentsUrl: ${{ steps.publish.output.repoContentsUrl }}
        catalogInfoPath: /catalog-info.yaml

// カスタムプラグインの作成（バックエンド）
import { createPlugin, createRoutableExtension } from '@backstage/core-plugin-api';

export const myPlugin = createPlugin({
  id: 'my-custom-plugin',
  routes: {
    root: rootRouteRef,
  },
});

export const MyPage = myPlugin.provide(
  createRoutableExtension({
    name: 'MyPage',
    component: () => import('./components/MyPage').then(m => m.MyPage),
    mountPoint: rootRouteRef,
  }),
);

Port

より現代的なUIとノーコード設定を持つデベロッパーポータルです。オープンソース版とSaaS版があり、カスタムエンティティ・自動化・セルフサービスアクションをGUIで設定できます。

// Port Blueprintの定義（サービスの形を定義）
{
  "identifier": "microservice",
  "title": "マイクロサービス",
  "icon": "Service",
  "schema": {
    "properties": {
      "language": {
        "type": "string",
        "enum": ["Python", "Java", "Go", "TypeScript"]
      },
      "team": {"type": "string"},
      "tier": {
        "type": "string",
        "enum": ["critical", "high", "medium", "low"]
      },
      "healthEndpoint": {"type": "string", "format": "url"},
      "deploymentCount": {"type": "number"}
    },
    "required": ["language", "team"]
  }
}

機能比較表

比較項目	Backstage	Port
サービスカタログ	✅	✅
ソフトウェアテンプレート	✅ 高機能	✅
TechDocs（ドキュメント）	✅	❌
プラグインエコシステム	✅ 200+	✅
ノーコード設定	❌	✅
セルフサービスアクション	✅	✅
Kubernetes統合	✅	✅
GitHub/GitLab統合	✅	✅
PagerDuty/OpsGenie	✅	✅
カスタムエンティティ	✅	✅ 直感的
セルフホスト	✅	✅（OSS版）
UIの現代性	★★★☆☆	★★★★★
設定の容易さ	★★☆☆☆	★★★★☆
ライセンス	Apache 2.0	MIT
GitHub Stars	29k+	1k+

BackstageのTechDocs（ドキュメントポータル）

# mkdocs.yml（TechDocs用）
site_name: Payment Service
docs_dir: docs/
nav:
  - Overview: index.md
  - API: api.md
  - Runbook: runbook.md
  - Architecture: architecture.md

plugins:
  - techdocs-core

開発者ツール・ドキュメント管理ツールはDevOpsカテゴリ（/categories/devops）で一覧でき、ナレッジ管理ツールはknowledgeカテゴリ（/categories/knowledge）でも探せます。

FAQ

Q. Backstageを導入するにはどれくらいのエンジニアリングリソースが必要ですか？

A. 初期セットアップは1〜2週間で完了します。ただし社内サービスのカタログ登録（catalog-info.yamlを各リポジトリに追加）・既存ツールとのプラグイン統合・テンプレートの作成に3〜6ヶ月かかることが多いです。10人以上のエンジニア組織で、Developer Experienceに1人以上を専任できる場合に投資対効果が出やすいです。

Q. 小規模チーム（5〜10人）にもデベロッパーポータルは必要ですか？

A. 5〜10人規模では通常不要です。Notionのサービス一覧ページ・GitHubのREADMEで代替できます。チームが20〜30人規模になり「あのサービスの担当者は誰？」「デプロイ方法がわからない」という声が出始めたタイミングで導入を検討するのが現実的です。

Q. BackstageのカタログはGitHubのリポジトリを自動的に発見できますか？

A. はい。GitHub統合プラグインを設定すると、GitHub Organizationのすべてのリポジトリをスキャンしてcatalog-info.yamlが存在するリポジトリを自動的にカタログに取り込みます。ただし各リポジトリにcatalog-info.yamlを追加する作業は手動またはスクリプトが必要です。

Q. BackstageのSoftware Templateと既存のCookiecutterの違いは？

A. CookiecutterはCLIでプロジェクトのスケルトンを生成するツールです。BackstageのSoftware Templateはウェブブラウザから実行でき、GitHubリポジトリ作成・カタログ登録・Slackへの通知・CI設定・インフラプロビジョニングまでを一連のワークフローとして自動化できます。「開発者がフォームを埋めるだけで本番環境対応のサービスが5分で立ち上がる」ゴールデンパスの実現に使われます。

まとめ

ユースケース	推奨ツール
大規模組織のデベロッパーポータル	Backstage
ノーコードで素早く始める	Port
TechDocs（ドキュメントサイト統合）	Backstage
カスタムエンティティ・GUIで設定	Port

関連外部リソース

• Backstage GitHubリポジトリ↗
• Port GitHubリポジトリ↗
• CNCFのIDPワーキンググループ↗
• Backstageプラグインマーケットプレイス↗