在 Red Hat Developer Hub 中安装并查看插件

流程

1. 导航到插件的根目录（而不是 dist-dynamic 目录）。

2. 运行以下命令将插件打包到 OCI 镜像中：

   打包导出的第三方插件的命令示例

   npx @red-hat-developer-hub/cli@latest plugin package --tag quay.io/example/image:v0.0.1

   在上一命令中，--tag 参数指定镜像名称和标签。

3. 运行以下命令之一将镜像推送(push)到 registry:

   使用 podman 将镜像推送到 registry 的命令示例

   podman push quay.io/example/image:v0.0.1

   使用 docker 将镜像推送到 registry 的命令示例

   docker push quay.io/example/image:v0.0.1

   package-dynamic-plugins 命令的输出提供了插件的路径，可在 dynamic-plugin-config.yaml 文件中使用。

流程

1. 进入 dist-dynamic 目录。

2. 运行以下命令来创建 tgz 归档：

   创建 tgz 归档的命令示例

   npm pack

   您可以使用-- json 标志从 npm pack 命令的输出中获取完整性哈希，如下所示：

   获取 tgz 归档的完整性哈希值的命令示例

   npm pack --json | head -n 10

3. 在 RHDH 实例可访问的 Web 服务器上托管存档，并在 dynamic-plugin-config.yaml 文件中引用其 URL，如下所示：

   dynamic-plugin-config.yaml 文件示例

   plugins:
     - package: https://example.com/backstage-plugin-myplugin-1.0.0.tgz
       integrity: sha512-<hash>

4. 运行以下命令来打包插件：

   打包动态插件的命令示例

   npm pack --pack-destination ~/test/dynamic-plugins-root/

   提示

   要使用 OpenShift Container Platform 上的 HTTP 服务器创建插件 registry，请运行以下命令：

   在 OpenShift Container Platform 中构建和部署 HTTP 服务器的命令示例

   oc project my-rhdh-project
   oc new-build httpd --name=plugin-registry --binary
   oc start-build plugin-registry --from-dir=dynamic-plugins-root --wait
   oc new-app --image-stream=plugin-registry

5. 通过编辑 dynamic-plugin-config.yaml 文件，将 RHDH 配置为使用来自 HTTP 服务器的插件：

   在 RHDH 中使用打包插件的示例配置

   plugins:
     - package: http://plugin-registry:8080/backstage-plugin-myplugin-1.9.6.tgz

流程

1. 进入 dist-dynamic 目录。

2. 运行以下命令，将软件包发布到您的私有 NPM registry：

   将插件软件包发布到 NPM registry 的命令示例

   npm publish --registry <npm_registry_url>

   提示

   在运行 export 命令前，您可以在 package.json 文件中添加以下内容：

   package.json 文件示例

   {
     "publishConfig": {
       "registry": "<npm_registry_url>"
     }
   }

   如果在导出动态插件后修改 publishConfig，请重新运行 plugin export 命令，以确保包含正确的配置。

流程

1. 要从经过身份验证的 registry 检索插件，请完成以下步骤：

   1. 登录到容器镜像 registry。

      podman login <registry>

   2. 验证登录后创建的 auth.json 文件的内容。

      cat ${XDG_RUNTIME_DIR:-~/.config}/containers/auth.json

   3. 使用以下示例创建 secret 文件：

      oc create secret generic _<secret_name>_ --from-file=auth.json=${XDG_RUNTIME_DIR:-~/.config}/containers/auth.json 

      1

      • 对于基于 Operator 的部署，将 < secret_name> 替换为 dynamic-plugins-registry-auth。
      • 对于基于 Helm 的部署，将 < secret_name > 替换为 & lt;Helm_release_name>_-dynamic-plugins-registry-auth。

2. 在 dynamic-plugins.yaml 文件中定义带有 oci:// 前缀的插件：

   oci:// &lt;image_name>:<tag>! &lt;plugin_name>

   dynamic-plugins.yaml 文件中的配置示例

   plugins:
     - disabled: false
       package: oci://quay.io/example/image:v0.0.1!backstage-plugin-myplugin

3. 要执行完整性检查，请使用镜像摘要来代替 dynamic-plugins.yaml 文件中的标签，如下例所示：

   dynamic-plugins.yaml 文件中的配置示例

   plugins:
     - disabled: false
       package: oci://quay.io/example/image@sha256:28036abec4dffc714394e4ee433f16a59493db8017795049c831be41c02eb5dc!backstage-plugin-myplugin

4. 要应用更改，请重启 RHDH 应用程序。

流程

1. 使用以下示例在 dynamic-plugins.yaml 文件中指定归档 URL 及其完整性哈希：

   dynamic-plugins.yaml 文件中的配置示例

   plugins:
     - disabled: false
       package: https://example.com/backstage-plugin-myplugin-1.0.0.tgz
       integrity: sha512-9WlbgEdadJNeQxdn1973r5E4kNFvnT9GjLD627GWgrhCaxjCmxqdNW08cj+Bf47mwAtZMt1Ttyo+ZhDRDj9PoA==

2. 要应用更改，请重启 RHDH 应用程序。

流程

1. 运行以下命令以从 NPM registry 获取完整性哈希：

   npm view --registry <registry-link> <npm package>@<version> dist.integrity

2. 在 dynamic-plugins.yaml 文件中指定软件包名称、版本及其完整性哈希，如下所示：

   dynamic-plugins.yaml 文件中的配置示例

   plugins:
     - disabled: false
       package: @example/backstage-plugin-myplugin@1.0.0
       integrity: sha512-9WlbgEdadJNeQxdn1973r5E4kNFvnT9GjLD627GWgrhCaxjCmxqdNW08cj+Bf47mwAtZMt1Ttyo+ZhDRDj9PoA==

3. 如果您使用自定义 NPM registry，请使用 registry URL 和身份验证详情创建一个 .npmrc 文件：

   .npmrc 文件示例

   registry=<registry-link>
   //<registry-link>:_authToken=<auth-token>

4. 使用 OpenShift Container Platform 或 Kubernetes 时：

   • 使用 Helm Chart 通过创建 secret 添加 .npmrc 文件。例如：

     secret 配置示例

     apiVersion: v1
     kind: Secret
     metadata:
       name: <release_name>-dynamic-plugins-npmrc 

     1

     
     type: Opaque
     stringData:
       .npmrc: |
         registry=<registry-link>
         //<registry-link>:_authToken=<auth-token>

     1 1

     将 <release_name > 替换为您的 Helm 发行版本名称。此名称是 Kubernetes 集群中每个 chart 安装的唯一标识符。

   • 对于 RHDH Helm Chart，使用以下格式命名 secret 进行自动挂载：

     <release_name>-dynamic-plugins-npmrc

5. 要应用更改，请重启 RHDH 应用程序。

1. 获取第三方插件源代码 ：克隆 plugins 存储库并导航到 Todo 插件 目录：

   获取第三方插件源代码

   $ git clone https://github.com/backstage/community-plugins
   $ cd community-plugins/workspaces/todo
   $ yarn install

2. 导出后端和前端插件 ： 运行以下命令构建后端插件，调整动态加载的软件包依赖项，并生成自包含的配置模式：

   导出后端插件

   $ cd todo-backend
   $ npx @red-hat-developer-hub/cli@latest plugin export

   导出后端插件命令的输出

   Building main package
     executing     yarn build ✔
   Packing main package to dist-dynamic/package.json
   Customizing main package in dist-dynamic/package.json for dynamic loading
     moving @backstage/backend-common to peerDependencies
     moving @backstage/backend-openapi-utils to peerDependencies
     moving @backstage/backend-plugin-api to peerDependencies
     moving @backstage/catalog-client to peerDependencies
     moving @backstage/catalog-model to peerDependencies
     moving @backstage/config to peerDependencies
     moving @backstage/errors to peerDependencies
     moving @backstage/integration to peerDependencies
     moving @backstage/plugin-catalog-node to peerDependencies
   Installing private dependencies of the main package
      executing     yarn install --no-immutable ✔
   Validating private dependencies
   Validating plugin entry points
   Saving self-contained config schema in /Users/user/Code/community-plugins/workspaces/todo/plugins/todo-backend/dist-dynamic/dist/configSchema.json

   您可以运行以下命令来设置默认动态 UI 配置，创建前端插件资产，并为前端插件生成配置模式：

   导出前端插件

   $ cd ../todo
   $ npx @red-hat-developer-hub/cli@latest plugin export

   导出前端插件命令的输出

   No scalprum config. Using default dynamic UI configuration:
   {
     "name": "backstage-community.plugin-todo",
     "exposedModules": {
       "PluginRoot": "./src/index.ts"
     }
   }
   If you wish to change the defaults, add "scalprum" configuration to plugin "package.json" file, or use the '--scalprum-config' option to specify an external config.
   Packing main package to dist-dynamic/package.json
   Customizing main package in dist-dynamic/package.json for dynamic loading
   Generating dynamic frontend plugin assets in /Users/user/Code/community-plugins/workspaces/todo/plugins/todo/dist-dynamic/dist-scalprum
     263.46 kB  dist-scalprum/static/1417.d5271413.chunk.js
   ...
   ...
   ...
     250 B      dist-scalprum/static/react-syntax-highlighter_languages_highlight_plaintext.0b7d6592.chunk.js
   Saving self-contained config schema in /Users/user/Code/community-plugins/workspaces/todo/plugins/todo/dist-dynamic/dist-scalprum/configSchema.json

3. 软件包并发布第三方插件 ： 运行以下命令进入工作区目录，并打包动态插件以构建 OCI 镜像：

   构建 OCI 镜像

   $ cd ../..
   $ npx @red-hat-developer-hub/cli@latest plugin package --tag quay.io/user/backstage-community-plugin-todo:v0.1.1

   构建 OCI 镜像命令的输出

     executing     podman --version ✔
   Using existing 'dist-dynamic' directory at plugins/todo
   Using existing 'dist-dynamic' directory at plugins/todo-backend
   Copying 'plugins/todo/dist-dynamic' to '/var/folders/5c/67drc33d0018j6qgtzqpcsbw0000gn/T/package-dynamic-pluginsmcP4mU/backstage-community-plugin-todo
   No plugin configuration found at undefined create this file as needed if this plugin requires configuration
   Copying 'plugins/todo-backend/dist-dynamic' to '/var/folders/5c/67drc33d0018j6qgtzqpcsbw0000gn/T/package-dynamic-pluginsmcP4mU/backstage-community-plugin-todo-backend-dynamic
   No plugin configuration found at undefined create this file as needed if this plugin requires configuration
   Writing plugin registry metadata to '/var/folders/5c/67drc33d0018j6qgtzqpcsbw0000gn/T/package-dynamic-pluginsmcP4mU/index.json'
   Creating image using podman
     executing     echo "from scratch
   COPY . .
   " | podman build --annotation com.redhat.rhdh.plugins='[{"backstage-community-plugin-todo":{"name":"@backstage-community/plugin-todo","version":"0.2.40","description":"A Backstage plugin that lets you browse TODO comments in your source code","backstage":{"role":"frontend-plugin","pluginId":"todo","pluginPackages":["@backstage-community/plugin-todo","@backstage-community/plugin-todo-backend"]},"homepage":"https://backstage.io","repository":{"type":"git","url":"https://github.com/backstage/community-plugins","directory":"workspaces/todo/plugins/todo"},"license":"Apache-2.0"}},{"backstage-community-plugin-todo-backend-dynamic":{"name":"@backstage-community/plugin-todo-backend","version":"0.3.19","description":"A Backstage backend plugin that lets you browse TODO comments in your source code","backstage":{"role":"backend-plugin","pluginId":"todo","pluginPackages":["@backstage-community/plugin-todo","@backstage-community/plugin-todo-backend"]},"homepage":"https://backstage.io","repository":{"type":"git","url":"https://github.com/backstage/community-plugins","directory":"workspaces/todo/plugins/todo-backend"},"license":"Apache-2.0"}}]' -t 'quay.io/user/backstage-community-plugin-todo:v0.1.1' -f - .
       ✔
   Successfully built image quay.io/user/backstage-community-plugin-todo:v0.1.1 with following plugins:
     backstage-community-plugin-todo
     backstage-community-plugin-todo-backend-dynamic
   
   Here is an example dynamic-plugins.yaml for these plugins:
   
   plugins:
     - package: oci://quay.io/user/backstage-community-plugin-todo:v0.1.1!backstage-community-plugin-todo
       disabled: false
     - package: oci://quay.io/user/backstage-community-plugin-todo:v0.1.1!backstage-community-plugin-todo-backend-dynamic
       disabled: false

   将 OCI 镜像推送到容器 registry：

   $ podman push quay.io/user/backstage-community-plugin-todo:v0.1.1

   推送 OCI image 命令的输出

   Getting image source signatures
   Copying blob sha256:86a372c456ae6a7a305cd464d194aaf03660932efd53691998ab3403f87cacb5
   Copying config sha256:3b7f074856ecfbba95a77fa87cfad341e8a30c7069447de8144aea0edfcb603e
   Writing manifest to image destination

4. 安装和配置第三方插件：在 dynamic- plugins.yaml 文件中添加以下插件定义：

   dynamic-plugins.yaml 文件中的插件定义

   packages:
    - package: oci://quay.io/user/backstage-community-plugin-todo:v0.1.1!backstage-community-plugin-todo
      pluginConfig:
        dynamicPlugins:
          frontend:
            backstage-community.plugin-todo:
              mountPoints:
                - mountPoint: entity.page.todo/cards
                  importName: EntityTodoContent
              entityTabs:
                - path: /todo
                  title: Todo
                  mountPoint: entity.page.todo
    - package: oci://quay.io/user/backstage-community-plugin-todo:v0.1.1!backstage-community-plugin-todo-backend-dynamic
      disabled: false

流程

1. 创建扩展配置文件并将其保存为 dynamic-plugins.extensions.yaml。例如：

   includes:
     - dynamic-plugins.default.yaml
   
   plugins:
     - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-marketplace
       disabled: false
       pluginConfig:
         dynamicPlugins:
           frontend:
             red-hat-developer-hub.backstage-plugin-marketplace:
               appIcons:
                 - name: marketplace
                   importName: MarketplaceIcon
               dynamicRoutes:
                 - path: /extensions/catalog
                   importName: DynamicMarketplacePluginRouter
               mountPoints:
                 - mountPoint: application/provider
                   importName: InstallationContextProvider
                 - mountPoint: internal.plugins/tab
                   importName: DynamicMarketplacePluginContent
                   config:
                     path: marketplace
                     title: Catalog
                     icon: CatalogTabIcon
     - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-marketplace-backend-dynamic
       disabled: false
       pluginConfig:
         extensions:
           installation:
             enabled: true
             saveToSingleFile:
               file: /opt/app-root/src/dynamic-plugins-root/dynamic-plugins.extensions.yaml

2. 运行以下命令将文件复制到集群中：

   oc get pods -n <your-namespace>
   
   oc cp ./dynamic-plugins.extensions.yaml <your-namespace>/<pod-name>:/opt/app-root/src/dynamic-plugins-root/dynamic-plugins.extensions.yaml

3. 更新您的 RHDH 应用程序以使用此文件：

   1. 对于基于 operator 的安装：

      1. 更新 Backstage CR，将 NODE_ENV 环境变量更新为 development，如下所示：

         apiVersion: rhdh.redhat.com/v1alpha3
         kind: Backstage
         metadata:
           name: developer-hub
           namespace: rhdh
         spec:
           application:
             dynamicPluginsConfigMapName: dynamic-plugins-rhdh
             extraEnvs:
               envs:
                 - name: NODE_ENV
                   value: "development"
               secrets:
                 - name: secrets-rhdh
             extraFiles:
               mountPath: /opt/app-root/src
             route:
               enabled: true
           database:
             enableLocalDb: true

      2. 更新您的 dynamic-plugins-rhdh 配置映射使其包含您的扩展配置文件，如下所示：

         kind: ConfigMap
         apiVersion: v1
         metadata:
           name: dynamic-plugins-rhdh
           namespace: rhdh
         data:
          dynamic-plugins.yaml: |
            includes:
              - dynamic-plugins.default.yaml
              - /dynamic-plugins-root/dynamic-plugins.extensions.yaml
            plugins: []

   2. 对于 Helm Chart 安装：

      1. 升级 Helm 发行版本使其包含扩展配置文件，并将 NODE_ENV 环境变量更新为 development ：

         global:
           auth:
             backend:
               enabled: true
           clusterRouterBase: apps.<clusterName>.com
           dynamic:
             includes:
               - dynamic-plugins.default.yaml
               - /dynamic-plugins-root/dynamic-plugins.extensions.yaml
         upstream:
           backstage:
             extraEnvVars:
               - name: NODE_ENV
                 value: development

      2. 点 Upgrade

流程

1. 更新您的 dynamic-plugins.override.yaml 文件：

   includes:
     - dynamic-plugins.default.yaml
   
   plugins:
     - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-marketplace
       disabled: false
       pluginConfig:
         dynamicPlugins:
           frontend:
             red-hat-developer-hub.backstage-plugin-marketplace:
               appIcons:
                 - name: marketplace
                   importName: MarketplaceIcon
               dynamicRoutes:
                 - path: /extensions/catalog
                   importName: DynamicMarketplacePluginRouter
               mountPoints:
                  - mountPoint: application/provider
                    importName: InstallationContextProvider
                 - mountPoint: internal.plugins/tab
                   importName: DynamicMarketplacePluginContent
                   config:
                     path: marketplace
                     title: Catalog
     - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-marketplace-backend-dynamic
       disabled: false
       pluginConfig:
         extensions:
           installation:
             enabled: true
             saveToSingleFile:
               file: /opt/app-root/src/configs/dynamic-plugins/dynamic-plugins.override.yaml

2. 更新 compose.yaml 文件：

   rhdh:
     container_name: rhdh
     environment:
       NODE_OPTIONS: "--inspect=0.0.0.0:9229"
       NODE_ENV: "development"

流程

1. 导航到 Extensions。
2. 选择要安装的插件。

3. 点 Install 按钮。

   

   此时会显示代码编辑器，显示插件默认配置。

4. 如果需要，更新插件配置。

   
5. 点 Install

6. 要查看需要重启的插件，请点警报消息中的 View plugins。

   
7. 重启您的 RHDH 应用程序。

验证

1. 重启 RHDH 应用程序后，导航到 Extensions。
2. 选择已安装的插件。
3. 此时会显示 Actions 按钮。

流程

1. 导航到 Extensions。
2. 选择要启用或禁用的插件。

3. 点 Enable/Disable slider。

   

4. 要查看需要重启的插件，请点警报消息中的 View plugins。

   
5. 重启您的 RHDH 应用程序。

验证

1. 重启 RHDH 应用程序后，导航到 Extensions。
2. 选择已安装的插件。
3. Enable/Disable 滑块已更新。