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

Firebase Hosting เป็นบริการ Web Hosting ที่ให้พื้นที่ฟรี 10GB และ data transfer 10GB ต่อเดือน รองรับการพัฒนาเว็บไซต์ทั้งแบบ Static และ Dynamic ซึ่งมีจุดเด่นที่ความรวดเร็ว ปลอดภัย และเชื่อถือได้

เนื้อหาที่คุณจะได้เรียนรู้ในบทความนี้

• 10 จุดเด่นของ Firebase Hosting
• เริ่มต้นกับ Firebase Hosting
• การ Custom Domain
• การทำ Dynamic Content
• การทำ Multiple Sites ในโปรเจคเดียวกัน

10 จุดเด่นของ Firebase Hosting

ปกติบทความอื่นๆของ Firebase ผมจะนำเสนอแบบ Learning by Doing ตั้งแต่ต้น แต่บทความนี้ขอโชว์จุดเด่นของ Firebase Hosting ก่อนละกันว่ามันดียังไง

1. ผู้ใช้สามารถเข้าถึง Content ได้รวดเร็วปานสายฟ้าฟาด

ทุกไฟล์ที่คุณ upload จะถูก cache ไว้ใน SSD แถมยังมี Google CDN ให้รอบโลก

2. ปลอดภัยฝุดๆทุกการเชื่อมต่อ

Firebase Hosting ให้ SSL มาพร้อมใช้งาน ไม่ต้องตั้งค่าอะไรทั้งนั้น แถมฟรีอีกด้วย

3. Deploy ง๊ายง่าย

deploy เว็บไซต์จาก local ด้วยคำสั่ง “firebase deploy” ผ่าน Firebase CLI แถมระบบก็ฉลาดเลือก deploy เฉพาะไฟล์ใหม่และไฟล์ที่มีการเปลี่ยนแปลงเท่านั้น

4. Custom Domain ฟรี

ปกติเวลา deploy เว็บที่ Firebase Hosting คุณจะได้ sub-domain คืนมาอัตโนมัติ ซึ่งจะอยู่ในรูปแบบ xxx.firebaseapp.com แต่หากคุณมีโดเมนอยู่แล้ว ก็สามารถนำมาผูกกับ Firebase Hosting ได้ โดย Firebase Hosting จะ provisioning SSL ให้ Custom Domain ด้วย

5. จะทำเว็บที่เป็น Static หรือ Dynamic ก็ย่อมได้

นอกจากจะทำเว็บ Static ด้วย HTML, CSS, JS, Images, Fonts และไฟล์อื่นๆแล้ว หากจับคู่เข้ากับ Cloud Functions for Firebase จะทำให้ Firebase Hosting สามารถทำเว็บที่มีการประมวลผลจาก backend หรือทำ microservice ได้อีกด้วย

6. ทำ Multiple Sites ได้ในโปรเจคเดียว

จากเมื่อก่อนที่ Firebase Hosting จะมีได้แค่ 1 เว็บไซต์/1 โปรเจค แต่ถ้าวันนี้คุณใช้ Blaze plan คุณก็สามารถทำ Multiple เว็บไซต์ในโปรเจคเดียวกันได้

7. เชื่อมต่อบริการอื่นๆใน Firebase ได้อย่างลงตัว

ทำเว็บแอป หรือ microservice ให้สมบูรณ์ยิ่งขึ้นด้วยบริการต่างๆจาก Firebase ไม่ว่าจะเป็น Cloud Functions, Authentication, Firestore, RTDB, Cloud Messaging และ Storage

8. พัฒนาเว็บโดยไม่ต้องลง IDE

Glitch และ StackBlitz เป็น 2 web-based IDE ที่ Integrate กับ Firebase Hosting พร้อมให้คุณพัฒนาและ deploy เว็บของคุณจาก browser ได้เลย

9. สะดวกในการทดสอบ

ทดสอบเว็บไซต์ของคุณให้มั่นใจก่อนเอาขึ้น production ด้วยการสั่ง run เว็บไซต์ใน local ผ่านคำสั่ง “firebase serve” ใน terminal หรือ command line เท่านั้น

10. เจาะเวลาหาอดีตได้ง่ายเพียง 1 คลิก

Firebase Hosting เก็บ revision ให้ทุกการ deploy ซึ่งบางครั้งที่เกิดข้อผิดพลาดหรือต้องการย้อนกลับไปเวอร์ชันเก่า ก็สามารถทำได้เพียงปลายนิ้วใน Firebase Console

เริ่มต้นกับ Firebase Hosting

1. สร้างโปรเจคใน Firebase

หมายเหตุ: ขั้นตอนนี้ ถ้าใครมีโปรเจคกับ Firebase อยู่แล้วให้ข้ามขั้นตอนนี้ไป

ส่วนใครที่ยังไม่เคยมีหรือต้องกาสร้างใหม่ให้ไปที่ Firebase Console จากนั้นกด add project ระบุรายละเอียด และกด Create project

2. ติดตั้ง Node.js และ npm

เนื่องจาก Firebase CLI จำเป็นต้องมี Node.js และ npm เพราะฉะนั้นคุณจะต้องติดตั้งทั้ง 2 อย่างนี้ในเครื่องซะก่อน โดยดาวน์โหลดจากหน้าเว็บ

Node.js

จากนั้นก็เช็คหน่อยว่าเครื่องคุณมีทั้ง Node และ npm แล้ว(ปกติต้องมาด้วยกัน) ด้วยคำสั่งใน terminal หรือ command line

node --version 
npm --version

หมายเหตุ: เวอร์ชันขั้นต่ำของ Node ที่รองรับคือ 6.0.0

3. ติดตั้ง Firebase CLI

run คำสั่งด้านล่างนี้ใน command line เพื่อติดตั้ง Firebase CLI ได้เลย

npm install -g firebase-tools

หมายเหตุ: แนะนำให้อัพเดท Firebase CLI ด้วยคำสั่งนี้สม่ำเสมอเนื่องจากจะได้ประโยชน์จากการแก้ bug และ feature ใหม่ๆ

จากนั้นก็เช็คหน่อยว่าคุณติดตั้ง Firebase CLI เรียบร้อยหรือไม่ด้วยคำสั่ง(ถ้าผ่านจะเห็นตัวเลขเวอร์ชันแน่นอน)

firebase --version

4. Initial Project

เริ่มต้นให้ run คำส่ังด้านล่างนี้ ใน terminal หรือ command line โดย browser จะเปิดขึ้นมาแล้วให้คุณ login ด้วย account เดียวกับที่สร้างโปรเจคใน Firebase

firebase login

จากนั้นให้สร้าง directory ที่จะไว้เก็บไฟล์ แล้วก็ shell เข้าไปที่ directory นั้น

mkdir Hosting
cd Hosting/

เมื่อเข้าที่ directory ที่ต้องการแล้ว ก็ให้ใช้คำสั่ง

firebase init

จะเจอคำว่า Firebase เป็นไฟเท่ๆแบบนี้ พร้อมเมนูให้เลือก feature ของ Firebase CLI ที่ต้องการใช้งาน โดยให้เลือก Hosting แล้ว enter ไป

จากนั้นจะเจอส่วนที่ให้เลือกโปรเจคที่มีใน Firebase Console ก็ให้เลือกและกด enter ไปตามเคย

ถัดไปจะพบคำถามที่ถามว่าต้องการจะสร้างโฟลเดอร์ชื่ออะไร โดย Firebase CLI จะแนะนำชื่อ public มาให้ ซึ่งคุณจะเปลี่ยนก็ได้อันนี้แล้วแต่

และสุดท้ายจะถามว่าจะให้ rewrite url ทั้งหมดไปที่ index.html ไหม ซึ่ง Firebase CLI จะแนะนำอยู่แล้วว่าให้ตอบ No ก็ตอบตามนั้นไปได้เลย เป็นอันเสร็จพิธีติดตั้ง

คราวนี้มาดูหน่อยว่าหลังจากติดตั้งเรียบร้อยแล้ว มีอะไรในโฟลเดอร์บ้าง

• public/: โฟลเดอร์ที่เก็บรวบรวมไฟล์ static ต่างๆ โดยเริ่มต้นจะได้ index.html และ 404.html มา
• .gitignore: ระบุไฟล์ที่ไม่สนใจเอาขึ้น git
• .firebaserc: ไฟล์ที่ระบุ ID ของโปรเจคใน Firebase

// ค่าเริ่มต้นของไฟล์ .firebaserc
{
  "projects": {
    "default": "<YOUR_PORJECT_ID>"
  }
}

• firebase.json: ไฟล์ที่ระบุโฟลเดอร์ในการแสดงผลเว็บไซต์(public), การระบุไฟล์ที่ไม่ต้องการ deploy, การ redirect, การ rewrite url, การกำหนด headers และการระบุ target ในกรณีทำ Multiple sites

// ค่าเริ่มต้นของไฟล์ firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

5. Deploy เว็บไซต์

เริ่มต้นให้เปิด termial หรือ command line แล้ว shell ไปที่ root ของโฟลเดอร์โปรเจคในขั้นตอนที่ 4 จากนั้นให้ run คำสั่ง

firebase deploy

หรือถ้าใครมีทั้งโฟลเดอร์ Firebase Hosting และ Cloud Functions for Firebase อยู่ใน root เดียวกัน และต้องการ deploy เฉพาะเว็บไซต์ก็สามารถสั่งแบบนี้ได้

firebase deploy --only hosting

ตัว Firebase CLI ก็จะทำการ deploy ไฟล์ทั้งหมดยกเว้นไฟล์ที่ ignore ไว้ใน firebase.json ขึ้น server ซึ่งถ้า deploy สำเร็จแล้ว ตัว Firebase CLI จะคืน url ของเว็บมาให้ด้วย

Firebase CLI ตั้งแต่ v4.2.0 ขึ้นไป จะ deploy เร็วมว๊ากกก และจะเลือก deploy เฉพาะไฟล์ใหม่และไฟล์ที่มีการเปลี่ยนแปลงเท่านั้น

ลองเอา url ดังกล่าวมาเปิดหน่อย

ได้ละ ง่ายจริง โอ้ยฟิน

นอกจากนี้ถ้าเข้าไปที่ Firebase Console เลือกเมนู Hosting จะเจอรายละเอียด domain และประวัติการ deploy

การ Custom Domain

ในกรณีที่คุณได้จด domain ไว้แล้ว และต้องการเอามาผูกกับ Firebase Hosting คุณสามารถทำได้โดยคลิกปุ่ม “Connect domain” ตามรูป

จากนั้นให้ระบุ domain ของคุณ โดยหากต้องการให้ domain สุดท้ายตัด www ออก ให้คุณกรอก domain ตามตัวอย่างด้านล่างนี้ แล้วกด continue ไป

จากนั้นให้ไปเพิ่ม TXT ให้กับ DNS ที่คุณไปจด domain มาแล้วกดปุ่ม Verify

หมายเหตุ: สำหรับใครที่จด domain กับ “ไปเลยคุณพ่อ” หรือ “GoDaddy” ตอนเพิ่ม TXT ให้ระบุ Host เป็น @ นะครับ ไม่งั้นรอไปมันก็ไม่มา

หาก verify ผ่านจะเจอหน้าที่ให้เอาข้อมูล A record ไปกรอกเพิ่มใน DNS ก็ให้ไปกรอกให้เรียบร้อยแล้วกดปุ่ม Finish โลด

ช่วงที่กรอก A record เสร็จอาจต้องรอมันอัพเดทนิสนึง(ของผม 5 นาที) ซึ่งช่วงนี้จะเห็น status เป็น “Needs setup”

จากนั้นจะต้องรอให้ Firebase Hosting ทำการ provision ตัว SSL ให้กับ domain ซึ่งจะเสร็จสิ้นภายใน 24 ชม(ของผม 5–10 นาที) ในช่วงนี้อาจเห็น status เป็น “Pending” ไปก่อน ใจเย็นๆน้า

เมื่อไรที่เห็น status ของ custom domain จะเป็น Connected นั่นคือพร้อมใช้งานละ

การทำ Dynamic Content

ในการทำ dynamic content หรือ microservice ผ่าน Firebase Hosting คุณจำเป็นต้องใช้ Cloud Functions for Firebase เข้ามาร่วมด้วย ดังนั้นใครยังไม่รู้จัก แนะนำให้อ่านบทความด้านล่างนี้ก่อน

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

ใครเคยใช้มาแล้ว มาลุยกันต่อได้เลย โดยให้คุณสร้างฟังก์ชันที่เป็น HTTP function ขึ้นมา 1 ฟังก์ชัน ตัวอย่างผมจะสร้างฟังก์ชันชื่อ bangkok โดยการทำงานคือให้ไป query ข้อมูลอีเมลจาก Cloud Firestore มาแสดง

คุณสามารถทดสอบฟังก์ชันที่สร้างด้วย Cloud Functions for Firebase ได้โดยเข้าไปที่ URL

https://us-central1-<YOUR-PROJECT-ID>.cloudfunctions.net/bangkok

ถัดไปเราจะทำให้ Firebase Hosting สามารถเรียกฟังก์ชัน bangkok ได้ โดยให้คุณกลับมาที่โฟลเดอร์โปรเจคของ Firebase Hosting แล้วเปิดไฟล์ firebase.json จากนั้นให้เพิ่มโค้ดด้านล่างนี้ให้อยู่ภายใต้วงเล็บ hosting

"rewrites": [
  {
    "source": "/bangkok",
    "function": "bangkok"
  }
]

หน้าตาเต็มๆ ประมาณนี้

เสร็จแล้วก็ deploy ขึ้นไป แล้วทดสอบด้วยการเปิด url บน browser

https://<YOUR-PROJECT-ID>.firebaseapp.com/bangkok
// กรณี custom domain
https://<YOUR-CUSTOM-DOMAIN>/bangkok

หมายเหตุ: Timeout ของ Firebase Hosting มีค่า 60วินาที ซึ่งคุณอาจได้รับ HTTP status code 504 (request timeout) ถ้าฟังก์ชันทำงานนานเกินไป ดังนั้นโปรดหลีกเลี่ยงการสร้างฟังก์ชันที่ใช้เวลาทำงานนานเกิน 60 วินาที

การทำ Multiple Sites ในโปรเจคเดียวกัน

การทำ Multiple Sites หรือทำให้มีหลายเว็บไซต์ในโปรเจคเดียวกัน จะช่วยให้คุณบริหารจัดการเว็บไซต์ได้สะดวกขึ้น และเข้าถึง feature อื่นๆของ Firebase ในโปรเจคเดียวกันได้ เช่น Authentication, Firestore, RTDB, Storage และ FCM

หมายเหตุ: การจะเปิดใช้งาน Multiple Sites จะต้องเลือกใช้ Blaze plan เท่านั้น

1. เพิ่ม Site ใหม่

เข้าไปที่ Firebase Console เลือกเมนู Hosting จากนั้นให้คลิกปุ่ม “Add another site”

ถัดไปให้ตั้งชื่อ sub-domain โดยต้องไม่ซ้ำกับใครมาก่อน ตั้งได้แล้วก็กดปุ่ม “Add site” ไป

หมายเหตุ: site ที่เราเพิ่มขึ้นมาใหม่ก็สามารถทำ custom domain ได้เช่นกัน

เอาหละตอนนี้เราจะเห็น 2 sites ในโปรเจคเดียวกันละ

ซึ่งถ้าคุณเอา domain ของ site ใหม่มาเปิดจะเจอหน้าที่แสดงเหมือนรูปด้านล่าง เพราะคุณยังไม่ได้ deploy ไฟล์ใดๆลงไป

2. ตั้งค่า Deploy Target ให้กับ Site ต่างๆ

ให้คุณเปิด terminal หรือ command line ขึ้นมา แล้ว shell ไปที่ root ของโฟลเดอร์โปรเจค Firebase Hosting จากนั้นให้เราใช้คำสั่งด้านล่างนี้ในการตั้งค่า Deploy Target

firebase target:apply hosting target-name resource-name

• target-name: ชื่อที่ตั้งให้สอดคล้องกับ site นั้นๆ (ตั้งเองได้เลย)
• resource-name: ชื่อของ site ที่แสดงอยู่ใน Firebase Console

ตัวอย่างของผม

เสร็จแล้วให้ลองเปิดไฟล์ .firebaserc จะเห็นว่ามีการเพิ่ม target เข้ามาแล้ว

3. Config ค่า target-name ใน firebase.json

ให้คุณเปิดไฟล์ firebase.json ขึ้นมา จากนั้นเปลี่ยนค่าที่อยู่ใน hosting ให้เป็น array แล้วระบุ object ชื่อ target เพิ่มเข้าไปในแต่ละ site (ชื่อ target เป็นชื่อเดียวกับข้อ 2)

สังเกตดูจะเห็นว่า object ชื่อ public คือการระบุ path ที่จะแสดงผลเว็บไซต์นั้นเอง ซึ่งจากตัวอย่างด้านบน ผมจะสร้างโฟล์เดอร์ชื่อ liff ขึ้นมา แล้วก็ลองเอาไฟล์ไปวาง

4. การ Deploy และการทดสอบ

การ deploy จะสามารถทำได้ 3 แบบ

// deploy ทุก sites ของ Hosting
// และ deploy ทุก functions ของ Cloud Functions (หากอยู่ใน root เดียวกัน)
firebase deploy
// deploy ทุก site ที่มีของ Hosting
firebase deploy --only hosting
// deploy เฉพาะ target site ของ Hosting
firebase deploy --only hosting:target-name

การทดสอบก็สามารถทำได้ 3 แบบเช่นกัน

// deploy ทุก sites ของ Hosting
// และ deploy ทุก functions ของ Cloud Functions (หากอยู่ใน root เดียวกัน)
firebase serve
// deploy ทุก site ที่มีของ Hosting
firebase serve --only hosting
// deploy เฉพาะ target site ของ Hosting
firebase serve --only hosting:target-name

ทดสอบเปิด site ที่เพิ่มมาใหม่อีกที ผลปรากฏแว่…ว่า!

มาแล้วจ้าา โอ้ยยย…ฟิน!

Pricing Plans

ตามที่เกริ่นในตอนต้นว่า Plan เริ่มต้น หรือ Spark Plan(ฟรี) ของ Firebase Hosting ให้พื้นที่ฟรี 10GB และ dara transfer 10GB ต่อเดือน แต่หากต้องการเก็บข้อมูลมากขึ้น หรือมี transaction ที่สูง ก็สามารถพิจารณาเป็น Plan อื่นๆ ตามรายละเอียด้านล่างนี้

กรณีใช้ Blaze Plan คุณจะได้โควต้าฟรีทั้งหมดของ Spark Plan มาสมทบด้วย แปลว่าคุณจะต้องใช้โควต้าฟรีให้หมดก่อน จึงจะเริ่มคิดเงิน

ทิ้งท้ายจากผู้เขียน

สำหรับเนื้อหาที่อยู่ในบทความนี้ ก็เก็บเรื่องหลักๆของ Firebase Hosting ไว้ครบละ แต่ก็ยังมีเสริมเช่นเรื่องการตั้งค่าสำหรับ Redirect, Rewrite และ Headers อีก ซึ่งใครสนใจก็สามารถเข้าไปดูรายละเอียดได้ที่

Configure hosting behavior | Firebase

จริงๆ Firebase Hosting ไม่ได้เป็น feature ใหม่ มีมานานละ แต่เหตุผลที่ผมมาเขียนเรื่องนี้ก็เพราะมันมีฟังก์ชันใหม่ๆเกิดขึ้นเช่น Custom Domain, Dynamic Content และ Multiple Sites ซึ่งยังไม่เจอใครเขียนถึงมาก่อน ประจวบกับที่ซีรี่ from Zero to Hero ก็ไม่เคยเขียนถึง feature ตัวนี้เช่นกัน

และในการทำงานของผมที่ LINE ประเทศไทย ก็มักเจอคำถามจาก Community ที่ว่า API ของ LINE จะต้องใช้ URL ของไฟล์ทุกอย่างเป็น HTTPS และการ Host เว็บสำหรับ LIFF(LINE Front-end Framework) ก็ต้องเป็น URL ที่มี SSL เช่นกัน แล้วนักพัฒนาทั่วไปจะไปหา Hosting ฟรีที่ไหนที่มี SSL ก็เลยถือโอกาสมาแบ่งปันบทความนี้กับทุกคนครับ สำหรับวันนี้ขอตัวลาไปก่อน จนกว่าจะพบกันใหม่นักพัฒนาชาวไทย