Procedure

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

   yarn workspace app add @redhat/backstage-plugin-acr

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

      # app-config.yaml
      proxy:
        '/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](https://www.debugbear.com/basic-auth-header-generator) or run echo printf '<username>:<password>' | base64 in a terminal to convert the credentials to 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.

       You can generate a bearer token using your basic authorization token, for example:

       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. Also ensure that you replace the Basic with Bearer in the app-config.yaml file.

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

   /* highlight-add-start */
   import { AcrPage, isAcrAvailable } from '@redhat/backstage-plugin-acr';
   
   /* highlight-add-end */
   
   const serviceEntityPage = (
     <EntityPageLayout>
       // ...
       {/* highlight-add-start */}
       <EntityLayout.Route path="/acr" title="ACR">
         <Grid container spacing={3} alignItems="stretch">
           <EntitySwitch>
             <EntitySwitch.Case if={e => Boolean(isAcrAvailable(e))}>
               <Grid item sm={12}>
                 <AcrPage />
               </Grid>
             </EntitySwitch.Case>
           </EntitySwitch>
         </Grid>
       </EntityLayout.Route>
       {/* highlight-add-end */}
     </EntityPageLayout>
   );

5. Annotate your entity using the following annotations:

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

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.