Deploy เว็บของคุณแบบไร้รอยต่อด้วย Firebase Hosting และ GitHub Actions

นักพัฒนาที่ใช้งาน GitHub อยู่น่าจะรู้จัก GitHub Actions บริการที่เข้ามาช่วยจัดการ Development workflow ใน Repo ของเรา ให้มีระบบ CI/CD แบบอัตโนมัติได้

ด้วยเสียงตอบรับที่ดีของบริการดังกล่าว ทีม Firebase จึงไม่รอช้าที่จะออกฟีเจอร์ใหม่ซึ่งเป็นการ Integrate กันระหว่าง Firebase Hosting และ GitHub Actions เพื่อมาช่วยให้การ deploy เว็บของเรามีความ automate โดยที่นักพัฒนาไม่จำเป็นต้องมีความรู้ในการติดตั้ง GitHub Actions มาก่อน เพราะ Firebase CLI เค้าจะจัดให้

การ Deploy จาก GitHub Actions ไปยัง Firebase Hosting

การ deploy จาก GitHub Actions ที่จะแสดงในบทความนี้ จะเป็นแบบ default ที่ได้หลังจากการติดตั้ง ซึ่งจะมีด้วยกัน 2 รูปแบบ

Preview Channel

เกิดจากการเปิดหรือแก้ไข Pull Request(PR) โดยระบบจะ deploy ไปยัง Preview channel ของ Firebase Hosting ซึ่งผลลัพธ์เราจะได้ temporary URL ซึ่งแต่ละ PR จะได้ URL ที่แตกต่างกัน

หมายเหตุ: การแก้ไขโค้ดใน PR เดิม โค้ดจะถูก deploy ไปยัง Preview URL เดิม

Live Channel

เกิดจากการ Merge PR หรือ Push โค้ดเข้าไปที่ main repo โดยระบบจะ deploy ไปยัง Live channel ของ Firebase Hosting หรือเรียกง่ายๆว่าขึ้น Production นั่นเอง

มาถึงตรงนี้ เชื่อว่าทุกคนน่าจะคันไม้คันมือกันแล้ว อย่าได้ช้าที เราไปลงมือทำแบบ Step by Step กับ 7 ขั้นตอนกันเลย!

1. เตรียม GitHub Repository

ให้เราเตรียม GitHub repo โดยจะมาจากการสร้างใหม่ หรือจะใช้ repo ที่มีอยู่แล้วก็ได้ ซึ่งจะเป็น repo แบบส่วนตัว หรือ organization ก็ได้ จากนั้นก็ให้ clone มาไว้ที่เครื่องของเรา

หมายเหตุ: สิทธิ์ของ repo ที่จะนำมาใช้จะต้องเป็นสิทธิ์ admin เท่านั้น

ถัดไปเราจะสร้าง branch ใหม่ใน local โดยผมจะตั้งชื่อว่า new-feature และเราจะลุยกันต่อใน branch นี้ครับ

หน้าจอแสดงการสร้าง branch ใหม่ใน GitHub Desktop

2. สร้าง Firebase Project

ให้เข้าไปที่ Firebase console และ sign in ด้วย Google account จากนั้นกด Add project

ตั้งชื่อโปรเจคให้เรียบร้อย แล้วกดปุ่ม Continue จากนั้นให้ข้ามขั้นตอนการตั้งค่า Google Analytics ไปก่อน เนื่องจากเราไม่ได้ใช้ในโปรเจคนี้

3. เปิดใช้งาน Firebase Hosting API

เนื่องจากการ GitHub Actions จะทำการ deploy โค้ดของเราผ่านทาง REST API ไปยัง Firebase Hosting ดังนั้นต้องให้แน่ใจว่าบริการนี้ถูกเปิดใช้งานแล้ว โดยให้เราไปที่หน้ารวม Library ใน Google Cloud console จากนั้นให้เลือกโปรเจคเดียวกับที่เราสร้างไว้ใน Firebase console แล้วค้นห้าคำว่า Firebase Hosting API ก็จะเจอหน้าจอ

ให้กดปุ่ม Enable เพื่อเปิดใช้บริการ โดยหากปุ่มนี้แสดงคำว่า Manage นั่นแปลว่าเราได้เปิดใช้งานไว้แล้ว

4. ติดตั้ง Node.js และ Firebase CLI

4.1 ติดตั้ง Node.js

เนื่องจาก Firebase CLI จำเป็นต้องมี Node.js และ npm(มาพร้อมกับการติดตั้ง Node.js) ดังนั้นให้เข้าไปที่เว็บไซต์ nodejs.org แล้วดาวน์โหลด Node.js เวอร์ชันที่เป็น LTS หรือ Current มาติดตั้งให้เรียบร้อย

เมื่อติดตั้งเสร็จแล้ว ให้เปิด Terminal มาทดสอบด้วยคำสั่งด้านล่างนี้ ซึ่งถ้าสำเร็จจะเห็นตัวเลขเวอร์ชันของทั้งคู่

node --version 
npm --version

4.2 ติดตั้ง Firebase CLI

ต่อกันที่ Terminal ให้เรา run คำสั่ง

npm install -g firebase-tools

หมายเหตุ: หากพบปัญหาในการติดตั้งในขั้นตอนนี้ คุณจำเป็นตัองตั้งค่า npm permission ในเครื่องซะก่อน

จากนั้นให้ตรวจสอบความเรียบร้อยด้วยคำสั่งด้านล่างนี้ ซึ่งถ้าผ่านจะต้องเห็นเลขเวอร์ชัน

firebase --version

5. Initial ตัว Firebase Hosting และ GitHub Actions

เริ่มต้นให้ run คำส่ังด้านล่างนี้ ใน Terminal โดย browser จะเปิดขึ้นมาแล้วให้คุณ sign in ด้วย account เดียวกับที่สร้างโปรเจคใน Firebase โดยหากสำเร็จจะเห็นอีเมลตัวเองปรากฎอยู่ใน Terminal

firebase login

ถัดไปให้ shell ผ่าน Terminal เข้าไปยัง root ของโฟลเดอร์ที่เรา clone มาจาก GitHub แล้ว run คำสั่ง

firebase init hosting

หมายเหตุ: หากเคยติดตั้ง Firebase Hosting มาก่อนหน้านี้ ให้ใช้คำสั่ง firebase init hosting:github

เลือก Use an existing project แล้ว Enter เบาๆ จากนั้นจะเจอชื่อโปรเจคที่เราได้สร้างไว้ ก็กดเลือกแล้ว Enter ต่อเลย แล้วจะเจอชุดคำถามตามนี้

• ตั้งชื่อโฟลเดอร์ที่เก็บไฟล์เว็บของเราว่า public ไหม: ถ้าเอาก็กด Enter ได้เลย
• จะตั้งค่า single-page เว็บไหม: ตอบ N ตามคำแนะนำ
• ติดตั้งการ deploy ด้วย GitHub ไหม: ตรงนี้ตอบ y นาจา

หลังตอบ y ตัว browser จะเปิดขึ้นมา ก็ให้เรา sign in ด้วย GitHub account ให้เรียบร้อย เสร็จแล้วก็กลับมาที่ Terminal จะพบว่าให้เราระบุ repo ที่ต้องการเชื่อมต่อกับ GitHub Actions ในรูปแบบ user/repository

หลังจากกด Enter ชื่อ repo เราไป ตัว Firebase CLI ก็จะไปสร้าง service account สำหรับการอนุญาตให้ GitHub Actions ทำการ deploy ไฟล์ขึ้นไป Firebase Hosting ได้ โดยสามารถเข้าไปดูที่เมนู Settings->secrets ใน GitHub repo ของเรา

กลับมาที่ Terminal จะ 2 คำถามสุดท้ายละ

• จะให้ run script อะไรเพิ่มเติมก่อนการ deploy ไหม เช่น script สำหรับ build หรือ test: ถ้าไม่มีก็ให้ตอบ N ไป
• ถ้า Merge PR จะให้ deploy ขึ้น Live channel เลยไหม: ตอบ Y
• ฺBranch ที่จะเอามาเชื่อมกับ Live channel ชื่ออะไร: ถ้าใช้ main ก็แค่ Enter ไป

เสร็จแล้วก็แอบไปส่องไฟล์ในโฟลเดอร์ดูหน่อย จะสั่งเกตเห็นโฟลเดอร์ที่เป็น hidden ชื่อ .github เข้าไปเลยจะเจอโฟลเดอร์ workflows แล้วก็เข้าไปอีก จะเจอไฟล์ 2 ไฟล์ที่มีนามสกุล yml นั่นหละครับคือ script สำหรับการรัน GitHub Actions ซึ่งเราไม่ต้องเขียนเองเลย สบ๊าย!

6. ทดลองเปิด PR

หลังจากเราได้ Initial โปรเจคเราเรียบร้อย ใน branch ที่ชื่อ new-feature ก็ให้เรา commit โค้ดทั้งหมด และ publish ตัว branch นี้ขึ้น GitHub ไปเลย

จากนั้นก็เข้าไปที่ Repo ของเราใน GitHub เราก็จะเห็น notice ว่า branch ใหม่เรามาแว้ว เอ้า รอรัยอะ กดปุ่มเขียวๆที่ชื่อ Compare & pull request โลด

จากนั้นก็ใส่ comment ตามสะดวกแล้วกด Creat pull request ต่อเลย ที่เหลือก็รอเวลาเพียงชั่วเคี้ยวหมากแหลก หากสำเร็จคุณก็จะเห็นลิงก์ของ Preview channel ปรากฎล้าาาว

สุดท้ายก็เอา Preview URL มาลองเปิดหน่อยซิ…Ta Da!

หมายเหตุ: Preview URL จะสามารถใช้งานได้ 7 วัน(default) หากต้องการเพิ่มหรือลดเวลา สามารถตั้งค่า expires ได้ที่ไฟล์ firebase-hosting-pull-request.yml ในโฟลเดอร์ .github/ (ต่ำสุด 1h สูงสุด 30d)

firebase-hosting-pull-request.yml

7. ทดลอง Merge PR เข้า Main Repository

ขั้นตอนสุดท้าย เมื่อเราโอเคกับ PR ที่เปิดเข้ามาแล้ว ก็ได้เวลา Merge มันเข้าไปที่ main ซึ่งเป็น branch หลักของเรา…ในหน้า PR ด้านล่างจะมีปุ่ม Merge pull request อยู่ กดมันเบาๆ

จากนั้นไปติดตามสถานะการ build และ deploy มันใน tab ที่ชื่อ Actions

ในหน้านี้จะสังเกตเห็นสถานะของงาน ตั้งแต่ตอนเปิด PR และตอน Merge โดยจะแบ่งสถานะออกเป็น 3 สี

• 🟡 กำลังทำงาน
• 🔴 เกิดข้อผิดพลาด
• 🟢 เสร็จสมบูรณ์

ซึ่งเราสามารถกดเข้าไปดูรายละเอียดภายในแต่ละงานได้ เผื่อในกรณีที่เกิดข้อผิดพลาดจะได้ทราบสาเหตุว่าเกิดจากอะไร

เอาหละครับ และนี่คือ URL ของ Live channel ของเราในบทความนี้ เย้!

สรุป

ชอบกันไหมครับกับฟีเจอร์ใหม่ที่มาแนะนำกันในบทความนี้ ส่วนตัวผมชอบตอนที่เปิด PR แล้วได้ Preview URL มานี่เหมาะมากกับการนำไปทดสอบ หรือส่งไปให้ลูกค้า UAT เพราะเราไม่ต้องไปนั่งหา domain ใหม่ รู้ที่มาที่ไปของ URL ว่ามาจาก PR ไหน แถมควบคุมเวลาการ expire ได้ด้วย

สำหรับ GitHub Actions จะมีการคำนวนการใช้งานจากระยะเวลาที่มันทำงาน โดยแพ็คเกจ Free ก็ให้เราใช้ ฟรี เลยสำหรับ Public repo ส่วนถ้าเป็น private repo จะให้ใช้ฟรีได้ 2,000 นาที/เดือน ซึ่งหากใครสนใจใช้เกินกว่านี้ก็ลองดูรายละเอียดของ Price plan นะครับ

รู้จัก Firebase Hosting ตั้งแต่ Zero จนเป็น Hero

ก่อนจากกันไป ขอฝากชาว Firebasers ให้กดติดตาม Firebase Thailand กันด้วยนะครับ เพื่อที่ทุกท่านจะได้ไม่พลาดบทความตอนใหม่ๆ แล้วพบกันใหม่บทความหน้าราตรีสวัสดิ์พี่น้องนักพัฒนาชาวไทย