Backstage 와 Gitea 연동하기 #3

Paul
10 min readMay 13, 2024

--

Photo by Roman Synkevych on Unsplash

앞에서 Backstage 로컬 테스트 환경 구성을 했습니다. 이번에는 Backstage 와 Git 시스템 연동 관련해서 알아보겠습니다. Backstage에서는 다양한 Git 시스템(Github, GitLab, Bitbucket, Gitea)과 연동이 가능합니다.

Backstage Integrations

Backstage에서는 Git 시스템에 따라서 Discovery 기능을 제공하기도 하고 제공을 못하기도 합니다. 로컬 환경에서 구성하기 가장 쉬운 Backstage와 Gitea 연동하는 방법을 알아보고, 간단한 예시를 통해 소프트웨어 템플릿(Software Templates)을 통해 저장소가 자동으로 생성해 보도록 하겠습니다.

Backstage App Config 설정하기

Backstage와 Gitea 연동하기 위해서 app-config.yaml 파일에서 integrations, catalog 항목에 아래와 같이 설정을 변경 또는 추가를 하면 됩니다.

# app-config.yaml
integrations:
# github:
# - host: github.com
# # This is a Personal Access Token or PAT from GitHub. You can find out how to generate this token, and more information
# # about setting up the GitHub integration here: https://backstage.io/docs/getting-started/configuration#setting-up-a-github-integration
# token: ${GITHUB_TOKEN}
### Example for how to add your GitHub Enterprise instance using the API:
# - host: ghe.example.net
# apiBaseUrl: https://ghe.example.net/api/v3
# token: ${GHE_TOKEN}
gitea:
- host: ${GITEAS_HOST}
username: ${GITEAS_USER}
password: ${GITEAS_PASSWORD}

....
catalog:
providers:
gitea:
selHosted:
host: ${GITEAS_HOST}
...

Backstage에서 interations 항목에서는 소스 GitHub, GitLab, Bitbucket 와 같은 VCS(버전 관리 시스템) 정보를 설정합니다. Backstage는 VCS(버전 관리 시스템)를 탐색하고(Discovery), 해당 데이터를 카탈로그에 포함 시킬 수 있습니다.

Backstage의 catalog 설정에서 providers 항목을 설정해야 하는 경우는 주로 소프트웨어 카탈로그 데이터를 가져와야 할 때 발생합니다. 이 설정은 Backstage 인스턴스가 다양한 데이터 소스와 통합되어 정보를 집계하고, 이를 통해 사용자에게 통합된 뷰를 제공할 수 있도록 합니다.

샘플 템플릿을 통한 동작 확인

Backstage 에서 제공되는 샘플 템플릿을 수정한 후에 Gitea에서 샘플 소프트웨어 템플릿을 저장소에 생성을 하도록 하겠습니다. 샘플 템플릿 위치는 아래와 같습니다.

# app-config.yaml
catalog:
providers:
gitea:
selHosted:
host: ${GITEAS_HOST}
....

# 샘플 템플릿의 위치
# Local example template
- type: file
target: ../../examples/template/template.yaml
rules:
- allow: [Template]

template.yaml 파일 아래와 같이 수정을 합니다. parameters 정보에서 Gitea 서버 주소 및 포트를 설정합니다. 그리고 샘플 소프트웨어 템플릿 코드를 저장할 Action의 정보를 Gitea 로 수정을 합니다.

apiVersion: scaffolder.backstage.io/v1beta3
# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-template
kind: Template
metadata:
...
spec:
owner: user:guest
type: service
# These parameters are used to generate the input form in the frontend, and are
# used to gather input data for the execution of the template.
parameters:
...
- title: Choose a location
required:
- repoUrl
properties:
repoUrl:
title: Repository Location
type: string
ui:field: RepoUrlPicker
ui:options:
allowedHosts:
- 192.168.56.174:3300
# These steps are executed in the scaffolder backend, using data that we gathered
# via the parameters above.
steps:
...
# This step publishes the contents of the working directory to GitHub.
- id: publish
name: Publishing to Source Code Repository
action: publish:gitea # gitea 설정 변경함.
input:
description: This is ${{ parameters.name }}
repoUrl: ${{ parameters.repoUrl }}
defaultBranch: main

Backstage에서 Gitea 연동 및 테스트 준비를 완료 하였습니다. Backstage를 실행해 보도록 하겠습니다.

Important: As backstage will issue HTTPS/TLS requests to the gitea instance, it is needed to configure gitea with a valid certificate or at least with a self-signed certificate gitea cert — host localhost -ca trusted by a CA authority. Don’t forget to set the env var NODE_EXTRA_CA_CERTS to point to the CA file before launching backstage !

Backstage실행 할 때 Gitea CA 관련 처리를 추가를 해야 합니다. Backstage실행할 때 환경 변수로 NODE_EXTRA_CA_CERTS 설정 한 후에 실행을 합니다.

# .env 파일 
PROTOCOL="http"
BACKSTAGE_HOSTNAME="192.168.56.174"
CUSTOMER_NAME="My Company"

GITEA_PROTOCOL="https"
GITEA_HOST="192.168.56.174"
GITEA_PORT="3300"
GITEA_USER="gitea"
GITEA_PASSWORD="gitea1122!"
GITEA_TOKEN="xxx"

# Gitea HTTPS/TLS 위해서 생성한 cert.pem 키를 등록함.
NODE_EXTRA_CA_CERTS="/backstage/app/certs/cert.pem"

다음으로 Backstage 에서 소프트웨어 템플릿 코드 저장하기 위한 Gitea 의Organization 생성합니다. Gitea 에 로그인을 한 후에 아래와 같이 Organization 생성합니다. (https://192.168.56.174:3300/)

브라우저를 실행 후에 BackStage에 접속을 합니다. (http://192.168.56.174:3000/) Create..> Example Node.js Template 에서 CHOOSE를 클릭합니다.

BackStage Component이름을 설정합니다. (Home 화면에서 보여질 이름)

아래의 내용은 Gitea 저장소 관련 설정입니다. Owner는 위에서 생성한 Organization를 입력합니다. 저장소 이름도 입력합니다.

REVIEW를 클릭하면 Gitea 저장소에 대한 정보를 확인 할 수 있습니다.

Create 클릭하면 아래와 같은 화면이 출력이 되며, 실패를 할 경우 상세한 로그 내용을 출력합니다. 생성에 문제가 없다면 아래의 링크를 클릭해서 Gitea 의 소스 저장소로 이동을 할 수 있고, Component 에 대한 상세 내용을 볼 수 있습니다.

마무리하며

Backstage와 Git 서비스를 연동하는 방법과 샘플 템플릿을 통해 저장소가 자동으로 생성되는지 살펴보았습니다. 다음으로는 소프트웨어 템플릿(Software Templates)를 활용해 서비스나 인프라 구성에 필요한 표준 템플릿을 구성하고, CI/CD 환경을 구축하는 방법에 대해 알아보겠습니다.

참고사이트

--

--