Backstage のプラグイン使って色々可視化してみた

10K Views

March 22, 24

スライド概要

profile-image
スライド一覧

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 4.23MB)

関連スライド

slide-thumbnail

SRE文化の導入とプラットフォームの信頼性向上の取り組み
user-img mugi 18.5K
slide-thumbnail

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0
ue4 ue5 ue-beginner
user-img エピック ゲームズ ジャパン 1.3M
slide-thumbnail

Unreal Engine5 Lumenの仕組みと肝心なところ
ue5 ue-rendering ue-lumen
user-img エピック ゲームズ ジャパン 1.1M
slide-thumbnail

最新の6.0で学ぶ！初めてのひとのためのSpring Security
java spring security
user-img tada 1M
slide-thumbnail

SQL滅ぶべし
user-img 株式会社ホクソエム 857.4K
slide-thumbnail

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】
ue5 cedec+kyushu ue-animation ue-optimize ue-bp ue-physics ue-sequencer
user-img エピック ゲームズ ジャパン 825.1K
各ページのテキスト
1.

Backstage勉強会【Platform Engineering Meetup Online#1】 Backstage のプラグイン使って ⾊々可視化してみた

2.

⾃⼰紹介 名前: 岡 ⻨ 所属: 株式会社CAM SRE Unit 趣味: スノーボード、キャンプ、バイク @mugiokax @mugioka

3.

アジェンダ 01 プラグインとは？ 02 Backstage で解決したい課題 03 プラグインによる可視化 04 終わりに

4.

01 プラグインとは？

5.

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 を構成するソフトウェアコンポーネント

6.

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

7.

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

8.

01 プラグインとは？ 1. frontend-plugin Backstage 利用者に UI（React Component）を提供するプラグイ ン。 e.g. @backstage/plugin-kubernetes https://backstage.io/docs/overview/architecture-overview/#package-architecture

9.

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

10.

01 プラグインとは？ 3. backend-plugin frontend-plugin にデータを提供 したり、内部処理を行うプラグイ ン。（e.g. AuthN/AuthZ） e.g. @backstage/plugin-kubernetesbackend https://backstage.io/docs/overview/architecture-overview/#package-architecture

11.

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

12.

01 プラグインとは？ 5. web-library frontend-plugin から利用される 共通ライブラリ。 e.g. @backstage/plugin-kubernetesreact https://backstage.io/docs/overview/architecture-overview/#package-architecture

13.

01 プラグインとは？ 6. node-library backend-plugin から利用される 共通ライブラリ。 e.g. @backstage/plugin-kubernetesnode https://backstage.io/docs/overview/architecture-overview/#package-architecture

14.

01 プラグインとは？ 7. common-library frontend-plugin/backend-plugin から利用される共通ライブラリ。 e.g. @backstage/plugin-kubernetescommon https://backstage.io/docs/overview/architecture-overview/#package-architecture

15.

02 Backstage で解決したい課題

16.

02 Backstage で解決したい課題 開発に必要な情報が⾊々な場所に散らばっている 開発者が開発を行う際、様々な情報を必要とし参照 しています。 「GitHub」、「CI/CD ツール」、「ロギング・モニタリング ツール」、「パブリッククラウド管理画面」、「ドキュメン ト」などです。 それら情報を提供する情報源は、深く情報を詮索す るためにはこの上なく便利なものです。 しかし、情報の分散が進んだ結果、認知負荷が高ま りサービス開発の速度に影響を及ぼしていまう場合 があります。

17.

02 Backstage で解決したい課題 ⼀つのポータルに全ての情報を集約したい

18.

Backstage で様々な情報を 閲覧可能にするには、 プラグインの活⽤が必要

19.

03 プラグインによる可視化

20.

03 プラグインによる可視化 Kubernetes Plugin

21.

03 プラグインによる可視化 Kubernetes Plugin 詳細な情報はダッシュボード で確認

22.

03 プラグインによる可視化 Kubernetes Plugin ログも確認で きる

23.

03 プラグインによる可視化 Argo CD Plugin 詳細な情報はダッシュボード で確認 複数の Argo CD インスタンス（ e.g development/staging）の情報を一つのポータルで閲覧できる

24.

03 プラグインによる可視化 Argo CD Plugin へのコントリビューティング https://github.com/RoadieHQ/roadie-backstage-plugins/pull/1223

25.

03 プラグインによる可視化 Google Cloud Build Plugin 詳細な情報はダッシュボード で確認

26.

03 プラグインによる可視化 SonarQube Plugin 詳細な情報はダッシュボード で確認

27.
28.

03 プラグインによる可視化 まとめ 「Backstage を開発に必要な様々な情報へのインターフェースとして活⽤」 紹介したプラグインはほんの⼀例であり、さまざまなプラグインがコミュニティによって開発されています。 それらプラグインを活⽤することで以下のようなメリットが享受できるでしょう（もちろん他にもメリットありま す）。 - 開発に必要な情報の「概要」を 1 つのポータルで閲覧できる 詳細な情報を知りたくなった時は情報源（e.g. ダッシュボード）にアクセスする プラグインの⼀覧を探検してみたい⽅は下記リンクへ！！ https://backstage.io/plugins/

29.

04 終わりに

30.

04 終わりに デモサイト https://demo.backstage.io/ https://showcase.janus-idp.io/

31.

04 終わりに 付録 backstage/backstage リポジトリでは「コミュニティによる プラグインの追加」は受け付ていないらしい。 今後は backstage/community-plugins リポジトリでプラグイ ンの追加を受け付けるみたい。 みんなで盛り上げていきましょう！！

32.

04 終わりに ⼀緒に働く仲間を募集しています 詳細は下記リンクでご確認ください！！ https://cam-inc.co.jp/p/recruit テックブログはこちら https://cam-inc.co.jp/p/techblog

33.

ご清聴ありがとうございま した！！