Backstage Container Image Registry for JFrog Artifactory Plugin

Install the plugin

1. From the Backstage repo root, add the package to the app

   Copy

   yarn workspace app add @backstage-community/plugin-jfrog-artifactory

Configure the proxy

1. Edit app-config.yaml. Add a proxy endpoint that points to your Artifactory server

   Copy

   proxy:
     endpoints:
       '/jfrog-artifactory/api':
         target: 'http://<hostname>:8082' # or https://<customer>.jfrog.io
         headers:
           # Authorization: 'Bearer <YOUR TOKEN>'
         # Change to "false" in case of using self hosted artifactory instance with a self-signed certificate
         secure: true

2. If you have more than one Artifactory instance, add one proxy block for each

   Copy

   proxy:
     endpoints:
       '/jfrog-instance1':
         target: 'https://<hostname1>'
         # headers, secure, and other options for instance 1
       '/jfrog-instance2':
         target: 'https://<hostname2>'
         # headers, secure, and other options for instance 2

   For self hosted with a self signed certificate set secure to false.

Add the Jfrog Artifactory tab to the entity page

1. Edit packages/app/src/components/catalog/EntityPage.tsx. Import the components from the plugin

   Copy

   import {
     isJfrogArtifactoryAvailable,
     JfrogArtifactoryPage,
   } from '@backstage-community/plugin-jfrog-artifactory';

2. Add a route in your service entity page layout so the tab shows up

   Copy

   // packages/app/src/components/catalog/EntityPage.tsx
   
   import React from 'react';
   import { EntityLayout } from '@backstage/plugin-catalog';
   import {
     isJfrogArtifactoryAvailable,
     JfrogArtifactoryPage,
   } from '@backstage-community/plugin-jfrog-artifactory';
   
   const serviceEntityPage = (
     <EntityLayout>
       {/* other routes */}
       <EntityLayout.Route
         if={isJfrogArtifactoryAvailable}
         path="/jfrog-artifactory"
         title="Jfrog Artifactory"
       >
         <JfrogArtifactoryPage />
       </EntityLayout.Route>
     </EntityLayout>
   );
   
   export default serviceEntityPage;

Annotate your entities

1. In each catalog entity that should show image data, add the required annotations. Use the proxy target path only when you have more than one instance

   Copy

   apiVersion: backstage.io/v1alpha1
   kind: Component
   metadata:
     name: my-service
     annotations:
       jfrog-artifactory/image-name: '<IMAGE-NAME>'
       # Only needed when you configured multiple instances above
       jfrog-artifactory/target-proxy: '/<PROXY-TARGET>' # for example /jfrog-instance1
   spec:
     type: service
     owner: team-a
     lifecycle: production

Backend setup

• This plugin is frontend only
• There is no backend package to install for the classic backend
• There is no backend package to install for the new backend system
• The proxy configuration in app-config.yaml is the only backend change you need

Where the UI shows up

• Open a component page in the catalog
• You will see a Jfrog Artifactory tab for entities with the annotations above