10.2. 使用专用服务向 Quick 访问卡提供数据

在使用专用服务时，您可以执行以下任务：

使用相同的服务向所有可配置的 Developer Hub 页面提供数据，或者为每个页面使用不同的服务。
使用 red-hat-developer-hub-customization-provider 作为示例服务，它为 Home 和 Tech Radar 页面提供数据。red-hat-developer-hub-customization-provider 服务提供与默认 Developer Hub 数据相同的数据。您可以从 GitHub 分叉 red-hat-developer-hub-customization-provider 服务存储库，并根据需要使用自己的数据进行修改。
在同一集群中部署 red-hat-developer-hub-customization-provider 服务和 Developer Hub Helm Chart。

先决条件

已使用 Helm Chart 安装 Red Hat Developer Hub。如需更多信息，请参阅使用 Helm Chart 在 OpenShift Container Platform 上安装 Red Hat Developer Hub。

流程

要使用单独的服务提供 Home 页面数据，请完成以下步骤：

从 Red Hat OpenShift Container Platform Web 控制台中的 Developer 视角，点 +Add > Import from Git。
在 Git Repo URL 字段中输入 Git 存储库的 URL。
要使用 red-hat-developer-hub-customization-provider 服务，请添加 red-hat-developer-hub-customization-provider 存储库的 URL 或包含您的自定义的存储库分叉。
在 General 选项卡中，在 Name 字段中输入 red-hat-developer-hub-customization-provider，然后单击 Create。
在 Advanced Options 选项卡中，复制 Target Port 的值。
注意
目标端口 自动生成 Kubernetes 或 OpenShift Container Platform 服务以进行通信。

将以下代码添加到 app-config.yaml 文件中：

proxy:
  endpoints:
    # Other Proxies
    # customize developer hub instance
    '/developer-hub':
      target: ${HOMEPAGE_DATA_URL} 
      changeOrigin: true
      # Change to "false" in case of using self-hosted cluster with a self-signed certificate
      secure: true

proxy:
  endpoints:
    # Other Proxies
    # customize developer hub instance
    '/developer-hub':
      target: ${HOMEPAGE_DATA_URL}


      changeOrigin: true
      # Change to "false" in case of using self-hosted cluster with a self-signed certificate
      secure: true

Copy to Clipboard

Toggle word wrap

1: http://<SERVICE_NAME>:8080，例如 http://rhdh-customization-provider:8080。

注意

red-hat-developer-hub-customization-provider 服务默认包含 8080 端口。如果使用自定义端口，您可以使用 app-config.yaml 文件中的 'PORT' 环境变量指定它。

将 URL 添加到 rhdh-secrets 或直接在自定义 ConfigMap 中替换它，替换 HOMEPAGE_DATA_URL。
删除 Developer Hub pod，以确保正确载入新配置。

验证

要查看该服务，请转至 OpenShift Container Platform Web 控制台中的 Administrator 视角，然后点击 Networking > Service。
注意
您还可以在 Topology 视图中查看 服务资源。

确保 Home 页面提供的 API URL 以 JSON 格式返回数据，如下例所示：

[
  {
    "title": "Dropdown 1",
    "isExpanded": false,
    "links": [
      {
        "iconUrl": "https://imagehost.com/image.png",
        "label": "Dropdown 1 Item 1",
        "url": "https://example.com/"
      },
      {
        "iconUrl": "https://imagehost2.org/icon.png",
        "label": "Dropdown 1 Item 2",
        "url": ""
      }
    ]
  },
  {
    "title": "Dropdown 2",
    "isExpanded": true,
    "links": [
      {
        "iconUrl": "http://imagehost3.edu/img.jpg",
        "label": "Dropdown 2 Item 1",
        "url": "http://example.com"
      }
    ]
  }
]

[
  {
    "title": "Dropdown 1",
    "isExpanded": false,
    "links": [
      {
        "iconUrl": "https://imagehost.com/image.png",
        "label": "Dropdown 1 Item 1",
        "url": "https://example.com/"
      },
      {
        "iconUrl": "https://imagehost2.org/icon.png",
        "label": "Dropdown 1 Item 2",
        "url": ""
      }
    ]
  },
  {
    "title": "Dropdown 2",
    "isExpanded": true,
    "links": [
      {
        "iconUrl": "http://imagehost3.edu/img.jpg",
        "label": "Dropdown 2 Item 1",
        "url": "http://example.com"
      }
    ]
  }
]

Copy to Clipboard

Toggle word wrap

注意

如果请求调用失败或未配置，Developer Hub 实例会返回默认的本地数据。

如果镜像或图标没有加载，那么通过将您的镜像或图标主机 URL 添加到自定义 ConfigMap 中的内容安全策略(csp) img-src 来列出它们，如下例所示：

kind: ConfigMap
apiVersion: v1
metadata:
  name: app-config.yaml
data:
  app-config.yaml: |
    app:
      title: Red Hat Developer Hub
    backend:
      csp:
        connect-src:
          - "'self'"
          - 'http:'
          - 'https:'
        img-src:
          - "'self'"
          - 'data:'
          - <image host url 1>
          - <image host url 2>
          - <image host url 3>
    # Other Configurations

kind: ConfigMap
apiVersion: v1
metadata:
  name: app-config.yaml
data:
  app-config.yaml: |
    app:
      title: Red Hat Developer Hub
    backend:
      csp:
        connect-src:
          - "'self'"
          - 'http:'
          - 'https:'
        img-src:
          - "'self'"
          - 'data:'
          - <image host url 1>
          - <image host url 2>
          - <image host url 3>
    # Other Configurations

Copy to Clipboard

Toggle word wrap

10.2. 使用专用服务向 Quick 访问卡提供数据

学习

尝试、购买和销售

社区

关于红帽文档

让开源更具包容性

關於紅帽

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links