Firebase Hosting

[Firebase Hosting] คืออะไร มาทำความรู้จัก และมาใช้งานเบื้องต้นกัน

ถ้ามีคนถามว่า Firebase คืออะไรนี่คือคำตอบเบื้องต้นสำหรับทุกคน

Firebase Hosting คือ Tools สำหร้บสร้าง Hosting ที่สะดวกและเป็นที่นิยมของ Firebase โดยเราสามารถใช้งานเบื้องต้นได้แบบไม่มีค่าใช้จ่าย ซึ่งสามารถทำให้เรามีหน้าเว็บไซต์ที่สมบูรณ์และพัฒนาไปต่อได้ แต่ก็มีข้อจำกัดในด้านการทำงานหลายๆ อย่างซึ่ง หากต้องการใช้ Feature เพิ่มเติมสามารถตรวจสอบที่ Firebase pricing ของตัว Firebase ได้เลยครับ

. . .

การสร้าง Firebase Project

สำหรับการสร้าง Firebase เบื้องต้นเราสามารถดูวิธีการสร้างต่างๆ ในการทำและการสร้างโปรเจคได้ใน Book เล่มนี้ใน หน้าก่อนหน้าที่จะถึงเพื่อเป็นแนวทางในการใช้งานต่อไป

. . .

เริ่มใช้งาน Firebase Hosting

เมื่อสร้าง Project เสร็จแล้ว กลับมาที่หน้า Project Overview ให้มองหาเมนู Hosting และจะคลิกที่ Card หรือที่ Sidebar ก็ได้ครับ

เมื่อเข้ามาสู่หน้า Hosting เราจะพบกับหน้าจอดังภาพด้านล่าง คลิกที่ เริ่มต้นใช้งาน

ขั้นตอนการใช้งาน firebase Hosting

1.ติดตั้ง Node.js เพื่อเรียกใช้งาน Node package Manager

โดยเราจะเริ่มต้นด้วยการติดตั้งตัว Node.js เป็นอันดับแรก หากยังไม่ได้ติดตั้งสามารถติดตั้งได้ที่ Node.JS ซึ่งสาเหตุที่เราต้องติดตั้งตัว Node.js ก่อนเป็นเพราะว่าการติดตั้งตัว Package firebase ที่เป็นปัจจุบันจำเป็นต้องทำการติดตั้งผ่านทาง NPM โดยสามารถเช็ค ว่ามี Node.js บนเครื่องของเราแล้วหรือยังแล้วหรือยังโดยการใช้งานคำสั่ง

node --version 
npm --version

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

เมื่อ run command ผ่านผลลัพธ์จะได้แบบนี้

2. ติดตั้ง Firebase CLI

Run คำสั่งใน terminal /cmd เพื่อทำการติดตั้งตัว FIrebase CLI ได้เลยด้วยคำสั่ง

npm install -g firebase-tools

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

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

firebase --version

3. Initial Project

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

firebase login

เมื่อ run command firebase login จะเด้งหน้า authentication ของ google ขึ้นมาก็สามารถ Login ได้ด้วย email ที่ทำการผูกกับ project ไว้

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

mkdir Hosting
cd Hosting/

เมื่อเข้าไปที่ directory ที่ต้องการแล้วให้ทำการ initial project ด้วยการใช้คำสั่ง

firebase init

จะเจอคำว่า Firebase เป็นไฟ LED เท่ๆ พร้อมแบบเมนูให้เลือก feature ของ Firebase CLI ที่ต้องการใช้งาน โดยให้เลือก Hosting: Configure files for Firebase Hosting and (optionally) set up Github Action deploys แล้ว enter ไปแต่ก่อน enter อย่าลืมเลือกด้วยการกด spacebar ก่อนการกด enter

และเลือก Use an existing project เพื่อเลือก Project ที่มีอยู่ในตัว Console ของ Firebase เพื่อทำการใช้งาน Project ของเราและจากนั้นก็จะเจอส่วนที่ให้เลือก project ที่มีใน Firebase console เลือกและกด Enter ไปตามเคย

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

ภาพตอน initial project เสร็จเรียบร้อย

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

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

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

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

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

4. Deploy website

เริ่มจากการเปิด terminal/cmd แล้ว shell ไปที่ root ของโฟลเดอร์โปรเจคในขั้นตอนที่ 3 จากนั้นรันคำสั่ง

firebase deploy

หรือถ้าใครมี folder firebase Hosting และ cloud functions for firebase อยู่ใน root เดียวกัน และต้องการ reply เฉพาะเว็บไซต์ก็สามารถรันคำสั่ง

firebase deploy --only hosting

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

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

ลองเปิด URL ดูสักหน่อย

เว็บเราสามารถใช้ได้แล้วดีใจ😊

นอกจากนี้ถ้าเราเข้าไปที่ Firebase console เลือกเมนุ Hosting จะเจอรายละเอียด domian และ ประวัติการ deploy ทั้งหมดของเรา

. . .

การ Custom Domain

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

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

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

หาก verify ผ่านแล้วก็จะเจอหน้าที่ให้เอาข้อมูล A record ไปกรอกเพิ่มใน DNS ก็กรอกให้เรียบร้อยและกด Finish ได้เลยหลังจากกรอกเสร็จก็รอประมาณ 5 นาทีจะเห็นเป็น status "Need setup " จากนั้น Firebase Hostinf จะทำการ provision ตัว ssl ให้กับ domain ซึ่งจะเสร็จใน 24 ชม.

รูปภาพประกอบจากพี่ jirawatee Google developer expert firebase

Firebase Hosting