関連スライド
各ページのテキスト
Backstage勉強会【Platform Engineering Meetup Online#1】 Backstage のプラグイン使って ⾊々可視化してみた
⾃⼰紹介 名前: 岡 ⻨ 所属: 株式会社CAM SRE Unit 趣味: スノーボード、キャンプ、バイク @mugiokax @mugioka
アジェンダ 01 プラグインとは？ 02 Backstage で解決したい課題 03 プラグインによる可視化 04 終わりに
01 プラグインとは？
01 プラグインとは？ 公式ドキュメントの定義 Backstage is a single-page application composed of a set of plugins. Our goal for the plugin ecosystem is that the definition of a plugin is flexible enough to allow you to expose pretty much any kind of infrastructure or software development tool as a plugin in Backstage. By following strong design guidelines we ensure the overall user experience stays consistent between plugins. Backstageは、プラグインのセットで構成されるシングルページのアプリケーションです。 プラグインのエコシステムに対する私たちの⽬標は、プラグインの定義が柔軟で、あらゆる種類のインフラストラク チャやソフトウェア開発ツールをBackstageのプラグインとして公開できるようにすることです。強⼒なデザイン‧ ガイドラインに従うことで、全体的なユーザー‧エクスペリエンスがプラグイン間で⼀貫していることを保証しま す。 プラグイン = Backstage を構成するソフトウェアコンポーネント
01 プラグインとは？ Backstage を構成するプラグイン 1. 2. 3. 4. 5. 6. 7. frontend-plugin frontend-plugin-module backend-plugin backend-plugin-module web-library node-library common-library 各プラグインの package.json で role が定義されている https://github.com/backstage/backstage/blob/623eaf602ffb5f72ce02ced99247e8c3b0ead0c0/packages/cli-node/src/roles/types.ts#L22-L 32
01 プラグインとは？ プラグインのアーキテクチャ frontend-plugin: plugin-<plugin-id> frontend-plugin-module: plugin-<plugin-id>-module-<module-id> backend-plugin: plugin-<plugin-id>-backend backend-plugin-module: plugin-<plugin-id>-backend-module-<module-id> web-library: plugin-<plugin-id>-react node-library: plugin-<plugin-id>-node common-library: plugin-<plugin-id>-common https://backstage.io/docs/overview/architecture-overview/#package-architecture
01 プラグインとは？ 1. frontend-plugin Backstage 利用者に UI（React Component）を提供するプラグイ ン。 e.g. @backstage/plugin-kubernetes https://backstage.io/docs/overview/architecture-overview/#package-architecture
01 プラグインとは？ 2. frontend-plugin-module frontend-plugin のインターフェース を実装する拡張プラグイン。 e.g. @backstage/plugin-cicd-statistics-m odule-gitlab https://backstage.io/docs/overview/architecture-overview/#package-architecture
01 プラグインとは？ 3. backend-plugin frontend-plugin にデータを提供 したり、内部処理を行うプラグイ ン。（e.g. AuthN/AuthZ） e.g. @backstage/plugin-kubernetesbackend https://backstage.io/docs/overview/architecture-overview/#package-architecture
01 プラグインとは？ 4. backend-plugin-module backend-plugin のインターフェー スを実装する拡張プラグイン。 e.g. @backstage/plugin-auth-backe nd-module-google-provider https://backstage.io/docs/overview/architecture-overview/#package-architecture
01 プラグインとは？ 5. web-library frontend-plugin から利用される 共通ライブラリ。 e.g. @backstage/plugin-kubernetesreact https://backstage.io/docs/overview/architecture-overview/#package-architecture
01 プラグインとは？ 6. node-library backend-plugin から利用される 共通ライブラリ。 e.g. @backstage/plugin-kubernetesnode https://backstage.io/docs/overview/architecture-overview/#package-architecture
01 プラグインとは？ 7. common-library frontend-plugin/backend-plugin から利用される共通ライブラリ。 e.g. @backstage/plugin-kubernetescommon https://backstage.io/docs/overview/architecture-overview/#package-architecture
02 Backstage で解決したい課題
02 Backstage で解決したい課題 開発に必要な情報が⾊々な場所に散らばっている 開発者が開発を行う際、様々な情報を必要とし参照 しています。 「GitHub」、「CI/CD ツール」、「ロギング・モニタリング ツール」、「パブリッククラウド管理画面」、「ドキュメン ト」などです。 それら情報を提供する情報源は、深く情報を詮索す るためにはこの上なく便利なものです。 しかし、情報の分散が進んだ結果、認知負荷が高ま りサービス開発の速度に影響を及ぼしていまう場合 があります。
02 Backstage で解決したい課題 ⼀つのポータルに全ての情報を集約したい
Backstage で様々な情報を 閲覧可能にするには、 プラグインの活⽤が必要
03 プラグインによる可視化
03 プラグインによる可視化 Kubernetes Plugin
03 プラグインによる可視化 Kubernetes Plugin 詳細な情報はダッシュボード で確認
03 プラグインによる可視化 Kubernetes Plugin ログも確認で きる
03 プラグインによる可視化 Argo CD Plugin 詳細な情報はダッシュボード で確認 複数の Argo CD インスタンス（ e.g development/staging）の情報を一つのポータルで閲覧できる
03 プラグインによる可視化 Argo CD Plugin へのコントリビューティング https://github.com/RoadieHQ/roadie-backstage-plugins/pull/1223
03 プラグインによる可視化 Google Cloud Build Plugin 詳細な情報はダッシュボード で確認
03 プラグインによる可視化 SonarQube Plugin 詳細な情報はダッシュボード で確認
03 プラグインによる可視化 GitHub Pull Requests Plugin
03 プラグインによる可視化 まとめ 「Backstage を開発に必要な様々な情報へのインターフェースとして活⽤」 紹介したプラグインはほんの⼀例であり、さまざまなプラグインがコミュニティによって開発されています。 それらプラグインを活⽤することで以下のようなメリットが享受できるでしょう（もちろん他にもメリットありま す）。 - 開発に必要な情報の「概要」を 1 つのポータルで閲覧できる 詳細な情報を知りたくなった時は情報源（e.g. ダッシュボード）にアクセスする プラグインの⼀覧を探検してみたい⽅は下記リンクへ！！ https://backstage.io/plugins/
04 終わりに
04 終わりに デモサイト https://demo.backstage.io/ https://showcase.janus-idp.io/
04 終わりに 付録 backstage/backstage リポジトリでは「コミュニティによる プラグインの追加」は受け付ていないらしい。 今後は backstage/community-plugins リポジトリでプラグイ ンの追加を受け付けるみたい。 みんなで盛り上げていきましょう！！
04 終わりに ⼀緒に働く仲間を募集しています 詳細は下記リンクでご確認ください！！ https://cam-inc.co.jp/p/recruit テックブログはこちら https://cam-inc.co.jp/p/techblog
ご清聴ありがとうございま した！！