Red Hat Summit Red Hat Summitサポートコンソール開発者トライアルの開始お問い合わせ

カスタマイズ

Red Hat Developer Hub 1.4

Red Hat Developer Hub のカスタマイズ

Red Hat Customer Content Services

概要

テンプレート、学習パス、技術ドキュメント、テクノロジーレーダー、ホームページ、クイックアクセスカード、外観など、Red Hat Developer Hub をカスタマイズする方法を学びます。

はじめに
リンクのコピー

テンプレート、学習パス、技術ドキュメント、テクノロジーレーダー、ホームページ、クイックアクセスカード、外観など、Red Hat Developer Hub をカスタマイズする方法を学びます。

第1章 Red Hat Developer Hub のタイトルのカスタマイズ
リンクのコピー

デフォルトの Red Hat Developer Hub 表示名を変更できます。

前提条件

手順

  • カスタム app-config.yaml ファイルに、<Red Hat Developer Hub> などの Developer Hub インスタンスの表示名を入力します。

    app-config.yaml の抜粋

    app:
  title: My custom Red Hat Developer Hub title

第2章 Red Hat Developer Hub のベース URL のカスタマイズ
リンクのコピー

デフォルトの Red Hat Developer Hub ベース URL を変更できます。

前提条件

  • 必要な Developer Hub の外部 URL (https://<my_developer_hub_url>) がわかっており、Red Hat OpenShift Container Platform クラスターを指定するように DNS を設定している。
  • カスタム Developer Hub 設定。

手順

  • カスタム app-config.yaml ファイルに、https://<my_developer_hub_url> などの Developer Hub の外部 URL を入力します。

    app-config.yaml の抜粋

    app:
  baseUrl: https://<my_developer_hub_url>
backend:
  baseUrl: https://<my_developer_hub_url>
  cors:
    origin: https://<my_developer_hub_url>

第3章 Red Hat Developer Hub バックエンドシークレットのカスタマイズ
リンクのコピー

デフォルトの Red Hat Developer Hub 設定では、サービス間認証用の Developer Hub バックエンドシークレットを定義します。

カスタム Developer Hub バックエンドシークレットを定義できます。

前提条件

手順

  1. Developer Hub バックエンドシークレットを定義するには、カスタム < my_product_secrets > .txt ファイルに、base64 でエンコードされた文字列を指定して BACKEND_SECRET 環境変数を追加します。各 Developer Hub インスタンスに一意の値を使用します。 

    $ echo > <my_product_secrets>.txt "BACKEND_SECRET=$(node -p 'require("crypto").randomBytes(24).toString("base64")')"

    <my_product_secrets>.txt example

    BACKEND_SECRET=3E2/rIPuZNFCtYHoxVP8wjriffnN1q/z

  2. カスタム app-config.yaml ファイルにバックエンドシークレットを追加します。

    バックエンドシークレットを定義する app-config.yaml の抜粋

    backend:
  auth:
    externalAccess:
      - type: legacy
        options:
          subject: legacy-default-config
          secret: "${BACKEND_SECRET}"

第4章 テンプレートの設定
リンクのコピー

テンプレートを設定してソフトウェアコンポーネントを作成し、これらのコンポーネントを Red Hat Developer Hub ソフトウェアカタログや Git リポジトリーなどのさまざまな場所に公開します。

テンプレートは、YAML ファイルで定義されたさまざまな UI フィールドで構成されるフォームです。テンプレートには、actions が含まれます。actions とは、順番に実行され、条件付きで実行できるステップです。

4.1. テンプレートエディターを使用したテンプレートの作成
リンクのコピー

テンプレートエディターを使用して、テンプレートを作成できます。

手順

  1. 以下のオプションのいずれかを使用して、テンプレートエディターにアクセスします。

    テンプレートエディター
    • Red Hat Developer Hub インスタンスの URL https://<rhdh_url>/create/edit 開きます。
    • Red Hat Developer Hub コンソールのナビゲーションメニューで Create…​ をクリックし、オーバーフローメニューボタンをクリックして Template editor を選択します。
  2. Edit Template Form をクリックします。
  3. オプション: テンプレートのパラメーターの YAML 定義を変更します。これらのパラメーターの詳細は、「YAML ファイルとしてのテンプレートの作成」 を参照してください。
  4. Name * に、テンプレート向けに独自の名前を入力します。
  5. Owner ドロップダウンメニューから、テンプレートの所有者を選択します。
  6. Next をクリックします。

  7. Repository Location ビューで、テンプレートを公開するホストされたリポジトリーに関する次の情報を入力します。

    1. ドロップダウンメニューから利用可能な Host を選択します。

      注記

      利用可能なホストは、allowedHosts フィールドで YAML パラメーターで定義されます。

      サンプル YAML

      # ...
        ui:options:
          allowedHosts:
            - github.com
# ...

    2. Owner * フィールドに、ホストリポジトリーが属する組織、ユーザーまたはプロジェクトを入力します。
    3. Repository * フィールドに、ホストされているリポジトリーの名前を入力します。
    4. Review をクリックします。
  8. 正確性の情報を確認し、Create をクリックします。

検証

  1. ナビゲーションパネルの Catalog タブをクリックします。
  2. Kind ドロップダウンメニューで、Template を選択します。
  3. テンプレートが既存のテンプレートのリストに表示されていることを確認します。

4.2. YAML ファイルとしてのテンプレートの作成
リンクのコピー

Template オブジェクトを YAML ファイルとして定義することでテンプレートを作成できます。

Template オブジェクトは、テンプレートとそのメタデータを記述します。また、必要な入力変数と、スキャフォールディングサービスによって実行されるアクションのリストも含まれています。

Template オブジェクトの例

apiVersion: scaffolder.backstage.io/v1beta3
kind: Template
metadata:
  name: template-name
1 

  title: Example template
2 

  description: An example template for v1beta3 scaffolder.
3 

spec:
  owner: backstage/techdocs-core
4 

  type: service
5 

  parameters:
6 

    - title: Fill in some steps
      required:
        - name
      properties:
        name:
          title: Name
          type: string
          description: Unique name of the component
        owner:
          title: Owner
          type: string
          description: Owner of the component
    - title: Choose a location
      required:
        - repoUrl
      properties:
        repoUrl:
          title: Repository Location
          type: string
  steps:
7 

    - id: fetch-base
      name: Fetch Base
      action: fetch:template
      # ...
  output:
8 

    links:
      - title: Repository
9 

        url: ${{ steps['publish'].output.remoteUrl }}
      - title: Open in catalog
10 

        icon: catalog
        entityRef: ${{ steps['register'].output.entityRef }}
# ...

1
テンプレートの名前を指定します。
2
テンプレートのタイトルを指定します。これは、Create…​ ビューのテンプレートタイルに表示されるタイトルです。
3
テンプレートの説明を入力します。これは、Create…​ ビューのテンプレートタイルに表示される説明です。
4
テンプレートの所有権を指定します。owner フィールドは、システムまたは組織内のテンプレートの管理または監視を行うユーザーに関する情報を提供します。上記の例では、owner フィールドは backstage/techdocs-core に設定されています。これは、このテンプレートが backstage namespace の techdocs-core プロジェクトに属していることを意味します。
5
コンポーネントタイプを指定します。この必須フィールドには任意の文字列値を指定できますが、組織でこれらに対して適切な分類を確立する必要があります。Red Hat Developer Hub インスタンスはこのフィールドを読み取り、その値に応じて異なる動作をする場合があります。たとえば、website タイプのコンポーネントは、Web サイト専用のツールを Red Hat Developer Hub インターフェイスに表示する場合があります。

このフィールドに共通する値は次のとおりです。

service
通常 API を公開するバックエンドサービス。
website
Web サイト
library
npm モジュールや Java ライブラリーなどのソフトウェアライブラリー。
6
parameters セクションを使用して、ユーザーが Red Hat Developer Hub コンソールでテンプレートを使用してコンポーネントを作成するときにフォームビューに表示されるユーザー入力のパラメーターを指定します。タイトルとプロパティーによって定義される各 parameters サブセクションにより、その定義を含む新しいフォームページが作成されます。
7
バックエンドで実行されるステップを指定するには、steps セクションを使用します。これらのステップは、一意のステップ ID、名前、およびアクションを使用して定義する必要があります。https://<rhdh_url>/create/actions URL にアクセスすると、Red Hat Developer Hub インスタンスで利用可能なアクションを表示できます。
8
output セクションを使用して、テンプレートの使用時に作成される出力データの構造を指定します。output セクション、特に links サブセクションには、テンプレートから作成されたコンポーネントにアクセスして操作するためにユーザーが利用できる貴重な参照と URL が提供されます。
9
生成されたコンポーネントに関連付けられたリポジトリーへの参照または URL を提供します。
10
さまざまなコンポーネントが表示されているカタログまたはディレクトリーで、生成されたコンポーネントを表示できるようにする参照または URL を提供します。

4.3. 既存のテンプレートを Red Hat Developer Hub にインポートする
リンクのコピー

カタログプロセッサーを使用して、既存のテンプレートを Red Hat Developer Hub インスタンスに追加できます。

前提条件

  • 少なくとも 1 つのテンプレート YAML ファイルを含むディレクトリーまたはリポジトリーを作成した。
  • GitHub や GitLab などのリポジトリーに保存されているテンプレートを使用する場合は、使用するプロバイダー用の Red Hat Developer Hub 統合を設定した。

手順

  • app-config.yaml 設定ファイルで、catalog.rules セクションを変更してテンプレートのルールを含め、追加するテンプレートを参照するように catalog.locations セクションを設定します (次の例を参照)。 

    # ...
catalog:
  rules:
    - allow: [Template]
    1 
    
  locations:
    - type: url
    2 
    
      target: https://<repository_url>/example-template.yaml
    3 
    
# ...
    1
    新しいテンプレートをカタログに追加するには、Template ルールを追加する必要があります。
    2
    GitHub や GitLab などのリポジトリーからテンプレートをインポートする場合は、url タイプを使用します。
    3
    テンプレートの URL を指定します。

検証

  1. ナビゲーションパネルの Catalog タブをクリックします。
  2. Kind ドロップダウンメニューで、Template を選択します。
  3. テンプレートが既存のテンプレートのリストに表示されていることを確認します。

第5章 Red Hat Developer Hub のラーニングパスのカスタマイズ
リンクのコピー

Red Hat Developer Hub では、データをプロキシーとして app-config.yaml ファイルに渡すことで、ラーニングパスを設定できます。ベース URL には /developer-hub/learning-paths プロキシーを含める必要があります。

注記

learning-path と homepage クイックアクセスプロキシーの両方に重複する pathRewrites を使用するため、learning-paths 設定 (^api/proxy/developer-hub/learning-paths) を作成してから、homepage 設定 (^/api/proxy/developer-hub) を作成する必要があります。

Red Hat Developer Hub の Home ページのカスタマイズの詳細は、Red Hat Developer Hub の Home ページのカスタマイズ を参照してください。

次のソースからラーニングパスにデータを提供できます。

  • GitHub または GitLab でホストされている JSON ファイル
  • API を使用してラーニングパスのデータを JSON 形式で提供する専用サービス

5.1. ホストされた JSON ファイルを使用したラーニングパスへのデータの提供
リンクのコピー

前提条件

Operator または Helm チャートのいずれかを使用して Red Hat Developer Hub をインストールしている。詳細は、OpenShift Container Platform への Red Hat Developer Hub のインストール を参照してください。

手順

JSON ファイルからデータにアクセスするには、次の手順を実行します。

  • app-config.yaml ファイルに次のコードを追加します。 

    proxy:
  endpoints:
    '/developer-hub':
      target: https://raw.githubusercontent.com/
      pathRewrite:
        '^/api/proxy/developer-hub/learning-paths': '/redhat-developer/rhdh/main/packages/app/public/learning-paths/data.json'
        '^/api/proxy/developer-hub/tech-radar': '/redhat-developer/rhdh/main/packages/app/public/tech-radar/data-default.json'
        '^/api/proxy/developer-hub': '/redhat-developer/rhdh/main/packages/app/public/homepage/data.json'
      changeOrigin: true
      secure: true

5.2. 専用サービスを使用したラーニングパスへのデータの提供
リンクのコピー

専用サービスを利用すると、次のことができます。

  • 同じサービスを使用して、設定可能なすべての Developer Hub ページにデータを提供するか、ページごとに異なるサービスを使用できます。
  • Home ページと Tech Radar ページの両方にデータを提供するサンプルサービスとして、red-hat-developer-hub-customization-provider を使用できます。red-hat-developer-hub-customization-provider サービスは、デフォルトの Developer Hub データと同じデータを提供します。必要に応じて、GitHub から red-hat-developer-hub-customization-provider サービスリポジトリーをフォークし、独自のデータで変更できます。
  • red-hat-developer-hub-customization-provider サービスと Developer Hub Helm チャートを同じクラスターにデプロイできます。

前提条件

手順

専用サービスを使用してラーニングパスのデータを提供するには、次の手順を実行します。

  1. 以下のコードを app-config.yaml ファイルに追加します。 

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

    LEARNING_PATH_DATA_URL は、http://<SERVICE_NAME>/learning-paths (例: http://rhdh-customization-provider/learning-paths) という形式で定義します。

    注記

    LEARNING_PATH_DATA_URL は、URL を rhdh-secrets に追加するか、カスタム ConfigMap 内の URL 値で直接置き換えることで定義できます。

  2. 新しい設定が正しく読み込まれるように、Developer Hub Pod を削除します。

第6章 TechDocs の設定
リンクのコピー

Red Hat Developer Hub TechDocs プラグインを設定して、中央の場所で標準化された方法でドキュメントを作成、検索、使用します。以下に例を示します。

docs-like-code アプローチ
技術ドキュメントを Markdown ファイルに記述し、コードとともにプロジェクトリポジトリー内に保存します。
ドキュメントサイトの生成
MkDocs を使用して、Developer Hub で一元的にレンダリングされるドキュメント用に、フル機能の Markdown ベースの静的 HTML サイトを作成します。
ドキュメントサイトのメタデータと統合
静的ドキュメントに加えて、最終更新日、サイト所有者、トップコントリビューター、未解決の GitHub イシュー、Slack サポートチャネル、Stack Overflow Enterprise タグなど、ドキュメントサイトに関する追加のメタデータを参照できます。
組み込みのナビゲーションおよび検索機能
ドキュメントから必要な情報をより迅速かつ簡単に検索します。
アドオン
より高次のドキュメントのニーズに対応するために、アドオンを使用して TechDocs エクスペリエンスをカスタマイズします。

TechDocs プラグインは、Developer Hub インスタンスにデフォルトでプリインストールされ、有効になっています。Red Hat Developer Hub の Helm チャートまたは Red Hat Developer Hub Operator の config map を設定することで、TechDocs プラグインを無効または有効にしたり、その他のパラメーターを変更したりできます。

重要

Red Hat Developer Hub には、コードベースから静的 HTML ドキュメントを生成する TechDocs ビルダーが組み込まれています。ただし、ローカルビルダーのデフォルトの基本設定は、実稼働環境向けではありません。

TechDocs のドキュメントを生成するための専用のリポジトリーで、CI/CD パイプラインを使用できます。生成された静的ファイルは、OpenShift Data Foundation または選択したクラウドストレージソリューションに保存され、静的 HTML ドキュメントサイトに公開されます。

TechDocs によって生成されるファイルを保存するように OpenShift Data Foundation を設定した後、OpenShift Data Foundation をクラウドストレージとして使用するように TechDocs プラグインを設定できます。

6.1. TechDocs ファイルのストレージの設定
リンクのコピー

TechDocs のパブリッシャーは、生成されたファイルをローカルストレージまたは OpenShift Data Foundation、Google GCS、AWS S3、Azure Blob Storage などのクラウドストレージに保存します。

6.1.1. ファイルストレージに OpenShift Data Foundation を使用する
リンクのコピー

OpenShift Data Foundation を設定することで、他のクラウドストレージソリューションを利用することなく、TechDocs によって生成されるファイルを保存できます。

OpenShift Data Foundation は、ObjectBucketClaim カスタムリソース (CR) を備えています。これを使用すると、S3 互換のバケットバックエンドを要求できます。この機能を使用するには、OpenShift Data Foundation Operator をインストールする必要があります。

前提条件

手順

  • 生成された TechDocs ファイルを保存する ObjectBucketClaim CR を作成します。以下に例を示します。 

    apiVersion: objectbucket.io/v1alpha1
kind: ObjectBucketClaim
metadata:
  name: <rhdh_bucket_claim_name>
spec:
  generateBucketName: <rhdh_bucket_claim_name>
  storageClassName: openshift-storage.noobaa.io
    注記

    Developer Hub の ObjectBucketClaim CR を作成すると、Developer Hub ObjectBucketClaim の config map とシークレットの両方が自動的に作成されます。config map とシークレットの名前は ObjectBucketClaim CR と同じです。

ObjectBucketClaim CR を作成したら、config map とシークレットに保存されている情報を使用して、Developer Hub コンテナーからその情報に環境変数としてアクセスできるようにします。Developer Hub のインストールに使用した方法に応じて、Red Hat Developer Hub の Helm チャート設定または Operator 設定にアクセス情報を追加します。

6.1.2. Helm チャートを使用してオブジェクトストレージをコンテナーからアクセス可能にする
リンクのコピー

ObjectBucketClaim カスタムリソース (CR) を作成すると、Developer Hub ObjectBucketClaim の config map とシークレットの両方が自動的に作成されます。config map とシークレットには ObjectBucket のアクセス情報が含まれています。Helm チャート設定にアクセス情報を追加すると、次の環境変数がコンテナーに追加され、Developer Hub コンテナーからその情報にアクセスできるようになります。

  • BUCKET_NAME
  • BUCKET_HOST
  • BUCKET_PORT
  • BUCKET_REGION
  • BUCKET_SUBREGION
  • AWS_ACCESS_KEY_ID
  • AWS_SECRET_ACCESS_KEY

これらの変数は、TechDocs プラグインの設定で使用されます。

前提条件

手順

  • Helm チャート値の upstream.backstage キーに、extraEnvVarsSecrets フィールドと extraEnvVarsCM フィールドの値として、Developer Hub の ObjectBucketClaim シークレットの名前を入力します。以下に例を示します。 

    upstream:
  backstage:
    extraEnvVarsSecrets:
      - <rhdh_bucket_claim_name>
    extraEnvVarsCM:
      - <rhdh_bucket_claim_name>
6.1.2.1. Helm チャート用の TechDocs プラグイン設定の例
リンクのコピー

次の例は、TechDocs プラグイン用の Developer Hub Helm チャート設定を示しています。 

global:
  dynamic:
    includes:
      - 'dynamic-plugins.default.yaml'
  plugins:
    - disabled: false
      package: ./dynamic-plugins/dist/backstage-plugin-techdocs-backend-dynamic
      pluginConfig:
        techdocs:
          builder: external
          generator:
            runIn: local
          publisher:
            awsS3:
              bucketName: '${BUCKET_NAME}'
              credentials:
                accessKeyId: '${AWS_ACCESS_KEY_ID}'
                secretAccessKey: '${AWS_SECRET_ACCESS_KEY}'
              endpoint: 'https://${BUCKET_HOST}'
              region: '${BUCKET_REGION}'
              s3ForcePathStyle: true
            type: awsS3

6.1.3. Operator を使用してオブジェクトストレージをコンテナーからアクセス可能にする
リンクのコピー

ObjectBucketClaim カスタムリソース (CR) を作成すると、Developer Hub ObjectBucketClaim の config map とシークレットの両方が自動的に作成されます。config map とシークレットには ObjectBucket のアクセス情報が含まれています。Operator 設定にアクセス情報を追加すると、次の環境変数がコンテナーに追加され、Developer Hub コンテナーからその情報にアクセスできるようになります。

  • BUCKET_NAME
  • BUCKET_HOST
  • BUCKET_PORT
  • BUCKET_REGION
  • BUCKET_SUBREGION
  • AWS_ACCESS_KEY_ID
  • AWS_SECRET_ACCESS_KEY

これらの変数は、TechDocs プラグインの設定で使用されます。

前提条件

  • Operator を使用して OpenShift Container Platform に Red Hat Developer Hub をインストールした。
  • TechDocs によって生成されるファイルを保存するための ObjectBucketClaim CR を作成した。

手順

  • Backstage CR で、Developer Hub ObjectBucketClaim config map の名前を spec.application.extraEnvs.configMaps フィールドの値として入力し、Developer Hub ObjectBucketClaim シークレット名を spec.application.extraEnvs.secrets フィールドの値として入力します。以下に例を示します。 

    apiVersion: objectbucket.io/v1alpha1
kind: Backstage
metadata:
 name: <name>
spec:
  application:
    extraEnvs:
      configMaps:
        - name: <rhdh_bucket_claim_name>
      secrets:
        - name: <rhdh_bucket_claim_name>
6.1.3.1. Operator 用の TechDocs プラグイン設定の例
リンクのコピー

次の例は、TechDocs プラグイン用の Red Hat Developer Hub Operator の config map 設定を示しています。 

kind: ConfigMap
apiVersion: v1
metadata:
  name: dynamic-plugins-rhdh
data:
  dynamic-plugins.yaml: |
    includes:
      - dynamic-plugins.default.yaml
    plugins:
      - disabled: false
        package: ./dynamic-plugins/dist/backstage-plugin-techdocs-backend-dynamic
        pluginConfig:
          techdocs:
            builder: external
            generator:
              runIn: local
            publisher:
              awsS3:
                bucketName: '${BUCKET_NAME}'
                credentials:
                  accessKeyId: '${AWS_ACCESS_KEY_ID}'
                  secretAccessKey: '${AWS_SECRET_ACCESS_KEY}'
                endpoint: 'https://${BUCKET_HOST}'
                region: '${BUCKET_REGION}'
                s3ForcePathStyle: true
              type: awsS3

6.2. TechDocs サイトを生成して公開するための CI/CD の設定
リンクのコピー

TechDocs は、OpenShift Data Foundation などのクラウドストレージバケットから静的に生成されたドキュメントファイルを読み取ります。ドキュメントサイトは、ドキュメントファイルを含むリポジトリーに関連付けられた CI/CD ワークフローで生成されます。techdocs-cli CLI ツールを使用して、CI でドキュメントを生成し、クラウドストレージに公開できます。

次の例を使用して、TechDocs 公開用のスクリプトを作成できます。 

# Prepare
REPOSITORY_URL='https://github.com/org/repo'
git clone $REPOSITORY_URL
cd repo

# Install @techdocs/cli, mkdocs and mkdocs plugins
npm install -g @techdocs/cli
pip install "mkdocs-techdocs-core==1.*"

# Generate
techdocs-cli generate --no-docker

# Publish
techdocs-cli publish --publisher-type awsS3 --storage-name <bucket/container> --entity <Namespace/Kind/Name>

TechDocs ワークフローは、ユーザーがドキュメントファイルを含むリポジトリーに変更を加えたときに CI を開始します。docs/ ディレクトリーまたは mkdocs.yml 内のファイルが変更されたときにのみワークフローを開始するように設定できます。

6.2.1. CI 用のリポジトリーの準備
リンクのコピー

CI の最初のステップは、作業ディレクトリーにドキュメントソースリポジトリーを複製することです。

手順

  • 作業ディレクトリーにドキュメントソースリポジトリーを複製するには、次のコマンドを入力します。 

    git clone <https://path/to/docs-repository/>

6.2.2. TechDocs サイトの生成
リンクのコピー

手順

技術ドキュメントを生成するように CI/CD を設定するには、次の手順を実行します。

  1. 次のコマンドを使用して、npx パッケージをインストールし、techdocs-cli を実行します。 

    npm install -g npx

  2. 次のコマンドを使用して techdocs-cli ツールをインストールします。 

    npm install -g @techdocs/cli

  3. 次のコマンドを使用して、mkdocs プラグインをインストールします。 

    pip install "mkdocs-techdocs-core==1.*"

  4. 次のコマンドを使用して、TechDocs サイトを生成します。 

    npx @techdocs/cli generate --no-docker --source-dir <path_to_repo> --output-dir ./site

    <path_to_repo> は、リポジトリーを複製するために使用したファイルパス内の場所です。

6.2.3. TechDocs サイトの公開
リンクのコピー

手順

TechDocs サイトを公開するには、次の手順を実行します。

  1. クラウドストレージプロバイダーに必要な認証環境変数を設定します。

  2. 次のコマンドを使用して、技術ドキュメントを公開します。 

    npx @techdocs/cli publish --publisher-type <awsS3|googleGcs> --storage-name <bucket/container> --entity <namespace/kind/name> --directory ./site

  3. ソフトウェアテンプレートに .github/workflows/techdocs.yml ファイルを追加します。以下に例を示します。 

    name: Publish TechDocs Site

on:
 push:
   branches: [main]
   # You can even set it to run only when TechDocs related files are updated.
   # paths:
   #   - "docs/**"
   #   - "mkdocs.yml"

jobs:
 publish-techdocs-site:
   runs-on: ubuntu-latest

   # The following secrets are required in your CI environment for publishing files to AWS S3.
   # e.g. You can use GitHub Organization secrets to set them for all existing and new repositories.
   env:
     TECHDOCS_S3_BUCKET_NAME: ${{ secrets.TECHDOCS_S3_BUCKET_NAME }}
     AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
     AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
     AWS_REGION: ${{ secrets.AWS_REGION }}
     ENTITY_NAMESPACE: 'default'
     ENTITY_KIND: 'Component'
     ENTITY_NAME: 'my-doc-entity'
     # In a Software template, Scaffolder will replace {{cookiecutter.component_id | jsonify}}
     # with the correct entity name. This is same as metadata.name in the entity's catalog-info.yaml
     # ENTITY_NAME: '{{ cookiecutter.component_id | jsonify }}'

   steps:
     - name: Checkout code
       uses: actions/checkout@v3

     - uses: actions/setup-node@v3
     - uses: actions/setup-python@v4
       with:
         python-version: '3.9'

     - name: Install techdocs-cli
       run: sudo npm install -g @techdocs/cli

     - name: Install mkdocs and mkdocs plugins
       run: python -m pip install mkdocs-techdocs-core==1.*

     - name: Generate docs site
       run: techdocs-cli generate --no-docker --verbose

     - name: Publish docs site
       run: techdocs-cli publish --publisher-type awsS3 --storage-name $TECHDOCS_S3_BUCKET_NAME --entity $ENTITY_NAMESPACE/$ENTITY_KIND/$ENTITY_NAME

第7章 Red Hat Developer Hub の Tech Radar ページのカスタマイズ
リンクのコピー

Red Hat Developer Hub では、Tech Radar ページは tech-radar 動的プラグインによって提供されます。このプラグインは、デフォルトでは無効になっています。Red Hat Developer Hub で動的プラグインを有効にする方法は、Red Hat Developer Hub でのプラグインの設定 を参照してください。

Red Hat Developer Hub では、データをプロキシーとして app-config.yaml ファイルに渡すことで、ラーニングパスを設定できます。Tech Radar のベース URL に、/developer-hub/tech-radar プロキシーを含める必要があります。

注記

tech-radar と homepage クイックアクセスプロキシーの両方に重複する pathRewrites を使用するため、tech-radar 設定 (^api/proxy/developer-hub/tech-radar) を作成してから、homepage 設定 (^/api/proxy/developer-hub) を作成する必要があります。

Red Hat Developer Hub の Home ページのカスタマイズの詳細は、Red Hat Developer Hub の Home ページのカスタマイズ を参照してください。

以下のソースから Tech Radar ページにデータを提供できます。

  • GitHub または GitLab でホストされている JSON ファイル
  • API を使用して Tech Radar のデータを JSON 形式で提供する専用サービス

7.1. ホストされた JSON ファイルを使用した Tech Radar ページへのデータの提供
リンクのコピー

前提条件

手順

JSON ファイルからデータにアクセスするには、次の手順を実行します。

  1. ./dynamic-plugins/dist/backstage-community-plugin-tech-radar および /dynamic-plugins/dist/backstage-community-plugin-tech-radar-backend-dynamic プラグインを有効にします。

  2. app-config.yaml ファイルに次のコードを追加します。 

    techRadar:
    url: ${TECH_RADAR_DATA_URL}
    1
    1
    TECH_RADAR_DATA_URL は、JSON データがロードされる URL です。

7.2. 専用サービスを使用した Tech Radar ページへのデータの提供
リンクのコピー

専用サービスを利用すると、次のことができます。

  • 同じサービスを使用して、設定可能なすべての Developer Hub ページにデータを提供するか、ページごとに異なるサービスを使用できます。
  • Home ページと Tech Radar ページの両方にデータを提供するサンプルサービスとして、red-hat-developer-hub-customization-provider を使用できます。red-hat-developer-hub-customization-provider サービスは、デフォルトの Developer Hub データと同じデータを提供します。必要に応じて、GitHub から red-hat-developer-hub-customization-provider サービスリポジトリーをフォークし、独自のデータで変更できます。
  • red-hat-developer-hub-customization-provider サービスと Developer Hub Helm チャートを同じクラスターにデプロイできます。

前提条件

手順

個別のサービスを使用して Tech Radar のデータを提供するには、次の手順を実行します。

  1. 次のコードを app-config.yaml ファイルに追加して、専用サービスを許可されたホストとして追加します。 

    backend:
   reading:
        allow:
          - host: 'hostname'

  2. app-config.yaml ファイルに以下を追加します。 

    techRadar:
    url: ${TECH_RADAR_DATA_URL}
    1
    1
    TECH_RADAR_DATA_URL は、JSON データがロードされる URL です。

第8章 Red Hat Developer Hub の外観のカスタマイズ
リンクのコピー

Red Hat Developer Hub では、次のデフォルトのテーマ設定が利用できます。

Red Hat Developer Hub テーマ
開発者ポータルを標準の Red Hat Developer Hub インスタンスのような外観にするデフォルトのテーマ設定。詳細は、「デフォルトの Red Hat Developer Hub テーマ」 を参照してください。
Backstage テーマ
開発者ポータルを標準の Backstage インスタンスのような外観にするデフォルトのテーマ設定。詳細は、「デフォルトの Backstage テーマ」 を参照してください。

app-config-rhdh.yaml ファイルを変更して、デフォルトテーマの特定のパラメーターを変更または無効にしたり、完全にカスタマイズしたテーマを作成したりできます。app-config-rhdh.yaml ファイルから、次のような共通テーマコンポーネントをカスタマイズできます。

  • 会社名とロゴ
  • 段落、見出し、ヘッダー、およびボタン内テキストのフォントの色、サイズ、およびスタイル
  • ヘッダーの色、グラデーション、および形状
  • ボタンの色
  • ナビゲーションインジケーターの色

テーマモード (Light Theme、Dark Theme、Auto) など、一部のコンポーネントは、Developer Hub GUI からカスタマイズすることもできます。

8.1. Developer Hub インスタンスのテーマモードのカスタマイズ
リンクのコピー

注記

Developer Hub では、テーマ設定を使用してさまざまな UI コンポーネントの外観と操作性を変更します。そのため、RHDH ページで使用される背景色やフォントの変更以外に、ボタン、タブ、サイドバー、カード、テーブルなどのさまざまな UI コンポーネントが変更されていることに気づくはずです。

Developer Hub インスタンスには、次のいずれかのテーマモードを選択できます。

  • Light theme
  • Dark theme
  • Auto

デフォルトのテーマモードは Auto です。システム設定に基づいてライトテーマかダークテーマが自動的に設定されます。

前提条件

  • Developer Hub Web コンソールにログインしている。

手順

  1. Developer Hub Web コンソールから、Settings をクリックします。

  2. Appearance パネルで、LIGHT THEME、DARK THEME、または AUTO をクリックしてテーマモードを変更します。

    カスタムテーマモード 1

8.2. Developer Hub インスタンスのブランディングロゴのカスタマイズ
リンクのコピー

以下の例のように、app-config.yaml ファイルで branding セクションを設定して、Developer Hub インスタンスのブランディングロゴをカスタマイズできます。 

app:
  branding:
    fullLogo: ${BASE64_EMBEDDED_FULL_LOGO}
1 

    iconLogo: ${BASE64_EMBEDDED_ICON_LOGO}
2

ここでは、以下のようになります。

1
fullLogo は、展開された (固定された) サイドバー上のロゴであり、base64 でエンコードされた画像を想定しています。
2
iconLogo は、折りたたまれた (固定されていない) サイドバーのロゴであり、base64 でエンコードされた画像を想定しています。

BASE64_EMBEDDED_FULL_LOGO 環境変数を以下のようにフォーマットすることができます。 

BASE64_EMBEDDED_FULL_LOGO: "data:_<media_type>_;base64,<base64_data>"

次の例は、データを使用して BASE64_EMBEDDED_FULL_LOGO をカスタマイズする方法を示しています：_<media_type>_;base64, <base64_data > 形式： 

SVGLOGOBASE64=$(base64 -i logo.svg)
BASE64_EMBEDDED_FULL_LOGO="data:image/svg+xml;base64,$SVGLOGOBASE64"

image/svg+xml をイメージの正しいメディアタイプ（例： image/png および image/jpeg）に置き換え、ファイル拡張子を調整します。その結果、外部ファイルを参照せずにロゴを直接埋め込むことができます。

次の例に示すように、branding セクションの fullLogoWidth フィールドに値を設定して、ブランディングロゴの幅をカスタマイズすることもできます。 

app:
  branding:
    fullLogoWidth: 110px
1 

# ...
1
ロゴの幅のデフォルト値は 110px です。サポートされている単位は、integer、px、em、rem、パーセンテージです。

8.3. Developer Hub インスタンスのサイドバーメニュー項目のカスタマイズ
リンクのコピー

Red Hat Developer Hub のサイドバーメニューは、設定可能な 2 つの主要部分で設定されます。

動的プラグインメニュー項目
設定とアクティブなプラグインは、サイドバーメニューの一部を動的に定義します。
メインメニュー項目

サイドバーのコアナビゲーション構造は static です。

  • 動的プラグインメニュー項目: これらの項目はメインメニューの下に表示され、インストールされているプラグインに基づいてカスタマイズできます。メインメニュー項目セクションは動的であり、設定やインストールされているプラグインに基づいて変更できます。

手順

  1. 次の手順に従って、メインメニュー項目をカスタマイズします。

    1. app-config.yaml ファイルを開きます。
    2. メインメニュー項目の順序と親子関係をカスタマイズするには、dynamicPlugins.frontend.default.main-menu-items.menuItems フィールドを使用します。
    3. 動的プラグインのメニュー項目の場合は、dynamicPlugins.frontend.<package_name>.menuItems フィールドを使用します。

app-config.yaml ファイルの例

dynamicPlugins:
  frontend:
    default.main-menu-items:
        menuItems:
          default.home:
            title: Home
            icon: home
            priority: 100
          default.my-group:
            title: My Group
            icon: group
            priority: 90
          default.catalog:
            title: Catalog
            icon: category
            to: catalog
            priority: 80
          default.apis:
            title: APIs
            icon: extension
            to: api-docs
            priority: 70
          default.learning-path:
            title: Learning Paths
            icon: school,
            to: learning-paths
            priority: 60
          default.create:
            title: Create
            icon: add
            to: create
            priority: 50

手順

  1. 動的プラグインメニュー項目を設定するには、< plugin_name > プラグインの menuItems セクションを app-config.yaml ファイルに更新します。以下に例を示します。 

    dynamicPlugins:
  frontend:
    _<plugin_name>_:
    1 
    
      menuItems:
        <menu_item_name>:
    2 
    
          icon: # home | group | category | extension | school | _<my_icon>_
    3 
    
          title: _<plugin_page_title>_
    4 
    
          priority: 10
    5 
    
          parent: favorites
    6
    1
    & lt;plugin_name&gt; : プラグイン名を入力します。この名前は、package.json ファイルの scalprum.name キーと同じです。
    2
    <menu_item_name& gt;: スタンドアロンメニュー項目または親メニュー項目のいずれかのメインサイドバーナビゲーションに一意の名前を入力します。このフィールドでプラグインメニュー項目を指定した場合、メニュー項目の名前は、dynamicRoutes の対応するパスで使用される名前と一致する必要があります。たとえば、dynamicRoutes が path: /my-plugin を定義した場合は、menu_item_name を my-plugin として定義する必要があります。
    3
    アイコン: （オプション）アイコン名を入力します。次のアイコンのいずれかを使用できます。
    • ホーム、グループ、カテゴリー、拡張子、学校 などのデフォルトのアイコン。デフォルトのアイコンを使用するには、アイコンを(" ")空の文字列として設定します。
    • カスタムアイコン。< my_icon> は カスタムアイコンの名前を指定します。
    • icon: <svg width="20px" height="20px" viewBox="0 0 512" xmlns="http://www.w3.org/2000/svg" fill="#⚙ff">…​</svg> などの SVG アイコン
    • アイコンなどの HTML イメージ： https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png
    4
    title: （任意）メニュー項目のタイトルを入力します。menuItem.text の下にある dynamicRoutes 設定でタイトルがすでに指定されている場合はこれを省略します。サイドバーからタイトルを非表示にするには、タイトルを空の文字列(" ")に設定します。
    5
    優先度: （任意）サイドバーにメニュー項目が表示される順序を設定します。デフォルトの優先度は 0 で、項目はリストの一番下に配置されます。優先度の値が高いほど、その項目はサイドバー内の上の方に表示されます。このフィールドは、セクションごとに定義できます。
    6
    parent: （任意）現在の項目が入れ子になっている親メニュー項目を入力します。このフィールドを使用する場合は、有効なプラグインの menuItems 設定の他の場所の親メニュー項目を定義する必要があります。このフィールドは、セクションごとに定義できます。

    menuItems の設定例

    dynamicPlugins:
  frontend:
    _<package_name>_:
      dynamicRoutes:
        - path: /my-plugin
          module: CustomModule
          importName: FooPluginPage
          menuItem:
            icon: fooIcon
            text: Foo Plugin Page
      menuItems:
        my-plugin:
    1 
    
          priority: 10
    2 
    
          parent: favorites
    3 
    
        favorites:
    4 
    
          icon: favorite
    5 
    
          title: Favorites
    6 
    
          priority: 100
    7

    1
    my-plugin: dynamicRoutes の path フィールドの値と一致します。
    2
    優先度: 親メニュー項目の下にあるプラグインの順序を制御します。
    3
    parent: このプラグインを favorites 親メニュー項目に見積もります。
    4
    favorites: 親メニュー項目の設定。
    5
    アイコン: RHDH システムアイコンからお気に 入り アイコンを表示します。
    6
    title: 親メニュー項目のタイトル名を表示します。
    7
    優先度: サイドバーのお気に 入り メニュー項目の順序。

  2. メインのメニュー項目を変更したり、カスタムのメニュー項目を追加するには、app-config.yaml ファイルの default.main-menu-items > menuItems セクションにセクションを追加します。default. 接頭辞を使用して、キーをメインメニュー項目として識別します。 

    dynamicPlugins:
  frontend:
    default.main-menu-items:
      menuItems:
        default._<menu_group_parent_item_name>_:
    1 
    
          icon: # home | group | category | extension | school | _<my_icon>_
    2 
    
          title: _<menu_group_parent_title>_
    3 
    
          priority: 10
    4 
    
        default._<menu_item_name>_:
    5 
    
          parent: _<menu_group_parent_item_name>_
    6 
    
          icon:  # home | group | category | extension | school | _<my_icon>_
    7 
    
          title: _<my_menu_title>_
    8 
    
          to: _<path_to_the_menu_target_page>_
    9 
    
          priority: 100
    10
    1
    デフォルト。&lt;menu_group_parent_item_name > : （オプション）メニュー項目の親項目名を入力し、静的なメインメニュー項目を設定します。デフォルト。<menu_item_name > に 親 値が設定されていない場合、このフィールドは必要ありません。
    2
    アイコン: メニューアイコンを入力します。親メニュー項目に必要です。
    3
    タイトル: メニューグループのタイトルを入力します。親メニュー項目に必要です。
    4
    priority: （オプション）メニューレベルでこのメニュー項目の順序を入力します。
    5
    Default .<menu_item_name >: デフォルト値を上書きするメニュー項目名を入力します。メインのメニュー項目を特定するには、default. 接頭辞を追加します。
    6
    parent: （任意）このアイテムの親メニュー項目を入力します。<menu_item_name> がメニュー項目の子として指定されている場合は必須です。
    7
    アイコン: （オプション）メニューアイコンを入力します。デフォルトのアイコンを使用するには、アイコンを(" "")空の文字列として設定します。
    8
    title: （任意）メニューグループのタイトルを入力します。新しいカスタムメインメニュー項目を追加する場合にのみ必要です。サイドバーからデフォルトのメインのメニュー項目のタイトルを非表示にするには、タイトルを空の文字列(" ")に設定します。
    9
    : （オプション）メニュー項目の移動先のパスを入力します。設定されていない場合は、デフォルトでホームページに設定されます。
    10
    priority: （オプション）メニューレベルでこのメニュー項目の順序を入力します。

    mainItems の設定例

    default.main-menu-items:
      menuItems:
        default.catalog:
          icon: category
    1 
    
          title: My Catalog
          priority: 5
        default.learning-path:
          title: ''
    2 
    
        default.parentlist:
    3 
    
          title: Overview
          icon: bookmarks
        default.home:
          parent: default.parentlist
    4 
    
        default.references:
          title: References
    5 
    
          icon: school
    6 
    
          to: /references
    7

    1
    アイコン: カタログのアイコンのデフォルトメニュー項目を変更するかどうかを指定します。
    2
    title: 空の文字列 " " を指定して、デフォルトのサイドバーから学習パスを非表示にします。
    3
    default.parentlist: 親メニュー項目を導入します。
    4
    parent: default.parentlist の親メニュー項目の下にあるホームメニューです。
    5
    title: default.referencesの名前を指定します。
    6
    アイコン: 学校 のアイコンを表示します。
    7
    : default.references を /references ページにリダイレクトします。

8.4. Developer Hub インスタンスのテーマモードカラーパレットのカスタマイズ
リンクのコピー

次の例に示すように、Developer Hub インスタンスの light および dark テーマモードのカラーパレットをカスタマイズするには、app-config.yaml ファイルの branding.theme セクションで light.palette および dark.palette パラメーターを設定します。 

app:
  branding:
    theme:
      light:
        palette:
          primary:
            main: <light_primary_color>
1 

          navigation:
            indicator: <light_indicator_color>
2 

        pageTheme:
          default:
            backgroundColor: [<light_background_color_1>, <light_background_color_2>]
3 

      dark:
        palette:
          primary:
            main: <dark_primary_color>
4 

          navigation:
            indicator: <dark_indicator_color>
5 

        pageTheme:
          default:
            backgroundColor: [<dark_background_color_1>, <dark_background_color_2>]
6 

# ...
1
ライトカラーパレットのメインのプライマリーカラー (例: #ffffff または white)。
2
ライトカラーパレットのナビゲーションインジケーターの色。これは、ナビゲーションパネルで選択中のタブを示す縦のバーです (例: #FF0000 または red)。
3
ライトカラーパレットのデフォルトページテーマの背景色 (例: #ffffff または white)。
4
ダークカラーパレットのメインのプライマリーカラー (例: #000000 または black)。
5
ダークカラーパレットのナビゲーションインジケーターの色。これは、ナビゲーションパネルで選択中のタブを示す縦のバーです (例: #FF0000 または red)。
6
ダークカラーパレットのデフォルトのページテーマの背景色 (例: #000000 または 黒)。

関連情報

8.5. Developer Hub インスタンスのページテーマヘッダーのカスタマイズ
リンクのコピー

app-config.yaml ファイルの branding.theme セクションを変更することで、Developer Hub インスタンスの light および dark テーマモードのヘッダー色をカスタマイズできます。Home、Catalog、API ページなど、追加の Developer Hub ページのページヘッダーをカスタマイズすることもできます。 

app:
  branding:
    theme:
      light:
1 

        palette: {}
        pageTheme:
          default:
2 

            backgroundColor: "<default_light_background_color>"
3 

            fontColor: "<default_light_font_color>"
4 

            shape: none
5 

          apis:
6 

            backgroundColor: "<apis_light_background_color>"
            fontColor: "<apis_light_font_color>"
            shape: none
      dark:
        palette: {}
        pageTheme:
          default:
            backgroundColor: "<default_dark_background_color>"
            fontColor: "<default_dark_font_color>"
            shape: none
# ...
1
テーマモード (例: light、dark)
2
デフォルトのページテーマ設定の yaml ヘッダー
3
ページヘッダーの背景色 (例: #ffffff または white)
4
ページヘッダーのテキストの色 (例: #000000 または black)
5
ページヘッダーのパターン (例: wave、round、none)
6
特定のページテーマ設定の yaml ヘッダー (例: apis、home)

8.6. Developer Hub インスタンスのフォントのカスタマイズ
リンクのコピー

次の例に示すように、app-config.yaml ファイルの typography セクションを設定して、ページテキストのデフォルトのフォントファミリーおよびサイズ、および各見出しレベルのフォントファミリーおよびサイズを変更できます。 

app:
  branding:
    theme:
      light:
        typography:
          fontFamily: "Times New Roman"
          htmlFontSize: 11 # smaller is bigger
          h1:
            fontFamily: "Times New Roman"
            fontSize: 40
          h2:
            fontFamily: "Times New Roman"
            fontSize: 30
          h3:
            fontFamily: "Times New Roman"
            fontSize: 30
          h4:
            fontFamily: "Times New Roman"
            fontSize: 30
          h5:
            fontFamily: "Times New Roman"
            fontSize: 30
          h6:
            fontFamily: "Times New Roman"
            fontSize: 30
      dark:
        typography:
          fontFamily: "Times New Roman"
          htmlFontSize: 11 # smaller is bigger
          h1:
            fontFamily: "Times New Roman"
            fontSize: 40
          h2:
            fontFamily: "Times New Roman"
            fontSize: 30
          h3:
            fontFamily: "Times New Roman"
            fontSize: 30
          h4:
            fontFamily: "Times New Roman"
            fontSize: 30
          h5:
            fontFamily: "Times New Roman"
            fontSize: 30
          h6:
            fontFamily: "Times New Roman"
            fontSize: 30
# ...

8.7. デフォルトの Red Hat Developer Hub テーマ
リンクのコピー

デフォルトの Red Hat Developer Hub テーマ設定を使用すると、Developer Hub インスタンスを標準の Red Hat Developer Hub インスタンスのような外観にすることができます。app-config.yaml ファイルを変更して、特定のパラメーターをカスタマイズまたは無効化することもできます。

8.7.1. デフォルトの Red Hat Developer Hub テーマのカラーパレット
リンクのコピー

app-config.yaml ファイルは、デフォルトの Red Hat Developer Hub のカラーパレットについて以下の設定を使用します。 

app:
  branding:
    theme:
      light:
        variant: "rhdh"
        mode: "light"
        palette:
          background:
            default: "#F8F8F8"
            paper: "#FFFFFF"
          banner:
            closeButtonColor: "#FFFFFF"
            error: "#E22134"
            info: "#2E77D0"
            link: "#000000"
            text: "#FFFFFF"
            warning: "#FF9800"
          border: "#E6E6E6"
          bursts:
            backgroundColor:
              default: "#7C3699"
            fontColor: "#FEFEFE"
            gradient:
              linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
            slackChannelText: "#ddd"
          errorBackground: "#FFEBEE"
          errorText: "#CA001B"
          gold: "#FFD600"
          highlight: "#FFFBCC"
          infoBackground: "#ebf5ff"
          infoText: "#004e8a"
          link: "#0A6EBE"
          linkHover: "#2196F3"
          mode: "light"
          navigation:
            background: "#222427"
            indicator: "#0066CC"
            color: "#ffffff"
            selectedColor: "#ffffff"
            navItem:
              hoverBackground: "#3c3f42"
            submenu:
              background: "#222427"
          pinSidebarButton:
            background: "#BDBDBD"
            icon: "#181818"
          primary:
            main: "#0066CC"
          secondary:
            main: "#8476D1"
          status:
            aborted: "#757575"
            error: "#E22134"
            ok: "#1DB954"
            pending: "#FFED51"
            running: "#1F5493"
            warning: "#FF9800"
          tabbar:
            indicator: "#9BF0E1"
          textContrast: "#000000"
          textSubtle: "#6E6E6E"
          textVerySubtle: "#DDD"
          warningBackground: "#F59B23"
          warningText: "#000000"
          text:
            primary: "#151515"
            secondary: "#757575"
          rhdh:
            general:
              disabledBackground: "#D2D2D2"
              disabled: "#6A6E73"
              searchBarBorderColor: "#E4E4E4"
              formControlBackgroundColor: "#FFF"
              mainSectionBackgroundColor: "#FFF"
              headerBottomBorderColor: "#C7C7C7"
              cardBackgroundColor: "#FFF"
              sidebarBackgroundColor: "#212427"
              cardBorderColor: "#C7C7C7"
              tableTitleColor: "#181818"
              tableSubtitleColor: "#616161"
              tableColumnTitleColor: "#151515"
              tableRowHover: "#F5F5F5"
              tableBorderColor: "#E0E0E0"
              tableBackgroundColor: "#FFF"
              tabsBottomBorderColor: "#D2D2D2"
              contrastText: "#FFF"
            primary:
              main: "#0066CC"
              focusVisibleBorder: "#0066CC"
            secondary:
              main: "#8476D1"
              focusVisibleBorder: "#8476D1"
            cards:
              headerTextColor: "#151515"
              headerBackgroundColor: "#FFF"
              headerBackgroundImage: "none"

      dark:
        variant: "rhdh"
        mode: "dark"
        palette:
          background:
            default: "#333333"
            paper: "#424242"
          banner:
            closeButtonColor: "#FFFFFF"
            error: "#E22134"
            info: "#2E77D0"
            link: "#000000"
            text: "#FFFFFF"
            warning: "#FF9800"
          border: "#E6E6E6"
          bursts:
            backgroundColor:
              default: "#7C3699"
            fontColor: "#FEFEFE"
            gradient:
              linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
            slackChannelText: "#ddd"
          errorBackground: "#FFEBEE"
          errorText: "#CA001B"
          gold: "#FFD600"
          highlight: "#FFFBCC"
          infoBackground: "#ebf5ff"
          infoText: "#004e8a"
          link: "#9CC9FF"
          linkHover: "#82BAFD"
          mode: "dark"
          navigation:
            background: "#0f1214"
            indicator: "#0066CC"
            color: "#ffffff"
            selectedColor: "#ffffff"
            navItem:
              hoverBackground: "#3c3f42"
            submenu:
              background: "#0f1214"
          pinSidebarButton:
            background: "#BDBDBD"
            icon: "#404040"
          primary:
            main: "#1FA7F8"
          secondary:
            main: "#B2A3FF"
          status:
            aborted: "#9E9E9E"
            error: "#F84C55"
            ok: "#71CF88"
            pending: "#FEF071"
            running: "#3488E3"
            warning: "#FFB84D"
          tabbar:
            indicator: "#9BF0E1"
          textContrast: "#FFFFFF"
          textSubtle: "#CCCCCC"
          textVerySubtle: "#727272"
          warningBackground: "#F59B23"
          warningText: "#000000"

          rhdh:
            general:
              disabledBackground: "#444548"
              disabled: "#AAABAC"
              searchBarBorderColor: "#57585a"
              formControlBackgroundColor: "#36373A"
              mainSectionBackgroundColor: "#0f1214"
              headerBottomBorderColor: "#A3A3A3"
              cardBackgroundColor: "#292929"
              sidebarBackgroundColor: "#1b1d21"
              cardBorderColor: "#A3A3A3"
              tableTitleColor: "#E0E0E0"
              tableSubtitleColor: "#E0E0E0"
              tableColumnTitleColor: "#E0E0E0"
              tableRowHover: "#0f1214"
              tableBorderColor: "#515151"
              tableBackgroundColor: "#1b1d21"
              tabsBottomBorderColor: "#444548"
              contrastText: "#FFF"
            primary:
              main: "#1FA7F8"
              focusVisibleBorder: "#ADD6FF"
            secondary:
              main: "#B2A3FF"
              focusVisibleBorder: "#D0C7FF"
            cards:
              headerTextColor: "#FFF"
              headerBackgroundColor: "#0f1214"
              headerBackgroundImage: "none"

または、app-config.yaml ファイルで以下の バリアント および モード 値を使用して、以前のデフォルト設定を適用することもできます。 

app:
  branding:
    theme:
      light:
        variant: "rhdh"
        mode: "light"
      dark:
        variant: "rhdh"
        mode: "dark"

8.7.2. デフォルトの Red Hat Developer Hub ページテーマ
リンクのコピー

以下の app-config.yaml ファイル設定に示されるように、デフォルトの Developer Hub ヘッダーの色はライトモードのホワイトで、ダークモードのブラックリストです。 

app:
  branding:
    theme:
      light:
        palette: {}
        defaultPageTheme: default
        pageTheme:
          default:
            backgroundColor: "#ffffff"
      dark:
        palette: {}
        defaultPageTheme: default
        pageTheme:
          default:
            backgroundColor: "#0f1214"

8.8. デフォルトの Backstage テーマ
リンクのコピー

デフォルトの Backstage テーマ設定を使用すると、Developer Hub インスタンスを標準の Backstage インスタンスのような外観にすることができます。app-config.yaml ファイルを変更して、特定のパラメーターをカスタマイズまたは無効化することもできます。

8.8.1. デフォルトの Backstage テーマのカラーパレット
リンクのコピー

app-config.yaml ファイルは、デフォルトの Backstage カラーパレットに以下の設定を使用します。 

app:
  branding:
    theme:
      light:
        variant: "backstage"
        mode: "light"
        palette:
          background:
            default: "#F8F8F8"
            paper: "#FFFFFF"
          banner:
            closeButtonColor: "#FFFFFF"
            error: "#E22134"
            info: "#2E77D0"
            link: "#000000"
            text: "#FFFFFF"
            warning: "#FF9800"
          border: "#E6E6E6"
          bursts:
            backgroundColor:
              default: "#7C3699"
            fontColor: "#FEFEFE"
            gradient:
              linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
            slackChannelText: "#ddd"
          errorBackground: "#FFEBEE"
          errorText: "#CA001B"
          gold: "#FFD600"
          highlight: "#FFFBCC"
          infoBackground: "#ebf5ff"
          infoText: "#004e8a"
          link: "#0A6EBE"
          linkHover: "#2196F3"
          navigation:
            background: "#171717"
            color: "#b5b5b5"
            indicator: "#9BF0E1"
            navItem:
              hoverBackground: "#404040"
            selectedColor: "#FFF"
            submenu:
              background: "#404040"
          pinSidebarButton:
            background: "#BDBDBD"
            icon: "#181818"
          primary:
            main: "#1F5493"
          status:
            aborted: "#757575"
            error: "#E22134"
            ok: "#1DB954"
            pending: "#FFED51"
            running: "#1F5493"
            warning: "#FF9800"
          tabbar:
            indicator: "#9BF0E1"
          textContrast: "#000000"
          textSubtle: "#6E6E6E"
          textVerySubtle: "#DDD"
          warningBackground: "#F59B23"
          warningText: "#000000"

      dark:
        variant: "backstage"
        mode: "dark"
        palette:
          background:
            default: "#333333"
            paper: "#424242"
          banner:
            closeButtonColor: "#FFFFFF"
            error: "#E22134"
            info: "#2E77D0"
            link: "#000000"
            text: "#FFFFFF"
            warning: "#FF9800"
          border: "#E6E6E6"
          bursts:
            backgroundColor:
              default: "#7C3699"
            fontColor: "#FEFEFE"
            gradient:
              linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
            slackChannelText: "#ddd"
          errorBackground: "#FFEBEE"
          errorText: "#CA001B"
          gold: "#FFD600"
          highlight: "#FFFBCC"
          infoBackground: "#ebf5ff"
          infoText: "#004e8a"
          link: "#9CC9FF"
          linkHover: "#82BAFD"
          mode: "dark"
          navigation:
            background: "#424242"
            color: "#b5b5b5"
            indicator: "#9BF0E1"
            navItem:
              hoverBackground: "#404040"
            selectedColor: "#FFF"
            submenu:
              background: "#404040"
          pinSidebarButton:
            background: "#BDBDBD"
            icon: "#404040"
          primary:
            dark: "#82BAFD"
            main: "#9CC9FF"
          secondary:
            main: "#FF88B2"
          status:
            aborted: "#9E9E9E"
            error: "#F84C55"
            ok: "#71CF88"
            pending: "#FEF071"
            running: "#3488E3"
            warning: "#FFB84D"
          tabbar:
            indicator: "#9BF0E1"
          textContrast: "#FFFFFF"
          textSubtle: "#CCCCCC"
          textVerySubtle: "#727272"
          warningBackground: "#F59B23"
          warningText: "#000000"

または、app-config.yaml ファイルで以下の バリアント および モード 値を使用して、以前のデフォルト設定を適用することもできます。 

app:
  branding:
    theme:
      light:
        variant: "backstage"
        mode: "light"
      dark:
        variant: "backstage"
        mode: "dark"

8.8.2. デフォルトの Backstage ページテーマ
リンクのコピー

以下の app-config.yaml ファイル設定に示されるように、デフォルトの Backstage ヘッダーの色は軽量で軽量モードで、ダークモードのブラックリストです。 

app:
  branding:
    theme:
      light:
        palette: {}
        defaultPageTheme: default
        pageTheme:
          default:
            backgroundColor: ['#005B4B'] # teal
            fontColor: '#ffffff'
            shape: wave
          documentation:
            backgroundColor: ['#C8077A', '#C2297D'] # pinkSea
            fontColor: '#ffffff'
            shape: wave2
          tool:
            backgroundColor: ['#8912CA', '#3E00EA'] # purpleSky
            fontColor: '#ffffff'
            shape: round
          service:
            backgroundColor: ['#006D8F', '#0049A1'] # marineBlue
            fontColor: '#ffffff'
            shape: wave
          website:
            backgroundColor: ['#0027AF', '#270094'] # veryBlue
            fontColor: '#ffffff'
            shape: wave
          library:
            backgroundColor: ['#98002B', '#8D1134'] # rubyRed
            fontColor: '#ffffff'
            shape: wave
          other:
            backgroundColor: ['#171717', '#383838'] # darkGrey
            fontColor: '#ffffff'
            shape: wave
          app:
            backgroundColor: ['#BE2200', '#A41D00'] # toastyOrange
            fontColor: '#ffffff'
            shape: shapes.wave
          apis:
            backgroundColor: ['#005B4B'] # teal
            fontColor: '#ffffff'
            shape: wave2
          card:
            backgroundColor: ['#4BB8A5', '#187656'] # greens
            fontColor: '#ffffff'
            shape: wave

      dark:
        palette: {}
        defaultPageTheme: default
        pageTheme:
          default:
            backgroundColor: ['#005B4B'] # teal
            fontColor: '#ffffff'
            shape: wave
          documentation:
            backgroundColor: ['#C8077A', '#C2297D'] # pinkSea
            fontColor: '#ffffff'
            shape: wave2
          tool:
            backgroundColor: ['#8912CA', '#3E00EA'] # purpleSky
            fontColor: '#ffffff'
            shape: round
          service:
            backgroundColor: ['#006D8F', '#0049A1'] # marineBlue
            fontColor: '#ffffff'
            shape: wave
          website:
            backgroundColor: ['#0027AF', '#270094'] # veryBlue
            fontColor: '#ffffff'
            shape: wave
          library:
            backgroundColor: ['#98002B', '#8D1134'] # rubyRed
            fontColor: '#ffffff'
            shape: wave
          other:
            backgroundColor: ['#171717', '#383838'] # darkGrey
            fontColor: '#ffffff'
            shape: wave
          app:
            backgroundColor: ['#BE2200', '#A41D00'] # toastyOrange
            fontColor: '#ffffff'
            shape: shapes.wave
          apis:
            backgroundColor: ['#005B4B'] # teal
            fontColor: '#ffffff'
            shape: wave2
          card:
            backgroundColor: ['#4BB8A5', '#187656'] # greens
            fontColor: '#ffffff'
            shape: wave

8.9. 動的プラグインを使用してカスタム Developer Hub テーマを読み込む
リンクのコピー

動的プラグインからカスタム Developer Hub テーマを読み込むことができます。

手順

  1. 動的プラグインでテーマプロバイダー関数をエクスポートします。たとえば以下のようになります。

    サンプル myTheme.ts フラグメント

    import { lightTheme } from './lightTheme'; // some custom theme
import { UnifiedThemeProvider } from '@backstage/theme';
export const lightThemeProvider = ({ children }: { children: ReactNode }) => (
  <UnifiedThemeProvider theme={lightTheme} children={children} />
);

    カスタムテーマの作成の詳細は、Backstage documentation - Creating a Custom Theme を参照してください。

  2. themes 設定フィールドを使用して、UI にテーマを読み込むように Developer Hub を設定します。

    app-config.yaml フラグメント

    dynamicPlugins:
  frontend:
    example.my-custom-theme-plugin:
      themes:
        - id: light
    1 
    
          title: Light
          variant: light
          icon: someIconReference
          importName: lightThemeProvider

    1
    希望する値を指定してテーマ ID を設定します。必要に応じて、次の ID 値を使用して、デフォルトの Developer Hub テーマをオーバーライドします。デフォルトのライトテーマを置き換える場合は light、デフォルトのダークテーマを置き換える場合は dark となります。

検証

  • テーマは、Developer Hub の Settings ページで利用できます。

8.10. Developer Hub インスタンスのカスタムコンポーネントのオプション
リンクのコピー

Developer Hub テーマのさまざまなコンポーネントをカスタマイズするために使用できるコンポーネントのバリアントが 2 つあります。

  • Patternfly
  • MUI

ライトテーマモードまたはダークテーマモード設定の各パラメーターにコンポーネントバリアントを割り当てるだけでなく、rippleEffect の on と off を切り替えることもできます。

以下のコードは、app-config.yaml ファイル で Developer Hub インスタンスのテーマコンポーネントを設定するために使用できるオプションを示しています。 

app:
  branding:
    theme:
      light:
        options:
          rippleEffect: off / on
          paper: patternfly / mui
          buttons: patternfly / mui
          inputs: patternfly / mui
          accordions: patternfly / mui
          sidebars: patternfly / mui
          pages: patternfly / mui
          headers: patternfly / mui
          toolbars: patternfly / mui
          dialogs: patternfly / mui
          cards: patternfly / mui
          tables: patternfly / mui
          tabs: patternfly / mui
      dark:
        options:
          rippleEffect: off / on
          paper: patternfly / mui
          buttons: patternfly / mui
          inputs: patternfly / mui
          accordions: patternfly / mui
          sidebars: patternfly / mui
          pages: patternfly / mui
          headers: patternfly / mui
          toolbars: patternfly / mui
          dialogs: patternfly / mui
          cards: patternfly / mui
          tables: patternfly / mui
          tabs: patternfly / mui

第9章 ホームページのカスタマイズ
リンクのコピー

app-config を使用する場合は、次のことができます。

  • インストールして有効にしたプラグインに基づいて表示される追加のカードを使用して、デフォルトのホームページレイアウトをカスタマイズおよび拡張します。
  • クイックアクセスリンクを変更します。

  • 次の利用可能なカードを追加、再編成、および削除します。

    • 検索バー
    • クイックアクセス
    • 見出し
    • マークダウン
    • プレースホルダー
    • スター付きエンティティーのカタログ化
    • 注目のドキュメント

9.1. ホームページカードのカスタマイズ
リンクのコピー

管理者は、12 列のグリッドにあるカードの固定の高さを変更できます。

デフォルトのホームページは、以下の app-config.yaml ファイル設定のようなものです。 

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      dynamicRoutes:
        - path: /
          importName: DynamicHomePage
      mountPoints:
        - mountPoint: home.page/cards
          importName: SearchBar
          config:
            layouts:
              xl: { w: 10, h: 1, x: 1 }
              lg: { w: 10, h: 1, x: 1 }
              md: { w: 10, h: 1, x: 1 }
              sm: { w: 10, h: 1, x: 1 }
              xs: { w: 12, h: 1 }
              xxs: { w: 12, h: 1 }
        - mountPoint: home.page/cards
          importName: QuickAccessCard
          config:
            layouts:
              xl: { w: 7, h: 8 }
              lg: { w: 7, h: 8 }
              md: { w: 7, h: 8 }
              sm: { w: 12, h: 8 }
              xs: { w: 12, h: 8 }
              xxs: { w: 12, h: 8 }
        - mountPoint: home.page/cards
          importName: CatalogStarredEntitiesCard
          config:
            layouts:
              xl: { w: 5, h: 4, x: 7 }
              lg: { w: 5, h: 4, x: 7 }
              md: { w: 5, h: 4, x: 7 }
              sm: { w: 12, h: 4 }
              xs: { w: 12, h: 4 }
              xxs: { w: 12, h: 4 }

前提条件

  • 管理者アクセス権があり、動的プラグイン設定の app-config.yaml ファイルを変更できる。

手順

  • 次のように、Red Hat Developer Hub のホームページにさまざまなカードを設定します。

    検索
    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: SearchBar
          config:
            layouts:
              xl: { w: 10, h: 1, x: 1 }
              lg: { w: 10, h: 1, x: 1 }
              md: { w: 10, h: 1, x: 1 }
              sm: { w: 10, h: 1, x: 1 }
              xs: { w: 12, h: 1 }
              xxs: { w: 12, h: 1 }
    Expand
    表9.1 利用可能なプロパティー
    プロパティーデフォルト説明

    path

    /search

    必要に応じてリンクされた検索パスを上書きする

    queryParam

    query

    必要に応じて検索クエリーパラメーター名を上書きする

    クイックアクセス
    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: QuickAccessCard
          config:
            layouts:
              xl: { h: 8 }
              lg: { h: 8 }
              md: { h: 8 }
              sm: { h: 8 }
              xs: { h: 8 }
              xxs: { h: 8 }
    Expand
    表9.2 利用可能なプロパティー
    プロパティーデフォルト説明

    title

    Quick Access

    必要に応じてリンクされた検索パスを上書きする

    path

    none

    必要に応じて検索クエリーパラメーター名を上書きする

    見出し
    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: Headline
          config:
            layouts:
              xl: { h: 1 }
              lg: { h: 1 }
              md: { h: 1 }
              sm: { h: 1 }
              xs: { h: 1 }
              xxs: { h: 1 }
            props:
              title: Important info
    Expand
    表9.3 利用可能なプロパティー
    プロパティーデフォルト説明

    title

    none

    タイトル

    マークダウン
    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: MarkdownCard
          config:
            layouts:
              xl: { w: 6, h: 4 }
              lg: { w: 6, h: 4 }
              md: { w: 6, h: 4 }
              sm: { w: 6, h: 4 }
              xs: { w: 6, h: 4 }
              xxs: { w: 6, h: 4 }
            props:
              title: Company links
              content: |
                ### RHDH
                * [Website](https://developers.redhat.com/rhdh/overview)
                * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                * [Janus Plugins](https://github.com/janus-idp/backstage-plugins)
                * [Backstage Community Plugins](https://github.com/backstage/community-plugins)
                * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins)
                * [RHDH Showcase](https://github.com/redhat-developer/rhdh)
        - mountPoint: home.page/cards
          importName: Markdown
          config:
            layouts:
              xl: { w: 6, h: 4, x: 6 }
              lg: { w: 6, h: 4, x: 6 }
              md: { w: 6, h: 4, x: 6 }
              sm: { w: 6, h: 4, x: 6 }
              xs: { w: 6, h: 4, x: 6 }
              xxs: { w: 6, h: 4, x: 6 }
            props:
              title: Important company links
              content: |
                ### RHDH
                * [Website](https://developers.redhat.com/rhdh/overview)
                * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                * [Janus Plugins](https://github.com/janus-idp/backstage-plugins)
                * [Backstage Community Plugins](https://github.com/backstage/community-plugins)
                * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins)
                * [RHDH Showcase](https://github.com/redhat-developer/rhdh)
    プレースホルダー
    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 1, h: 1 }
              lg: { w: 1, h: 1 }
              md: { w: 1, h: 1 }
              sm: { w: 1, h: 1 }
              xs: { w: 1, h: 1 }
              xxs: { w: 1, h: 1 }
            props:
              showBorder: true
              debugContent: '1'
    スター付きエンティティーのカタログ化
    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: CatalogStarredEntitiesCard
    注目のドキュメント
    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: FeaturedDocsCard

9.2. Red Hat Developer Hub ホームページのレイアウトの定義
リンクのコピー

ホームページでは、12 列のグリッドを使用してカードを配置します。最適なパラメーターを使用して、Developer Hub ホームページのレイアウトを定義できます。

前提条件

  • 各ブレークポイントに次の最適なパラメーターを含めます。

    • 幅 (w)
    • 高さ (h)
    • 位置 (x および y)

手順

  • 次のいずれかのオプションを選択して、Developer Hub の app-config.yaml 設定ファイルを設定します。

    • 次のように、小さいウィンドウではスペース全体を、大きいウィンドウではスペースの半分を使用します。 
dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 6, h: 2 }
              lg: { w: 6, h: 2 }
              md: { w: 6, h: 2 }
              sm: { w: 12, h: 2 }
              xs: { w: 12, h: 2 }
              xxs: { w: 12, h: 2 }
            props:
              showBorder: true
              debugContent: a placeholder
  • 次の例に示すように、x パラメーターを定義してカードを並べて表示します。 
dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 6, h: 2 }
              lg: { w: 6, h: 2 }
              md: { w: 6, h: 2 }
              sm: { w: 12, h: 2 }
              xs: { w: 12, h: 2 }
              xxs: { w: 12, h: 2 }
            props:
              showBorder: true
              debugContent: left
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 6, h: 2, x: 6 }
              lg: { w: 6, h: 2, x: 6 }
              md: { w: 6, h: 2, x: 6 }
              sm: { w: 12, h: 2, x: 0 }
              xs: { w: 12, h: 2, x: 0 }
              xxs: { w: 12, h: 2, x: 0 }
            props:
              showBorder: true
              debugContent: right

ただし、デフォルトではこのカードの下に 2 枚目のカードが表示されます。

  • 次の例に示すように x パラメーターを定義して、3 つの列でカードを表示します。 
dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 4, h: 2 }
              lg: { w: 4, h: 2 }
              md: { w: 4, h: 2 }
              sm: { w: 6, h: 2 }
              xs: { w: 12, h: 2 }
              xxs: { w: 12, h: 2 }
            props:
              showBorder: true
              debugContent: left
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 4, h: 2, x: 4 }
              lg: { w: 4, h: 2, x: 4 }
              md: { w: 4, h: 2, x: 4 }
              sm: { w: 6, h: 2, x: 6 }
              xs: { w: 12, h: 2 }
              xxs: { w: 12, h: 2 }
            props:
              showBorder: true
              debugContent: center
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 4, h: 2, x: 8 }
              lg: { w: 4, h: 2, x: 8 }
              md: { w: 4, h: 2, x: 8 }
              sm: { w: 6, h: 2 }
              xs: { w: 12, h: 2 }
              xxs: { w: 12, h: 2 }
            props:
              showBorder: true
              debugContent: right

第10章 クイックアクセスカードのカスタマイズ
リンクのコピー

Red Hat Developer Hub の Home ページにアクセスするには、ベース URL に /developer-hub プロキシーが含まれている必要があります。データをプロキシーとして app-config.yaml ファイルに渡すことで、Home ページを設定できます。次のソースから Home ページにデータを提供できます。

  • GitHub または GitLab でホストされている JSON ファイル
  • API を使用して JSON 形式で Home ページのデータを提供する専用サービス

10.1. ホストされた JSON ファイルを使用したクイックアクセスカードへのデータの提供
リンクのコピー

前提条件

手順

  • JSON ファイルからデータにアクセスするには、次のコードを app-config.yaml Developer Hub 設定ファイルに追加します。

  • app-config.yaml ファイルに次のコードを追加します。 

    proxy:
  endpoints:
    # Other Proxies
    # customize developer hub instance
    '/developer-hub':
      target: <DOMAIN_URL> # i.e https://raw.githubusercontent.com/
      pathRewrite:
        '^/api/proxy/developer-hub': <path to json file> # i.e /redhat-developer/rhdh/main/packages/app/public/homepage/data.json
      changeOrigin: true
      secure: true
      # Change to "false" in case of using self hosted cluster with a self-signed certificate
      headers:
	<HEADER_KEY>: <HEADER_VALUE> # optional and can be passed as needed i.e Authorization can be passed for private GitHub repo and PRIVATE-TOKEN can be passed for private GitLab repo

10.2. 専用サービスを使用したクイックアクセスカードへのデータの提供
リンクのコピー

専用サービスを使用する場合は、次のタスクを実行できます。

  • 同じサービスを使用して、設定可能なすべての Developer Hub ページにデータを提供するか、ページごとに異なるサービスを使用できます。
  • Home ページと Tech Radar ページの両方にデータを提供するサンプルサービスとして、red-hat-developer-hub-customization-provider を使用できます。red-hat-developer-hub-customization-provider サービスは、デフォルトの Developer Hub データと同じデータを提供します。必要に応じて、GitHub から red-hat-developer-hub-customization-provider サービスリポジトリーをフォークし、独自のデータで変更できます。
  • red-hat-developer-hub-customization-provider サービスと Developer Hub Helm チャートを同じクラスターにデプロイできます。

前提条件

手順

個別のサービスを使用して Home ページのデータを提供するには、次の手順を実行します。

  1. Red Hat OpenShift Container Platform Web コンソールの Developer パースペクティブで、+Add > Import from Git をクリックします。

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

    red-hat-developer-hub-customization-provider サービスを使用するには、red-hat-developer-hub-customization-provider リポジトリーの URL か、カスタマイズした内容が含まれているリポジトリーのフォークの URL を追加します。

  3. General タブで、Name フィールドに red-hat-developer-hub-customization-provider を入力し、Create をクリックします。

  4. Advanced Options タブで、Target Port から値をコピーします。

    注記

    Target Port は、通信する Kubernetes または OpenShift Container Platform サービスを自動的に生成します。

  5. 以下のコードを app-config.yaml ファイルに追加します。 

    proxy:
  endpoints:
    # Other Proxies
    # customize developer hub instance
    '/developer-hub':
      target: ${HOMEPAGE_DATA_URL}
    1 
    
      changeOrigin: true
      # Change to "false" in case of using self-hosted cluster with a self-signed certificate
      secure: true
    1
    http://<SERVICE_NAME& gt;:8080 （例： http://rhdh-customization-provider:8080 ）
    注記

    red-hat-developer-hub-customization-provider サービスには、デフォルトで 8080 ポートが含まれています。カスタムポートを使用している場合は、app-config.yaml ファイルの 'PORT' 環境変数で指定できます。

  6. rhdh-secrets に URL を追加するか、カスタム ConfigMap で直接置き換えることで、HOMEPAGE_DATA_URL を置き換えます。
  7. 新しい設定が正しく読み込まれるように、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"
      }
    ]
  }
]
    注記

    要求の呼び出しが失敗した場合や、設定されていない場合、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

法律上の通知
リンクのコピー

Copyright © 2025 Red Hat, Inc.
The text of and illustrations in this document are licensed by Red Hat under a Creative Commons Attribution–Share Alike 3.0 Unported license ("CC-BY-SA"). An explanation of CC-BY-SA is available at http://creativecommons.org/licenses/by-sa/3.0/. In accordance with CC-BY-SA, if you distribute this document or an adaptation of it, you must provide the URL for the original version.
Red Hat, as the licensor of this document, waives the right to enforce, and agrees not to assert, Section 4d of CC-BY-SA to the fullest extent permitted by applicable law.
Red Hat, Red Hat Enterprise Linux, the Shadowman logo, the Red Hat logo, JBoss, OpenShift, Fedora, the Infinity logo, and RHCE are trademarks of Red Hat, Inc., registered in the United States and other countries.
Linux® is the registered trademark of Linus Torvalds in the United States and other countries.
Java® is a registered trademark of Oracle and/or its affiliates.
XFS® is a trademark of Silicon Graphics International Corp. or its subsidiaries in the United States and/or other countries.
MySQL® is a registered trademark of MySQL AB in the United States, the European Union and other countries.
Node.js® is an official trademark of Joyent. Red Hat is not formally related to or endorsed by the official Joyent Node.js open source or commercial project.
The OpenStack® Word Mark and OpenStack logo are either registered trademarks/service marks or trademarks/service marks of the OpenStack Foundation, in the United States and other countries and are used with the OpenStack Foundation's permission. We are not affiliated with, endorsed or sponsored by the OpenStack Foundation, or the OpenStack community.
All other trademarks are the property of their respective owners.
Red Hat logoGithubredditYoutubeTwitter

詳細情報

試用、購入および販売

コミュニティー

会社概要

Red Hat は、企業がコアとなるデータセンターからネットワークエッジに至るまで、各種プラットフォームや環境全体で作業を簡素化できるように、強化されたソリューションを提供しています。

多様性を受け入れるオープンソースの強化

Red Hat では、コード、ドキュメント、Web プロパティーにおける配慮に欠ける用語の置き換えに取り組んでいます。このような変更は、段階的に実施される予定です。詳細情報: Red Hat ブログ.

Red Hat ドキュメントについて

Red Hat をお使いのお客様が、信頼できるコンテンツが含まれている製品やサービスを活用することで、イノベーションを行い、目標を達成できるようにします。 最新の更新を見る.

Legal Notice

Theme

© 2026 Red Hatトップに戻る