커스텀 스타일

커스텀 스타일 (Custom Styles)

Argo CD는 UI 스타일시트의 대부분을 argo-ui 프로젝트에서 가져와요. 브랜딩 목적이나 여러 환경에서 실행되는 여러 Argo CD 인스턴스를 구분하기 위해 특정 UI 컴포넌트를 커스터마이즈하고 싶을 때가 있어요.

출처: 문서

본문

이런 커스텀 스타일은 원격으로 호스팅되는 CSS 파일의 URL을 제공하거나, CSS 파일을 argocd-server 컨테이너에 직접 로드해서 적용할 수 있어요. 두 메커니즘 모두 argocd-cm 설정맵을 수정해서 구동돼요.

원격 URL로 스타일 추가 (Adding Styles Via Remote URL)

첫 번째 방법은 argocd-cm 설정맵에 원격 URL을 추가하기만 하면 돼요:

argocd-cm

apiVersion: v1
kind: ConfigMap
metadata:
  ...
  name: argocd-cm
data:
  ui.cssurl: "https://www.example.com/my-styles.css"

볼륨 마운트로 스타일 추가 (Adding Styles Via Volume Mounts)

두 번째 방법은 CSS 파일을 argocd-server 컨테이너에 직접 마운트하고, argocd-cm에 해당 파일의 올바르게 구성된 경로를 제공하는 것이에요. 아래 예시에서 CSS 파일은 별도의 설정맵 안에 정의되어 있어요(initContainer에서 CSS 파일을 생성하거나 다운로드해도 같은 효과를 얻을 수 있어요):

argocd-cm

apiVersion: v1
kind: ConfigMap
metadata:
  ...
  name: argocd-cm
data:
  ui.cssurl: "./custom/my-styles.css"

cssurl은 절대 경로가 아니라 "/shared/app" 디렉터리를 기준으로 한 상대 경로로 지정해야 해요.

argocd-styles-cm

apiVersion: v1
kind: ConfigMap
metadata:
  ...
  name: argocd-styles-cm
data:
  my-styles.css: |
    .sidebar {
      background: linear-gradient(to bottom, #999, #777, #333, #222, #111);
    }

argocd-server

apiVersion: apps/v1
kind: Deployment
metadata:
  name: argocd-server
  ...
spec:
  template:
    ...
    spec:
      containers:
      - command:
        ...
        volumeMounts:
        ...
        - mountPath: /shared/app/custom
          name: styles
      ...
      volumes:
      ...
      - configMap:
          name: argocd-styles-cm
        name: styles

CSS 파일은 "/shared/app" 디렉터리의 하위 디렉터리(예: "/shared/app/custom")에 마운트해야 해요. 그렇지 않으면 브라우저에서 "incorrect MIME type" 오류와 함께 파일을 가져오는 데 실패할 가능성이 커요. 하위 디렉터리는 argocd-cmd-params-cm.yaml 설정맵의 server.staticassets 키로 바꿀 수 있어요.

스타일 오버레이 개발 (Developing Style Overlays)

주입된 CSS 파일에 지정한 스타일은 argo-ui에 정의된 컴포넌트와 클래스에 특화되어야 해요. 적용하려는 스타일을 먼저 브라우저 내장 개발자 도구로 테스트해보는 것을 권장해요. 더 완성도 높은 경험을 원한다면 Argo CD UI dev server를 사용해 별도 프로젝트를 만들 수도 있어요.

배너 (Banners)

Argo CD는 예정된 유지보수와 운영 변경을 사용자에게 알리는 데 사용할 수 있는 배너를 선택적으로 표시할 수 있어요. 이 기능은 argocd-cm ConfigMap의 ui.bannercontent 필드로 배너 메시지를 지정하면 활성화되고, Argo CD는 이 메시지를 모든 UI 페이지 상단에 표시해요. ui.bannerurl을 설정해서 이 메시지에 링크를 추가할 수도 있어요. ui.bannerpermanent를 true로 설정하면 배너를 고정(영구)으로 만들 수 있고, ui.bannerposition: "both"로 상단과 하단 양쪽에, ui.bannerposition: "bottom"으로 하단에만 표시되게 위치를 바꿀 수도 있어요.

argocd-cm

apiVersion: v1
kind: ConfigMap
metadata:
  ...
  name: argocd-cm
data:
    ui.bannercontent: "Banner message linked to a URL"
    ui.bannerurl: "www.bannerlink.com"
    ui.bannerpermanent: "true"
    ui.bannerposition: "bottom"

더 알아보기 (Learn more)