Skip to main content

Firebase Hosting


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


image.png


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

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

. . .


การสร้าง Firebase Project

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

. . .


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

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

Screenshot 2565-11-10 at 22.45.34.png


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



Screenshot 2565-11-10 at 22.38.24.png



ขั้นตอนการใช้งาน 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


image.png

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

2. ติดตั้ง Firebase CLI

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

npm install -g firebase-tools

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


Screenshot 2565-11-10 at 23.45.46.png

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

firebase --version


Screenshot 2565-11-11 at 00.40.31.png

3. Initial Project

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

firebase login

Screenshot 2565-11-11 at 00.41.50.png

เมื่อ 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 แล้ว enter ไป