🏠 Backstageプロジェクト構造を深掘り: ブラウザ用ウェブアプリはどこにある？

6月 29, 2026

—

こんにちは！今日は、Backstageをカスタマイズしたりプラグインを追加したりする際に、まず最初に把握すべき重要な情報、つまりプロジェクト構造について詳しく見ていきましょう。🚀

Backstageは、多数のパッケージが一つにまとめられたモノレポ(Monorepo)構造を持っています。プロジェクトを初めて作成すると、たくさんのフォルダの中で「一体、ユーザーがアクセスしたときに表示される画面（ウェブアプリ）のコードはどこにあるんだろう？」という疑問が湧くものです。今日はその疑問を完全に解決します！💡

📍 答え: ウェブアプリの拠点、packages/app

Backstageのデフォルトプロジェクト構造において、ユーザーのブラウザに表示されるフロントエンドのウェブアプリは、次のパスに位置しています。

📂 /packages/app

Backstageは、バックエンド(packages/backend)とフロントエンド(packages/app)が明確に分離された構造を持っています。私たちがブラウザを通じてアクセスするすべてのUIとページ構成は、このappフォルダ内で行われます。

🔍 packages/appフォルダの内部を覗いてみよう 🕵️‍♂️

単に場所を知るだけでは不十分ですよね？packages/appフォルダがどのように構成されているか、詳しく見ていきましょう。

1. src/App.tsx (メインゲート) 🚪

このファイルはBackstageフロントエンドの心臓部です。

すべてのルーティング(Routing)設定がここで管理されます。
どのプラグインがどのURLパス（/catalog、/docsなど）に表示されるかを定義します。
サイドバーメニューの構成とアプリ全体のテーマを接続する場所でもあります。

2. src/components/ (UI組み立てブロック) 🧩

ここには、アプリ全体で使用されるUIコンポーネントが含まれています。

Root.tsx: サイドバー(Sidebar)のロゴやメニュー構成を変更したい場合は、このファイルを修正する必要があります。
catalog/EntityPage.tsx: サービス詳細ページのレイアウト（どのカードを配置するかなど）を決定する非常に重要なファイルです。

3. public/ (静的リソース) 🖼️

ブラウザから直接アクセスできる静的ファイルが保管されます。

favicon.ico、index.html、そしてロゴ画像ファイルなどがここに位置します。

🏗️ なぜpackages/の下にあるの？ (モノレポの魔法)

Backstageがpackages/appとpackages/backendに分かれている理由は、拡張性のためです。

関心の分離: フロントエンド開発者はappフォルダ内のReactコードにのみ集中し、バックエンド開発者はbackendフォルダ内のNode.jsロジックに集中できます。🛠️
プラグインアーキテクチャ: Backstageは多数の外部プラグインを組み合わせて完成します。appパッケージは、これらのプラグインのUIを一つにまとめて表示するコンテナの役割を果たします。📦
独立したビルド: 必要に応じてフロントエンドとバックエンドを独立してビルドまたはデプロイできる柔軟性を提供します。🏎️

💡 実践ヒント: UIを修正したいときのチェックリスト

もしBackstageの画面を変更したい場合は、次の手順を覚えておきましょう！

サイドバーのアイコンやメニューを変更したい？ ➡️ packages/app/src/components/Root.tsx
新しいプラグインページを追加したい？ ➡️ packages/app/src/App.tsxでRouteを追加
カタログ詳細画面のタブを調整したい？ ➡️ packages/app/src/components/catalog/EntityPage.tsx
ブラウザタブの名前やアイコンを変更したい？ ➡️ packages/app/public/index.html

🏁 結論: すべてのUIはpackages/appから始まる

Backstageという巨大なシステムにおいて、ユーザーと出会う最前線はまさにpackages/appです。この構造を理解するだけで、Backstageのカスタマイズの50%は成功したも同然です！🚀

さあ、ためらわずにpackages/appフォルダを開いて、あなただけの素晴らしい開発者ポータルを描いてみましょう。🎨