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

流程

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

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

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

   npx @janus-idp/cli@latest package package-dynamic-plugins --tag quay.io/example/image:v0.0.1

   Copy to Clipboard Toggle word wrap

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

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

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

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

   Copy to Clipboard Toggle word wrap

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

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

   Copy to Clipboard Toggle word wrap

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

流程

1. 进入 dist-dynamic 目录。

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

   创建 tgz 归档的命令示例

   npm pack

   Copy to Clipboard Toggle word wrap

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

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

   npm pack --json | head -n 10

   Copy to Clipboard Toggle word wrap

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>

   Copy to Clipboard Toggle word wrap

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

   打包动态插件的命令示例

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

   Copy to Clipboard Toggle word wrap

   提示

   要使用 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

   Copy to Clipboard Toggle word wrap

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

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

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

   Copy to Clipboard Toggle word wrap

流程

1. 进入 dist-dynamic 目录。

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

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

   npm publish --registry <npm_registry_url>

   Copy to Clipboard Toggle word wrap

   提示

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

   package.json 文件示例

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

   Copy to Clipboard Toggle word wrap

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

流程

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

   1. 登录到容器镜像 registry。

      podman login <registry>

      Copy to Clipboard Toggle word wrap

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

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

      Copy to Clipboard Toggle word wrap

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

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

      1

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

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

   oci://<image_name>:<tag>!<plugin_name>

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

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

   Copy to Clipboard Toggle word wrap

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

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

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

   Copy to Clipboard Toggle word wrap

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==

   Copy to Clipboard Toggle word wrap

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

流程

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

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

   Copy to Clipboard Toggle word wrap

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

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

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

   Copy to Clipboard Toggle word wrap

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

   .npmrc 文件示例

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

   Copy to Clipboard Toggle word wrap

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-url>
         //<registry-url>:_authToken=<auth-token>

     Copy to Clipboard Toggle word wrap

     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

   Copy to Clipboard Toggle word wrap

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

   导出后端插件

   $ cd todo-backend
   $ npx @janus-idp/cli@latest package export-dynamic-plugin

   Copy to Clipboard Toggle word wrap

   导出后端插件命令的输出

   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

   Copy to Clipboard Toggle word wrap

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

   导出前端插件

   $ cd ../todo
   $ npx @janus-idp/cli@latest package export-dynamic-plugin

   Copy to Clipboard Toggle word wrap

   导出前端插件命令的输出

   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

   Copy to Clipboard Toggle word wrap

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

   构建 OCI 镜像

   $ cd ../..
   $ npx @janus-idp/cli@latest package package-dynamic-plugins --tag quay.io/user/backstage-community-plugin-todo:v0.1.1

   Copy to Clipboard Toggle word wrap

   构建 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

   Copy to Clipboard Toggle word wrap

   将 OCI 镜像推送到容器 registry：

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

   Copy to Clipboard Toggle word wrap

   推送 OCI image 命令的输出

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

   Copy to Clipboard Toggle word wrap

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

   Copy to Clipboard Toggle word wrap