Headlampと独自プラグインを活用したKubernetesダッシュボードの機能拡張

HeadlampはKubernetesリソースをブラウザで直接確認・操作できるダッシュボードで、プラグインを追加することで用途に合わせて機能を拡張できます。本発表では、Headlampの基本的な機能を紹介しつつ、プラグインを活用して自社のKubernetes環境に合わせたダッシュボードを構築した事例を取り上げ、UX改善のために行った工夫や実装のポイントを共有します。

Transcript

1. Headlampと独自プラグインを活用した Kubernetesダッシュボードの機能拡張 Hirotaka Akita, Preferred Networks, Inc. 2025-11-25 Kubernetes Meetup Tokyo #72
2. 2 • 秋田大空 (AKITA Hirotaka) • Preferred Networks, Inc. (PFN) • 機械学習プラットフォーム ◦ https://pfcomputing.com/ (PFCP) ◦ ベアメタルからinfra， back, frontまで全部やるチーム ◦ MLOps ◦ ユーザサポート 自己紹介
3. 3 KubernetesのダッシュボードであるHeadlampは TypeScriptでPluginを書くことで自由度高く拡張できる Take Home Message
4. 4 背景: Preferred Computing Platform (PFCP) の概要 • PFN が構築、運用する深層学習・AIワークロード向けのクラウドサービス ◦ コンテナ実行環境としてKubernetesを採用 ◦ https://pfcomputing.com/ (2024年10月に利用受付を開始) ◦ ユーザガイド: https://docs.pfcomputing.com/ • PFN のエンジニア・リサーチャーが使用する環境と同じものを提供 ◦ これまで社内向けに計算基盤を開発運用してきた経験を元に開発 • 強力な計算ボードと高速なネットワーク ◦ 独自開発したアクセラレータ MN-Core™ シリーズを提供 ◦ 深層学習に最適化された高速なネットワークで相互に接続
5. 5 背景: 社内には二種類のKubernetesクラスタが存在する • (旧)社内クラスタ ◦ 社内のワークロードに特化して作り込み ◦ 独自のダッシュボード，独自のスケジューラ, etc. ... • (新)社内クラスタ(PFCP仕様) ◦ 売り物としてのPFCPと仕様を統一 ▪ メンテコストの削減 ▪ 社内で試してもらうことで製品としてのクオリティを向上 ◦ ユーザビリティを維持しつつ展開しやすくする必要
6. 6 課題: クラスタの状況を気軽に確認・操作したい • クラスタの利用状況を手軽に確認したいことがある ◦ 社内には様々なバックグラウンドのユーザが存在する ◦ ブラウザからアクセスできるくらいの手軽さがほしい • 旧社内クラスタでは独自のダッシュボードシステムがあった ◦ 独自実装でPFCPに展開するのが難しい • OSSで使いやすいダッシュボードシステムがないだろうか？
7. 7 • Kubernetesのダッシュボードシステム ◦ https://headlamp.dev • 現在はkubernetes-sigsでメンテされてい る(kubernetes-UIに移管予定) ◦ https://github.com/kubernetes-si gs/headlamp • DesktopAppとしてもKubernetesクラス タ内部にデプロイしても使える ◦ 今日はKubernetesクラスタに デプロイするユースケースを紹介 Headlamp: Kubernetesのダッシュボードシステム
8. 8 HeadlampのKubernetesクラスタへの導入: helmで簡単に導入可能 • https://headlamp.dev/docs/latest/installation/in-cluster/ # ローカルリポジトリに headlampのカスタムrepoを追加 $ helm repo add headlamp https://kubernetes-sigs.github.io/headlamp/ # Helm経由でheadlampをインストール $ helm install my-headlamp headlamp/headlamp --namespace kube-system
9. 9 Headlampの利点1: resourceの閲覧だけでなく編集やattachなどが可能
10. Headlampの利点1: resourceの閲覧だけでなく編集やattachなどが可能
11. 11 Headlampの利点2: OpenID Connect（OIDC）による認証が可能 • 公式機能だけでoidc認証が使える ◦ https://headlamp.dev/docs/latest/installation/in-cluster/oidc/ • ユーザ権限でk8sのリソースを確認・操作できる • backendにapi-proxyがあり，そこに払い出したtokenを使ってアクセス • tokenはcookieに保存される backend (api-proxy) k8s api-server popupで認証し codeとtokenを交換 k8s api 呼び出し frontend
12. 12 Headlampの利点3: pluginを用いて機能を拡張できる • headlampはplugin機能が充実している ◦ https://github.com/headlamp-k8s/plugins ◦ https://headlamp.dev/docs/latest/development/plugins/ • サードパーティのpluginをそのまま導入することができる ◦ fluxを導入しているクラスタにfluxのpluginを導入 ◦ ユーザがPrometheusのmetricsを閲覧しやすいように Prometheusのpluginを導入 • headlamp-pluginというライブラリを使うことで Typescriptを用いて独自のpluginを書くこともできる ◦ デプロイ時は特定のパスにバンドルされたjsファイルを置くだけ
13. 13 他の選択肢: Kubernetes-Dashboard • 以前からあるKubernetes公式のDashboardシステム ◦ https://github.com/kubernetes/dashboard • 今回は以下の理由から選択せず ◦ (公式機能で)oidc未対応 ◦ サイドバーが変更不可 ◦ 独自CRの対応が難しい
14. 14 Pluginの書き方: @kinvolk/headlamp-plugin を使う • プラグインを書くライブラリにcliが付属している # 新しいプラグインを作成 $ npx --yes @kinvolk/headlamp-plugin create my-first-plugin # プラグインディレクトリに移動 $ cd my-first-plugin # 依存ライブラリをインストール $ npm install my-first-plugin/ ├── src/ │ └── index.tsx # Main plugin entry point ├── package.json # Plugin metadata and dependencies ├── tsconfig.json # TypeScript configuration ├── dist/ # Built plugin files (created after build) └── README.md # Plugin documentation
15. 15 Pluginの書き方: src/index.tsxを編集する • src/index.tsx にplugin用のコードを書く • @kinvolk/headlamp-plugin がexportしている関数やライブラリしか使えないので注意 • コードが書けたらnpm run start • localhostでheadlampを起動していれば自動でpluginが適用される ◦ 右上にhelloの要素が表示された import { registerAppBarAction } from '@kinvolk/headlamp-plugin/lib'; // Below are some imports you may want to use. // See README.md for links to plugin development documentation. // import { SectionBox } from '@kinvolk/headlamp-plugin/lib/CommonComponents'; // import { K8s } from '@kinvolk/headlamp-plugin/lib/K8s'; // import { Typography } from '@mui/material'; registerAppBarAction(<span>Hello</span>);
16. 16 Kubernetesクラスタへのpluginのデプロイ: 指定されたディレクトリに配置する • npm run build でdist/ 以下にbundleされたjsファイルが生成されるので，それをコピーする • ここでは /headlamp/pluginsにファイルを配置すれば良い apiVersion: apps/v1 kind: Deployment metadata: name: headlamp-with-flux ... template: spec: initContainers: - name: fetch-plugins image: ghcr.io/headlamp-k8s/headlamp-plugin-flux:latest # Copy the plugins command: ["/bin/sh", "-c"] args: ["cp -r /plugins/* /headlamp/plugins/ && ls -l /headlamp/plugins"] volumeMounts: - name: plugins mountPath: /headlamp/plugins
17. 17 PFCPにおける機能拡張1: ユーザが権限を持たないリソースは表示しない • デフォルトの設定ではPersistentVolumesやGateway APIなど， PFCPにおいてユーザが操作できないリソースもサイドバーに表示されている ◦ 利用できないリソースが表示されているのはストレス • registerSidebarEntryFilter という関数で 表示するリソースを制限できる
18. 18 PFCPにおける機能拡張2: PFCP独自のCustom ResourceのViewer • PFCPではユーザにいくつかの独自Custom Resourceを提供している • HeadlampのResourceのページはReact Componentの組み合わせでできている ◦ headlamp-plugin のライブラリを使い これらのComponentを拡張することで 独自CustomResourceについても好き なようにViewerを作れる • 右の画面はReservedNodeという 独自CRのViewer
19. 19 PFCPにおける機能拡張3: よく使うconfigを自動で設定 • ここまでの話はreact componentを中心に扱っ てきた • pluginはtypescriptで書くので かなり自由度の高い操作が可能 • DefaultHeadlampEvents.PLUGINS_LOADED というトリガを使うとpluginがロードされた時に 任意の処理が実行できる • PFCPでは，以下のような設定を自動で localStorageに注入している ◦ 閲覧できるprometheusのserverのURL (組織ごとに異なる) ◦ 権限を持つnamespaceの一覧 (ユーザごとに異なる)
20. 20 PFCPにおける機能拡張4: IdPのsessionを使い回して認証回数を削減 • oidc認証で払い出されるtokenは有効期限が短いが そのままだと何度もログイン画面を経由した認証を求められてしまう ◦ auth0のセッションがあればiframeを使って認証処理をこっそり行う(サイレントログイン) ◦ /external-proxy エンドポイントを活用しfrontにはtokenを漏らさない • /login をこの処理をするページにルーティング ◦ 再認証が必要になったタイミングでサイレントログインが動作 frontend backend (api-proxy) k8s api-server IdPのsessionがなければ popupで認証&code取得 headerにjwt付与 /external-proxy経由で IdPのsessionがある限りサイレントログイン k8s api 呼び出し ALB backend (header検証) headerをfrontに渡す
21. 21 KubernetesのダッシュボードであるHeadlampは TypeScriptでPluginを書くことで自由度高く拡張できる 再びTake Home Message
22. Making the real world computable