Container Image Registry for ACR

View container image details from ACR in Backstage.

NPM

Azure Container Registry plugin for Backstage

The Azure Container Registry (ACR) plugin displays information about your container images available in the Azure Container Registry.

For administrators​

Installing and configuring the ACR plugin​

1. Run the following command to install the ACR plugin:

   yarn workspace app add @janus-idp/backstage-plugin-acr
   

2. Set the proxy to the desired ACR server in the app-config.yaml file as follows:

   # app-config.yaml
   proxy:
     endpoints:
       '/acr/api':
         target: 'https://mycontainerregistry.azurecr.io/acr/v1/'
         changeOrigin: true
         headers:
           # If you use Bearer Token for authorization, please replace the 'Basic' with 'Bearer' in the following line.
           Authorization: 'Basic ${ACR_AUTH_TOKEN}'
         # Change to "false" in case of using self hosted artifactory instance with a self-signed certificate
         secure: true
   

3. Set the authorization using one of the following options:

   • Basic authorization:

     • Navigate to the ACR portal and go to the Access Keys tab.
     • Retrieve the username and password of the Admin user and use the Basic Auth Header Generator tool or run echo printf '<username>:<password>' | base64 in a terminal to convert the credentials into a basic token.
     • Set the generated token as ACR_AUTH_TOKEN in environment variables.

   • OAuth2: - Generate bearer access token using the process described in Authenticate with an Azure Container Registry.

     • One method is to generate a bearer token using your basic authorization token, i.e.

               curl --location 'https://<yourregistry>.azurecr.io/oauth2/token?scope=repository%3A*%3A*&service=<yourregistry>.azurecr.io' \
       --header 'Authorization: Basic <basic_token>'
       

     • Set the generated token as ACR_AUTH_TOKEN in environment variables. Make sure to replace the Basic in the app-config.yaml with Bearer

4. Enable an additional tab on the entity view page using the packages/app/src/components/catalog/EntityPage.tsx file as follows:

   packages/app/src/components/catalog/EntityPage.tsx

   import { AcrPage, isAcrAvailable } from '@janus-idp/backstage-plugin-acr';
   
   
   const serviceEntityPage = (
     <EntityLayout>
       // ...
       <EntityLayout.Route
         if={e => Boolean(isAcrAvailable(e))}
         path="/acr"
         title="ACR"
       >
         <AcrPage />
       </EntityLayout.Route>
     </EntityLayout>
   );
   

5. Annotate your entity using the following annotations:

   metadata:
     annotations:
       'azure-container-registry/repository-name': `<REPOSITORY-NAME>',
   

For users​

Using the ACR plugin in Backstage​

ACR is a front-end plugin that enables you to view information about the container images from your Azure Container Registry in Backstage.

Prerequisites​

• Your Backstage application is installed and running.
• You have installed the ACR plugin. For installation instructions, see Installing and configuring the ACR plugin.

Procedure​

1. Open your Backstage application and select a component from the Catalog page.

2. Go to the ACR tab.

   

   The ACR tab in the Backstage UI contains a list of container images and related information, such as TAG, CREATED, LAST MODIFIED, and MANIFEST.