39.2. 확장 스크립트 및 스타일시트 로드

브라우저에서 URL에 액세스할 수 있는 한 https:// URL에서 확장 스크립트 및 스타일시트를 호스팅할 수 있습니다. 파일은 공개적으로 액세스 가능한 경로를 사용하거나 OpenShift Container Platform 외부의 다른 서버에 있는 플랫폼의 Pod에서 호스팅할 수 있습니다.

스크립트 및 스타일시트를 추가하려면 openshift-web -console 네임스페이스에서 webconsole- config ConfigMap을 편집합니다. 웹 콘솔 구성은 ConfigMap의 webconsole-config.yaml 키에서 사용할 수 있습니다.

$ oc edit configmap/webconsole-config -n openshift-web-console

스크립트를 추가하려면 extensions.scriptURLs 속성을 업데이트합니다. 값은 URL 배열입니다.

스타일시트를 추가하려면 extensions.stylesheetURLs 속성을 업데이트합니다. 값은 URL 배열입니다.

apiVersion: v1
kind: ConfigMap
data:
  webconsole-config.yaml: |
    apiVersion: webconsole.config.openshift.io/v1
    extensions:
      scriptURLs:
        - https://example.com/scripts/menu-customization.js
        - https://example.com/scripts/nav-customization.js
      stylesheetURLs:
        - https://example.com/styles/logo.css
        - https://example.com/styles/custom-styles.css
    [...]

ConfigMap을 저장하면 몇 분 내에 새 확장 파일에 대해 웹 콘솔 컨테이너가 자동으로 업데이트됩니다.

IIFE(Inmmediately Invoked Function Expression)로 확장 스크립트를 래핑하는 것이 좋습니다. 이렇게 하면 웹 콘솔 또는 다른 확장 기능에서 사용하는 이름과 충돌하는 전역 변수를 생성하지 않습니다. 예를 들면 다음과 같습니다.

(function() {
  // Put your extension code here...
}());

다음 섹션의 예제에서는 웹 콘솔을 사용자 지정할 수 있는 일반적인 방법을 보여줍니다.

$ oc edit configmap/webconsole-config -n openshift-web-console

apiVersion: v1
kind: ConfigMap
data:
  webconsole-config.yaml: |
    apiVersion: webconsole.config.openshift.io/v1
    extensions:
      [...]
      properties:
        doc_url: https://docs.openshift.com
        key1: value1
        key2: value2
    [...]

window.OPENSHIFT_EXTENSION_PROPERTIES = {
  doc_url: "https://docs.openshift.com",
  key1: "value1",
  key2: "value2"
}