Backstage integration with Gitlab

#sre #tutorial #devops

เมื่อปีก่อนผมเคยได้นำเสนอการทดลองติดตั้ง 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: ซึ่งตอนนี้มันน่าจะมีหน้าตาแบบนี้

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

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

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

นั่นแสดงว่า สิ่งที่เราต้องมีก็คือ Gitlab Token โดยให้ไปที่ Gitlab->Preferences->Access Tokens หรือตามคู่มือนี้
แล้วก็จัดการสร้าง Personal access token มาสักตัว ส่วน Scopes ผมให้มันหมดเลย เพราะยังหาคำแนะนำไม่เจอ

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

export GITLAB_TOKEN=glxx-XXxxXXxxxx

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

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

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

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

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 ด้านซ้าย