第4章 Red Hat Developer Hub の Home ページのカスタマイズ

手順

1. Red Hat OpenShift で、+Add を選択し、Import from Git オプションをクリックします。

2. Git リポジトリーの URL を Git Repo URL フィールドに追加します。

   red-hat-developer-hub-customization-provider サービスを使用するには、red-hat-developer-hub-customization-provider リポジトリーの URL を追加できます。

3. General セクションで、Name フィールドの値の名前を rhdh-customization-provider に変更し、Create をクリックします。

4. Advanced Options に移動し、Target Port から値をコピーします。

   Target Port は、通信する Kubernetes または OpenShift サービスを自動的に生成するために使用されます。

5. サービスを表示するには、OpenShift Administrator ビューに移動し、Networking Service セクションに移動します。

   Topology ビューで Service Resources を表示することもできます。

   例を使用してこの手順に従うと、rhdh-customization-provider サービスが呼び出され、8080 ポートが追加されます。次の例に示すように、指定した 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"
         }
       ]
     }
   ]

   要求の呼び出しが失敗した場合や、設定されていない場合、Developer Hub インスタンスはデフォルトのローカルデータにフォールバックします。

   Red Hat Developer Hub の Home ページにアクセスするには、ベース URL に /developer-hub プロキシーが含まれている必要があります。

6. 次のコードを app-config-rhdh.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

   API 要求の呼び出しが JSON 形式で応答を返すことを確認します。

7. HOMEPAGE_DATA_URL を http://<SERVICE_NAME>:8080 と定義します。たとえば、`http://rhdh-customization-provider:8080 とします。

   HOMEPAGE_DATA_URL を置き換えるには、URL を rhdh-secrets に追加するか、カスタム ConfigMap で直接置き換えます。

8. Developer Hub Pod を削除して、変更を取り込みます。

   イメージまたはアイコンが読み込まれない場合は、次のように、カスタム ConfigMap のコンテンツセキュリティーポリシー (csp) の img-src にイメージまたはアイコンのホスト URL を追加して、イメージまたはアイコンをホワイトリストに登録します。

   kind: ConfigMap
   apiVersion: v1
   metadata:
     name: app-config-rhdh
   data:
     app-config-rhdh.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

   その後、Pod を削除して、新しい設定が正しくロードされていることを確認します。