Backstage integration with Gitlab
Tags: sre, tutorial, devops
Published: 2022-09-24 04:45:27

เมื่อปีก่อนผมเคยได้นำเสนอการทดลองติดตั้ง Backstage.io แบบเบื้องต้นไปแล้ว ตอนนี้เริ่มอยากจะใช้งานจริงจัง แต่เนื่องด้วยที่ทำงานปัจจุบันเราใช้ Gitlab เป็นหลัก เราก็เลยมาลองเชื่อมต่อมันเข้าด้วยกันตามคู่มือ

ขั้นตอนแรกหลังจากติดตั้ง Backstage ตามที่เคยได้เขียนไปคราวที่แล้วเราใช้ Github Token มาคราวนี้เราเปลี่ยนมาใช้ Gitlab Token กันบ้าง

วิธีการคือต้องไปแก้ที่ไฟล์ app-config.yaml ซึ่งเมื่อเราสร้าง Backstage มาครั้งแรก จะมีไฟล์หน้าตาแบบนี้มาให้เรา 3 ไฟล์คือ

- app-config.yaml
- app-config.local.yaml
- app-config.production.yaml

ซึ่งโดย defualt มันจะดูที่ไฟล์ app-config.yaml เป็นหลัก แต่เนื่องจากเราจะทดลองบนเครื่องเราก่อน เราก็เลยจะไปทำที่ app-config.local.yaml กันก่อน แต่ก่อนอื่น ผมแนะนำให้ copy ทุกบรรทัดใน app-config.yaml มาใส่ใน app-config.local.yaml ให้ครบเสียก่อน

จากนั้นเราจะมาดูที่ส่วน **integrations:** ซึ่งตอนนี้มันน่าจะมีหน้าตาแบบนี้

```yaml
integrations:
  github:
    - host: github.com
      token: ${GITHUB_TOKEN}
```

เราจะเปลี่ยนให้มันไปใช้ Gitlab ก็เลยไปดูตามคู่มือ ซึ่งหน้าตาจะต้องกลายเป็นแบบนี้แทน

```yaml
integrations:
  gitlab:
    - host: gitlab.com
      token: ${GITLAB_TOKEN}
```

นั่นแสดงว่า สิ่งที่เราต้องมีก็คือ Gitlab Token โดยให้ไปที่ Gitlab->Preferences->Access Tokens หรือตาม[คู่มือนี้](https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html)
แล้วก็จัดการสร้าง Personal access token มาสักตัว ส่วน Scopes ผมให้มันหมดเลย เพราะยังหาคำแนะนำไม่เจอ

เมื่อได้มาแล้วก็เอาไป export เป็นค่า environment ชื่อ GITLAB_TOKEN รอไว้เลยแบบนี้ก็ได้

```sh
export GITLAB_TOKEN=glxx-XXxxXXxxxx
```

ทีนี้ตอนเราจะสั่ง yarn dev ก็ให้ชี้ไปที่ไฟล์ app-config.local.yaml ด้วยคำสั่งนี้

```sh
yarn dev --config app-config.local.yaml
```

การ integrate นี้จะทำให้ Backstage สามารถโหลด catalog จาก Gitlab ได้ _(catalog อยู่ที่ catalog-info.yml ใน repo ของ component)_

ทีนี้เราจะทดลองไปเพิ่มไฟล์ catalog-info.yml ใน repo ไหนก็ได้ใน Gitlab ของเรา โดยทดลองใส่เนื้อหาตามนี้เข้าไป

```yaml
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: backstage-catalog
spec:
  type: website
  owner: user:guest
  lifecycle: experimental
```

kind เป็น Component มันเป็นค่าอื่นก็ได้เช่น API
name คือชื่อของ component โดยตั้งเป็นอะไรก็ได้ ซึ่งจะไปแสดงบน Backstage
type ให้เป็น website ไปก่อน ซึ่งยังมีอีกหลาย type เช่น openapi
นอกนั้นให้เป็นแบบนี้ไปก่อน

จากนั้นให้สั่ง yarn dev ตามคำสั่งด้านบนใหม่ แล้วลอง ไปที่เมนู Create ด้านซ้าย


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inx6t5glkvot0s7vwba3.png)

แล้วกดปุ่ม **REGISTER EXISTING COMPONENT**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spdoxs716hggo6q8g28y.png)

แล้ววาง URL ของไฟล์ catalog-info.yml ที่เราสร้างไว้ใน repo ปลายทางเช่น

https://gitlab.com/pallat/backstage-catalog/-/blob/main/catalog-info.yml


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ra7y3r61mcr335zmtdu.png)

กดปุ่ม **ANALYZE**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr4wke6r67tkzlklblic.png)

กด **IMPORT**

ทีนี้ก็ลองไปดูที่หน้า HOME ก็จะเห็น compponent ที่เราเพิ่ง import เข้าไปแบบนี้


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/329buekcaoqs2hv2rjeg.png)

เมื่อคลิกเข้าไปเราก็จะเห็นรายละเอียดของ component ของเราแบบนี้


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iebnw7bi1avelq7fs5cv.png)

ครั้งหน้า เราจะมาทำให้หน้านี้แสดงข้อมูลเพิ่มขึ้นอีก เช่น CI/CD หรือ Document และในกรณีของ OpenAPI เราก็จะทำให้มันแสดง doc แบบ swagger ได้ด้วย