Backstage와 ArgoCD 통합하기

 

Backstage에는 다양한 오픈소스 플러그인이 제공되고, 해당 플러그인을 통해 여러 도구를 통합하여 사용할 수 있다.

그러나 이 플러그인들은 Backstage의 핵심 팀에 의해 완벽하게 검토되고 인증된 것은 아니기 때문에, 사용 전 충분한 조사와 검토를 거친 뒤 사용하는 것이 좋다.

 

이번 글에서는 ArgoCD 오픈소스 플러그인을 사용하는 방법을 다룬다.

 

ArgoCD 플러그인은 "Roadie"라는 회사에서 "American Airlines"와 공동으로 개발한 플러그인이다.

Roadie는 Backstage를 보다 쉽게 도입하고 관리할 수 있도록 지원하는 SaaS 버전의 관리형 Backstage 서비스 제공업체이다. 뿐만 아니라 자체 설치하여 Backstage를 사용하는 곳에서도 사용할 수 있게 [Self-hosted Backstage]로 플러그인 사용 가이드를 제공한다.

 

다음 그림과 같이 Backstage 플러그인 항목에 등록되어 있다.

Backstage ArgoCD Plugin

이 외에도 다양한 플러그인을 제공하고 있다.

(참고: https://roadie.io/backstage/plugins/)

 

본 글에서 ArgoCD 플러그인을 사용하여 Backstage와 통합하여 Backstage에서 ArgoCD에서 제공하는 애플리케이션 상태를 확인할 수 있는 대시보드를 구현한다.

 

구성 환경

• Amazon EC2 Instance

구성 버전

• Backstage : 1.27.0
• EC2 : Amazon2023-6.1.59-84.139.amzn2023.x86_64
• EKS : 1.28.8
• ArgoCD : 2.9.0

전제 조건

• Backstage 구성
• EKS 클러스터
• Github 계정
• ArgoCD 구성 & 샘플 애플리케이션 배포

실습 절차

1. ArgoCD 플러그인 설정
2. ArgoCD 토큰 발급
3. Backstage component 구성
4. ArgoCD Catalog 생성

 

 

1. ArgoCD 플러그인 설정

---

먼저 플러그인을 사용하기 위해 ArgoCD 패키지를 다운로드 후 코드를 추가하여 사용해야 한다.

ArgoCD관련 Frontend 패키지를 다운로드한다.

$ yarn --cwd packages/app add @roadiehq/backstage-plugin-argo-cd

 

Backstage 설정 파일에 다음과 같이 추가한다.

•  app-config.yaml
  • 각 {ArgoCD 주소}를 적절히 입력하고, "ARGOCD_AUTH_TOKEN" 부분에는 argocd 인증 토큰을 발급받아 backstage 서버의 환경변수로 등록해야 한다. 해당 부분은 아래에서 진행한다.
  • argocd.revisionsToLoad : ArgoCD의 revision 히스토리 개수를 제한한다. 많은 revision이 있는 경우 많은 요청과 긴 로딩 시간이 발생할 수 있다.

# ...
proxy:
  '/argocd/api':
    target: https://{ArgoCD 주소}/api/v1/
    changeOrigin: true
    secure: false
    headers:
      Cookie:
        $env: ARGOCD_AUTH_TOKEN
# ...        
argocd:
  baseUrl: https://{ArgoCD 주소}
  revisionsToLoad: 5

 

플러그인을 사용하기 위해 다음 코드를 추가한다.

아래 코드를 추가하면  상단 레이아웃에 [ARGO CD] 탭이 생성되고 탭 안에서 ArgoCD overview, history 정보를 확인할 수 있다. 

• packages/app/src/components/catalog/EntityPage.tsx

import {
  EntityArgoCDOverviewCard,
  EntityArgoCDHistoryCard,
  EntityArgoCDContent,
  isArgocdAvailable,
} from '@roadiehq/backstage-plugin-argo-cd';

const serviceEntityPage = (
# ...
    <EntityLayout.Route path="/argo-cd" title="Argo CD" if={e => Boolean(isArgocdAvailable(e))}>
      <Grid container spacing={3} alignItems="stretch">
        <Grid item xs={12}>
          <EntityArgoCDOverviewCard />
        </Grid>
        <Grid item xs={12}>
          <EntityArgoCDHistoryCard />
        </Grid>
      </Grid>
    </EntityLayout.Route>
# ...      
);

 

 

2. ArgoCD 토큰 발급

---

Backstage에서 ArgoCD에 접근하여 정보를 수집하게 하기 위해 ArgoCD 계정 토큰을 발급받아야 한다.

 

argocd-server에 접근하여 계정 토큰을 발급받는다.

토큰 발급을 위해서 유저에 apiKey 권한이 있어야 하기 때문에 apiKey 권한이 있는 유저를 확인 후 토큰을 발급받는다.

$ kubectl get cm -n argocd argocd-cm -oyaml
apiVersion: v1
data:
  accounts.develop: apiKey,login
# ...

 

develop 유저에 apiKey 권한이 있으니 develop 유저로 토큰을 발급받는다.

# argocd-server Pod에 접근
$ kubectl exec -it -n argocd deploy/argocd-server -- /bin/bash

# argocd 로그인
$ argocd login {ArgoCD 주소:포트}

# account token 발급
$ argocd account generate-token --account develop

 

해당 토큰 정보를 사용하여 Backstage 서버에 환경변수로 등록한다.

$ export ARGOCD_AUTH_TOKEN='argocd.token={argocd account 토큰}'

참고

ArgoCD 인증 토큰은 "/session" 경로로 api를 통해 발급받을 수 있으나 이 토큰은 24시간이 지나면 만료된다.

 

 

3. Backstage component 구성

---

Backstage에서 ArgoCD를 사용하기 위한 컴포넌트 yaml 파일을 작성하여 Github에 보관한다.

• argocd.yaml
  • argocd/proxy-url : Backstage 설정 파일에서 'proxy'부분에 설정한 정보를 입력한다.
  • argocd/app-name : ArgoCD에서 생성한 'Application Name'을 입력한다.

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: argocd-component
  annotations:
    backstage.io/techdocs-ref: url:https://github.com/{owner}/{repo}
    github.com/project-slug: {owner}/{repo}
    argocd/proxy-url: '/argocd/api'
    argocd/app-name: {argocd application 이름}
spec:
  lifecycle: production
  owner: guests
  type: service

 

 

4. ArgoCD Catalog 생성

---

Bakcstage에서 ArgoCD 정보를 확인하기 위해 Backstage를 실행한다.
만약 실행하고 있다면 종료 후 재실행한다.

$ yarn dev

 

Backstage에 접속하여 Catalog를 생성한다.

• Backstage 접속 > [CREATE] 클릭 > [REGISTER EXISTING COMPONENT] 클릭

 

• Github에 Backstage component 설정 파일(argocd.yaml)이 위치한 URL을 입력한다.
  • [ANALYZE] 클릭 > [IMPORT] 클릭 > [VIEW COMPONENT] 클릭

 

다음과 같이 등록된 COMPONENT 화면을 볼 수 있다.

여기서 [ARGO CD] 탭을 클릭한다.

 

다음과 같이 Backstage에서 ArgoCD의 정보를 확인할 수 있다.

 

"ArgoCD overview"의 이름 부분을 클릭하면 ArgoCD 애플리케이션에 대한 자세한 정보를 확인할 수 있다.