DEV Community 👩‍💻👨‍💻

Pallat Anchaleechamaikorn
Pallat Anchaleechamaikorn

Posted on

Backstage integration with Gitlab

เมื่อปีก่อนผมเคยได้นำเสนอการทดลองติดตั้ง 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}
Enter fullscreen mode Exit fullscreen mode

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

integrations:
  gitlab:
    - host: gitlab.com
      token: ${GITLAB_TOKEN}
Enter fullscreen mode Exit fullscreen mode

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

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

export GITLAB_TOKEN=glxx-XXxxXXxxxx
Enter fullscreen mode Exit fullscreen mode

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

yarn dev --config app-config.local.yaml
Enter fullscreen mode Exit fullscreen mode

การ 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
Enter fullscreen mode Exit fullscreen mode

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

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

Image description

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

Image description

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

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

Image description

กดปุ่ม ANALYZE

Image description

กด IMPORT

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

Image description

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

Image description

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

Top comments (0)

👋 Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: