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>"
  }
}