Deploy Vue.js ไปยัง Firebase Hosting ด้วย Gitlab CI/CD

ช่วงนี้ก็มาลองเล่น Vue.js มากขึ้นเลยมาลองทำ Web Application สำหรับสร้างรหัสผ่าน โดยสามารถกำหนด ขนาดตัวอักษร ตัวเล็กตัวใหญ่ ตัวเลข หรืออักษรพิเศษ เนื่องด้วยเป็น Web Application แล้วก็ต้องมี Host ซิ ผมก็เลือกจะใช้ของฟรีจาก Google ก็คือ Firebase Hosting

ตอนแรกก็ Deploy ท่าปกติก็ใช้ fireabase cli ด้วยคำสั่งนี้

firebase deploy

ไหนๆ ก็ใช้ Gitlab อยู่แล้ว เลยขยับไปลองเล่นตัว Gitlab CI/CD ดู

Flow การทำงานหลัง push branch master ไปยัง Gitlab คือ

1. Gitlab ทำการ build project สำหรับ Production (npm run build)
2. Deploy code ไปยัง Firebase Hosting (firebase deploy)

ซึ่งขั้นตอนนี้ Gitlab จะทำให้เราอัตโนมัติ

สิ่งที่ต้องทำเพิ่มคือ

1. เพิ่มไฟล์ .gitlab-ci.yml

ตัวอย่างการไฟบล์ .gitlab-ci.yml ที่ผมใช้นะครับ

.gitlab-ci.yml

2. Setup Gitlab CI/CD

ก่อนจะ setup ได้เราจะต้องเตรียม firebase token ก่อน โดยใช้คำสั่งดังนี้

firebase login:ci

หลังจากรันคำสั่งแล้วจะมีหน้าจอให้เรา login เพื่อยืนยันตัวตน หลังจากนั้นจะได้ token ที่สำหรับทำ CI

firebase token

เสร็จแล้วก็ไปที่ gitlab เลือก Project -> Settings -> CI/CD ในส่วนของ variable ให้เพิ่ม

key = FIREBASE_DEPLOY_KEY
value = ********* token ที่ได้จากข้างบน

ตัวอย่าง Gitlab CI/CD — Variables Setup

หลังการ setup ทุกอย่างครบแล้ว ทุกครั้งที่เรา push code เราไปยัง gitlab ก็จะเข้าสู้ขบวนการ CI/CD และ deploy ไปยัง firebase ให้อัตโนมัติ

gitlab ci/cd