Merge pull request #28774 from awanlin/docs/kubernetes-backend-clean-up

Cleaned up the Kubernetes Backend Installation
This commit is contained in:
Andre Wanlin
2025-02-13 09:46:41 -06:00
committed by GitHub
+22 -119
View File
@@ -7,20 +7,17 @@ description: Installing Kubernetes plugin into Backstage
The Kubernetes feature is a plugin to Backstage, and it is exposed as a tab when
viewing entities in the software catalog.
If you haven't setup Backstage already, read the
[Getting Started](../../getting-started/index.md) guide.
If you haven't set up Backstage already, read the [Getting Started](../../getting-started/index.md) guide.
## Adding the Kubernetes frontend plugin
The first step is to add the Kubernetes frontend plugin to your Backstage
application.
The first step is to add the Kubernetes frontend plugin to your Backstage application.
```bash title="From your Backstage root directory"
yarn --cwd packages/app add @backstage/plugin-kubernetes
```
Once the package has been installed, you need to import the plugin in your app
by adding the "Kubernetes" tab to the respective catalog pages.
Once the package has been installed, you need to import the plugin in your app by adding the "Kubernetes" tab to the respective catalog pages.
```tsx title="packages/app/src/components/catalog/EntityPage.tsx"
/* highlight-add-next-line */
@@ -40,73 +37,17 @@ const serviceEntityPage = (
);
```
**Notes:**
:::note Note
- The optional `refreshIntervalMs` property on the `EntityKubernetesContent` defines the interval in which the content automatically refreshes, if not set this will default to 10 seconds.
The optional `refreshIntervalMs` property on the `EntityKubernetesContent` defines the interval in which the content automatically refreshes, if not set this will default to 10 seconds.
That's it! But now, we need the Kubernetes Backend plugin for the frontend to
work.
:::
That's it! But now, we need the Kubernetes Backend plugin for the frontend to work.
## Adding Kubernetes Backend plugin
Navigate to `packages/backend` of your Backstage app, and install the
`@backstage/plugin-kubernetes-backend` package.
```bash title="From your Backstage root directory"
yarn --cwd packages/backend add @backstage/plugin-kubernetes-backend
```
Create a file called `kubernetes.ts` inside `packages/backend/src/plugins/` and
add the following:
```ts title="packages/backend/src/plugins/kubernetes.ts"
import { KubernetesBuilder } from '@backstage/plugin-kubernetes-backend';
import { Router } from 'express';
import { PluginEnvironment } from '../types';
import { CatalogClient } from '@backstage/catalog-client';
export default async function createPlugin(
env: PluginEnvironment,
): Promise<Router> {
const catalogApi = new CatalogClient({ discoveryApi: env.discovery });
const { router } = await KubernetesBuilder.createBuilder({
logger: env.logger,
config: env.config,
catalogApi,
discovery: env.discovery,
permissions: env.permissions,
}).build();
return router;
}
```
And import the plugin to `packages/backend/src/index.ts`. There are three lines
of code you'll need to add, and they should be added near similar code in your
existing Backstage backend.
```typescript title="packages/backend/src/index.ts"
// ..
/* highlight-add-next-line */
import kubernetes from './plugins/kubernetes';
async function main() {
// ...
/* highlight-add-next-line */
const kubernetesEnv = useHotMemoize(module, () => createEnv('kubernetes'));
// ...
/* highlight-add-next-line */
apiRouter.use('/kubernetes', await kubernetes(kubernetesEnv));
}
```
That's it! The Kubernetes frontend and backend have now been added to your
Backstage app.
### New Backend System
To get the Kubernetes plugin install using the New Backend System you will need to do the following:
Run this command to add the package:
First, we need to add the backend package:
```bash title="From your Backstage root directory"
yarn --cwd packages/backend add @backstage/plugin-kubernetes-backend
@@ -126,6 +67,9 @@ backend.add(import('@backstage/plugin-kubernetes-backend'));
backend.start();
```
That's it! The Kubernetes frontend and backend have now been added to your
Backstage app.
### Custom cluster discovery
If either existing
@@ -133,22 +77,18 @@ If either existing
don't work for your use-case, it is possible to implement a custom
[KubernetesClustersSupplier](https://backstage.io/docs/reference/plugin-kubernetes-backend.kubernetesclusterssupplier).
Change the following in `packages/backend/src/plugins/kubernetes.ts`:
Here's a very simplified example:
```ts title="packages/backend/src/plugins/kubernetes.ts"
import {
/* highlight-add-next-line */
ClusterDetails,
KubernetesBuilder,
/* highlight-add-next-line */
KubernetesClustersSupplier,
} from '@backstage/plugin-kubernetes-backend';
import { Router } from 'express';
import { PluginEnvironment } from '../types';
/* highlight-add-next-line */
```ts title="packages/backend/src/index.ts"
import { createBackend } from '@backstage/backend-defaults';
import { createBackendModule } from '@backstage/backend-plugin-api';
import { Duration } from 'luxon';
import {
ClusterDetails,
KubernetesClustersSupplier,
kubernetesClusterSupplierExtensionPoint,
} from '@backstage/plugin-kubernetes-node';
/* highlight-add-start */
export class CustomClustersSupplier implements KubernetesClustersSupplier {
constructor(private clusterDetails: ClusterDetails[] = []) {}
@@ -170,43 +110,6 @@ export class CustomClustersSupplier implements KubernetesClustersSupplier {
return this.clusterDetails;
}
}
/* highlight-add-end */
export default async function createPlugin(
env: PluginEnvironment,
): Promise<Router> {
/* highlight-remove-next-line */
const { router } = await KubernetesBuilder.createBuilder({
/* highlight-add-next-line */
const builder = await KubernetesBuilder.createBuilder({
logger: env.logger,
config: env.config,
/* highlight-remove-next-line */
}).build();
/* highlight-add-start */
});
builder.setClusterSupplier(
CustomClustersSupplier.create(Duration.fromObject({ minutes: 60 })),
);
const { router } = await builder.build();
/* highlight-add-end */
// ..
return router;
}
```
### New Backend System Custom cluster discovery
To use Custom cluster discovery with the New Backend System you'll need to create a module and add it to your backend. Here's a very simplified example:
```ts title="packages/backend/src/index.ts"
import { createBackend } from '@backstage/backend-defaults';
import { createBackendModule } from '@backstage/backend-plugin-api';
import { Duration } from 'luxon';
import { kubernetesClusterSupplierExtensionPoint } from '@backstage/plugin-kubernetes-node';
import { CustomClustersSupplier } from './path/to/class';
const backend = createBackend();
@@ -236,7 +139,7 @@ backend.start();
:::note Note
This example assumes the `CustomClustersSupplier` class is the same from the [previous example](#custom-cluster-discovery)
This example uses items from the `@backstage/plugin-kubernetes-node` and `luxon` packages, you'll need to add those for this example to work as is.
:::