เมื่อปีก่อนผมเคยได้นำเสนอการทดลองติดตั้ง 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 ด้านซ้าย
แล้วกดปุ่ม REGISTER EXISTING COMPONENT
แล้ววาง URL ของไฟล์ catalog-info.yml ที่เราสร้างไว้ใน repo ปลายทางเช่น
https://gitlab.com/pallat/backstage-catalog/-/blob/main/catalog-info.yml
กดปุ่ม ANALYZE
กด IMPORT
ทีนี้ก็ลองไปดูที่หน้า HOME ก็จะเห็น compponent ที่เราเพิ่ง import เข้าไปแบบนี้
เมื่อคลิกเข้าไปเราก็จะเห็นรายละเอียดของ component ของเราแบบนี้
ครั้งหน้า เราจะมาทำให้หน้านี้แสดงข้อมูลเพิ่มขึ้นอีก เช่น CI/CD หรือ Document และในกรณีของ OpenAPI เราก็จะทำให้มันแสดง doc แบบ swagger ได้ด้วย
Top comments (0)