🍩 호머(Homer)#2: 호머로 만든 쿠버네티스 네이티브 대시보드를 소개합니다

이어서 호머를 이용해 대시보드를 만들어 볼 겁니다. 인그레스된 쿠버네티스 서비스에 접근하는 대시보드 인데요. 이는 서비스의 상태를 파악하는 모니터링과, 분산된 인그레스를 한 곳에 모아 편하게 접근할 수 있는 포털의 기능을 함께 수행합니다. 포털로 사용하는 대시보드의 장점은 개발자, 사용자에게 모두 좋은 접근성을 제공한다는 점 입니다. 이 블로그에서는 호머의 설치법과 git을 이용한 대시보드 구성에 대해 살펴보겠습니다. 대신 쿠버네티스의 오퍼레이터 패턴을 이용하여 설치하겠습니다.

 

 

---

 

 

 

쿠버네티스에서 호머를 배포해보겠습니다. <Canva 편집>

 

 

✨ 소개

호머에 대한 소개는 이전 블로그인 '🍩 호머(Homer): YAML로 만드는 간편 대시보드 도구를 소개합니다'를 참고해 주세요. 설치법은 공식문서에 있는 설치법을 따라하겠습니다. 호머를 설치하면 이런 모습입니다.

 

 

공식 데모사이트 <homer-demo.netlify.app>

 

저의 개인 데모사이트입니다. <app.jyje.live>

 

 

로컬 빌드, 도커, 도커컴포즈, 쿠버네티스 등의 설치법이 있습니다. 비교적 최근 쿠버네티스 오퍼레이터 방식으로, 쿠버네티스의 ETCD를 데이터베이스로 하여 대시보드를 구성하는 방식이 추가되었습니다. 이 오퍼레이터의 GitHub 리포지토리는 이 링크 입니다.

 

 

오퍼레이터 공식 이미지 <homer-k8s>

 

 

 

k8s을 헬름차트로 설치하는 법은 이 링크에 소개되어 있습니다. 저는 Argo CD Application으로 배포하겠습니다.

 

 

 

 

🔧 Argo CD로 호머 설치하기

호머 오퍼레이터(homer-k8s)를 설치하기 위해 Argo CD가 설치된 클러스터에서 다음 YAML을 배포합니다. 

 

# homer.yaml
---
apiVersion: argoproj.io/v1alpha1
kind: Application
metadata:
  name: homer
spec:
  project: default
  source:
    repoURL: https://bananaops.github.io/homer-k8s
    targetRevision: "0.3.2"
    chart: homer-k8s
  destination:
    server: https://kubernetes.default.svc
    namespace: homer
  syncPolicy:
    syncOptions:
      - CreateNamespace=true
    automated: {}

 

 

호머를 설치할 네임스페이스는 `homer`로 정하였습니다. 다음 명령어로 YAML을 생성하고 배포합니다.

 

vim homer.yaml
# kubectl config current-context
kubectl create -n argocd -f homer.yaml

 

배포한 결과는 다음과 같습니다.

 

배포 중 <Argo CD 웹 UI>

 

 

배포 완료 <Argo CD 웹 UI>

 

메인 파드인 `homer-homer-k8s`는 대시보드(dashboard)와 컨트롤러(controller)로 구성되어 있습니다. 호머 오퍼레이터는 대시보드에 컨트롤러를 추가하여 대시보드 구성요소를 YAML로 추가하고 대시보드를 갱신하는 역할을 수행합니다.

 

다음 명령어로 파드 안의 컨테이너를 살펴볼 수 있습니다. 파드 이름은 배포마다 다를 수 있습니다.

kubectl describe -n homer pod homer-homer-k8s-5b6d6759b7-w4xz6

파드 내부

 

 

이제 대시보드에 접속해보겠습니다. 다음 명령어로 호머 서비스를 포트포워딩 합니다.

kubectl port-forward -n homer service/homer-homer-k8s 8080:8080

 

그리고 브라우저에서 `http://localhost:8080` 주소로 접속합니다.

호머의 초기화면 입니다.

 

 

 

🧑‍🎨 CRD로 호머 대시보드 꾸미기

이제 카드를 수정해보겠습니다. 카드를 수정하고 싶다면 호머서비스(HomerServices)라는 CRD를 생성하면 됩니다. 다음 YAML을 생성하고 배포해보겠습니다.

 

apiVersion: homer.bananaops.io/v1alpha1
kind: HomerServices
metadata:
  labels:
    app.kubernetes.io/name: homer-k8s
  name: homerservices-sample
spec:
  groups:
   - name: ci
     icon: "fas fa-code-branch"
     items:
        - name: "Awesome app"
          logo: "assets/tools/sample.png"
          tagstyle: "is-success"
          icon: "fab fa-jenkins"
          subtitle: "Bookmark example"
          tag: "app"
          keywords: "self hosted reddit" # optional keyword used for searching purpose
          url: "https://www.reddit.com/r/selfhosted/"
          target: "_blank" # optional html tag target attribute

          # background: red # optional color for card to set color directly without custom stylesheet
        - name: "Another one"
          logo: "assets/tools/sample.png"
          subtitle: "Another application"
          tag: "app"
          # Optional tagstyle
          tagstyle: "is-success"
          url: "#"

 

위 YAML을 구조를 살펴보면 그룹(`groups`)이라는 리스트에 `ci`라는 항목이 있습니다. 그럼 대시보드에 `ci`에 속하는 2개의 아이템을 기대할 수 있습니다: `Awesome app`과 `Another one` 입니다.

 

 

다음 명령어로 호머 서비스를 배포합니다.

vim homerservices-sample.yaml
kubectl create -n homer -f homerservices-sample.yaml

 

 

 

그리고 호머를 새로고침하면 다음과 같은 화면이 나옵니다.

 

배포한 것은 `ci` 그룹 뿐 아니라 다른 그룹들도 있는 것 같습니다. 이는 `homer-homer-k8s`이름의 configmap에서 global config를 적용하고 있기 때문입니다.

 

 

다음 명령어로 configmap을 살펴보겠습니다.

kubectl get -n homer configmaps homer-homer-k8s -o yaml

 

다음 이미지처럼 `global_config.yml` 아래쪽에 `Application`과 `Other group`이라는 그룹이 있는 것을 확인할 수 있습니다.

 

여기까지 잘 따라오시고 이해하셨다면 CRD를 수정하거나 추가하셔서 대시보드를 꾸밀 수 있습니다. 소개를 위해 따라해 보았는데 엄청 간단하고 관리하기도 쉬울 것 같습니다. 이 오퍼레이터 덕분에 호머가 쿠버네티스 네이티브 대시보드가 될 수 있겠네요 🚀

 

 

---

 

 

 

저는 호머 오퍼레이터를 사용하지 않고 있습니다. 별도의 homer 설정을 git으로 두고 initContainer를 이용해 설정을 복사하는 방식으로 서비스하고 있습니다. 저도 얼른 오퍼레이터로 옮겨야겠네요.

 

쿠버네티스를 위한 대시보드가 필요하신 분들께 도움이 되길 바라며 이만 마치겠습니다. 읽어주셔서 감사합니다.