8장. Fuse 온라인 사용자 인터페이스 교체

프로세스

1. 다음 명령을 호출하여 Fuse Online이 설치된 syndesis-ui Pod의 이름을 가져옵니다.

   oc get pods

2. 다음 명령을 호출하고 SYNDESIS_UI_POD_NAME 을 syndesis-ui 를 실행하는 Pod의 실제 이름으로 교체하여 사용자 지정할 수 있는 로고, 아이콘, 글꼴 및 배경을 가져옵니다.

   oc rsync SYNDESIS_UI_POD_NAME:/opt/app-root/src/static/media ~/

   그러면 사용자 인터페이스 리소스가 ~/media/ 폴더에 배치됩니다.

3. ~/media/syndesis_logo_full_darkb Cryostat.9c467d96.svg 인 헤더 로고가 포함된 파일을 편집하고 저장합니다.

4. 업데이트된 로고 파일이 포함된 ConfigMap 오브젝트를 생성하여 수정된 파일을 클러스터에 업로드합니다.

   cd ~/
   oc create configmap syndesis-ui-custom-logo --from-file=media/syndesis_logo_full_darkbkg.9c467d96.svg

5. syndesis-ui 배포 파일을 수정하여 syndesis-ui-custom-logo ConfigMap 오브젝트를 마운트합니다. oc edit dc/syndesis-ui 를 호출하거나 OpenShift 웹 콘솔을 사용하여 애플리케이션 > Deployments > syndesis-ui > Actions > Edit YAML 을 선택하여 이 작업을 수행합니다.

   1. spec.template.containers.volumeMounts 에서 다음을 추가합니다.

      -name: syndesis-ui-custom-logo-volume
       mountPath: /opt/app-root/src/static/media/syndesis_logo_full_darkbkg.9c467d96.svg
       subPath: syndesis_logo_full_darkbkg.9c467d96.svg

   2. spec.template.volumes 에서 다음을 추가합니다.

      -name: syndesis-ui-custom-logo-volume
       configMap:
        name: syndesis-ui-custom-logo

   3. syndesis-ui 배포 파일을 저장합니다.
6. '~/media 폴더에 있고 사용자 지정할 각 파일에 대해 3~5단계를 반복합니다.

7. 편집 후 애플리케이션 제목이 포함된 파일을 저장합니다.

   1. 파일을 업데이트할 디렉터리를 만듭니다.

      mkdir ~/syndesis-custom/src

   2. 다음 명령을 호출하고 SYNDESIS_UI_POD_NAME 을 syndesis-ui 를 실행하는 Pod의 실제 이름으로 교체하여 애플리케이션 제목 파일을 가져옵니다.

      oc rsync SYNDESIS_UI_POD_NAME:/opt/app-root/src/index.html ~/syndesis-custom/src

   3. 애플리케이션 제목을 바꿉니다. 예를 들면 다음과 같습니다.

      sed -i 's/<title>.*<\/title>/<title>NEW_TITLE<\/title>/g' ~/syndesis-custom/src/index.html

8. 업데이트된 파일이 포함된 ConfigMap 오브젝트를 생성하여 수정된 애플리케이션 제목 파일을 클러스터에 업로드합니다.

   cd ~/syndesis-custom/src
   oc create configmap syndesis-ui-custom-index --from-file=index.html

9. syndesis-ui - custom-index ConfigMap 오브젝트를 마운트하여 syndesis-ui- ui 배포를 수정합니다.

   1. spec.template.containers.volumeMounts 에서 다음을 추가합니다.

      -name: syndesis-ui-custom-vindex-olume
       mountPath: /opt/app-root/src/index.html
       subPath: index.html

   2. spec.template.volumes 에서 다음을 추가합니다.

      -name: syndesis-ui-custom-index-volume
       configMap:
        name: syndesis-ui-custom-index

   3. syndesis-ui 배포 파일을 저장합니다.