มาทำ auto-deploy Vue.js ขึ้น Firebase Hosting ด้วย Bitbucket pipeline กันเถอะ
สวัสดีครับ ช่วงต้นเดือนที่ผ่านมาผมได้ลองเล่น Vue.js อยู่พักนึง ก็สนุกดี(จริงๆ จะมีบล็อคเกี่ยวกับการทำ SPA ด้วย Vue.js + Firebase ด้วย แต่ยังไม่เสร็จ 555) แต่ก็พบปัญหาคือเราต้อง build และ deploy ขึ้น Firebase Hosting เองทุกครั้งที่เราแก้และ merge เข้า master พอจะมีวิธีไหนที่แค่เรา merge branch หรือมีการแก้ไขหรือ push code ไปใหม่ แล้ว auto-deploy ไหม…. มีจ้า 5555 ซึ่งมันก็คือการใช้ pipeline ของ Bitbucket นั่นเอง เริ่มกันเลยดีกว่า
- สร้าง Firebase Project โดยไปที่ Firebase console หรือในกรณีที่เรามี project อยู่แล้วก็แค่ไปที่หน้า Project Setting แล้วไปเอาตัว Project ID มาเก็บไว้ในใจ
2. หลังจากนั้นให้กลับไปที่ Vue project ของเราครับ อย่างเช่นของผมมีโปรเจ็คอยู่แล้วก็หน้าตาประมาณนี้
3. จากนั้นให้สร้างไฟล์ขึ้นมาสองไฟล์ครับ สำหรับใส่ Firebase config คือ
[1] .firebaserc (ชื่อไฟล์มี . อยู่ด้านหน้า)
[2] firebase.json
หรือในกรณีที่ตัว project ได้ทำการ Initial Firebase ไว้อยู่แล้วก็ข้ามขั้นตอนเมื่อสักครู่นี้ไปเลยก็ได้ครับ วิธีสังเกตคือ มีทั้ง สองไฟล์อยู่แล้วก่อนหน้านี้
โอเคใกล้เสร็จละ ทีนี้เราก็ push code ขึ้น origin ได้เลย
หลังจากนั้นไปที่ Bitbucket แล้วไปที่ Pipelines ดังรูปด้านล่าง
หลังจากนั้นให้เพิ่ม ENV จากเมนูด้านข้างนะครับ เพิ่มไปสองตัวคือ PROJECT_ID และ FIREBASE_TOKEN แล้วเราค่อยเรียกใช้อีกทีใน pipeline
FIREBASE_TOKEN ต้องเอามาจากไหนนนนล่ะเอ้ๆๆๆๆๆ ????
ง่ายๆเลย ให้เราทำการติดตั้ง ตัว firebase-tools เสียก่อน
npm install -g firebase-toolsจากนั้นก็
firebase login:ciซึ่งจะมีการ redirect ไปให้เรา login ผ่านหน้า browser และ เราก็จะได้ตัว token มาดังรูปด้านล่างนี้
และเจ้าตัว firebase login:ci เนี่ยเป็น Administrative commands สำหรับร้องขอ token ซึ่งตัว token ที่เราได้มานั้นเป็นแบบ long term อายุยืนยาวหน่อย ไว้ให้เราใช้
ส่วน pipeline ที่ผมใช้ก็จะประมาณด้านล่างนี้ครับ
อธิบายนิดนึง
บรรทัดที่ 3–5 คือ คอยดักฟัง เวลาที่ branch master มีอะไรเปลี่ยนแปลง เช่น push / merge code ขึ้นไป
หลังจากนั้นผมจะแบ่งเป็น step เพื่อจะได้เป็นระเบียบ ซึ่งหลังจาก build เสร็จ ตัว dist ก็จะถูกจัดเก็บไว้ใน artifacts เพื่อที่ step ต่อไป(deploy to Firebase Hosting) จะได้นำไปใช้ได้ (ทาง Bitbucket บอกว่า artifacts จะมีอายุอยู่ได้ถึง 7 วัน)
ต่อไปบรรทัดที่ 14–21 step นี้จะเป็นขั้นตอนของการ deploy โปรเจคของเราไปที่ Firebase Hosting นั่นเอง
บรรทัดที่ 19–21 อันนี้ผมเอามาจาก pipline official 5555ซึ่งสิ่งที่เขา require คือ FIREBASE_TOKEN ที่เหลือเป็น optional งั้นลองจิ้มที่ไปนี่เลยเพื่อดู variables แบบอื่นๆ อีก
หลังจากนั้นเราก็กด commit ตัว pipeline ของเรา และเป็นอันเสร็จ อะไรจะง่ายขนาดนั้น
หลังจาก commit เสร็จ ตัว pipeline ก็จะเริ่มทำงานดังรูปด้านล่าง
เย้ เสร็จแล้ว จะเห็นว่าตรง Pipeline แสดงผลการทำงานเป็น step ตามที่เราเขียนไว้ใน pipeline ด้วย ทีนี้ลองดูผลลัพธ์ที่หน้าเว็บดีกว่า
งั้นเราลองมาแก้ไขแล้ว push code ขึ้นไปดีกว่า เช่น ผมอยากเปลี่ยนรูปภาพพื้นหลังลองโค้ดหน่อยดีกว่าดูได้ในวิดีโอเลยนะครับ แค่เรา push code ขึ้น master ตัว pipeline ก็จะทำงานทันที :)
เย้ ทีนี้เราก็ไม่ต้องคอย build และก็ deploy เองล่ะ
สุดท้ายนี้ขอฝากบทความสั้นๆนี้ไว้ในใจ หากผิดพลาดประการใดผู้เขียนขออภัยด้วยนะขอรับ
