Deploy เว็บไซด์ขึ้น Hosting ฟรี ๆ ด้วย Firebase

เมื่อทำเว็บไซต์เสร็จแล้วจะเอาขึ้น Hosting ตัวไหน?
ยังไม่อยากเช่า Hosting และจด Domain เพราะยังเป็นตัว Demo หรือตัวจบ
อยากใช้ Hosting ที่มีความน่าเชื่อถือ
Hosting ฟรีๆ ใช้ดีตัวไหนล่ะ?

Firebase Hosting คืออะไร

Firebae Hosting ก็เป็น Web Hosting ทั่วไป แต่จะแตกต่าง กับที่มีให้เช่าเป็นรายปี เพราะสำหรับ Firebase Hosting นั้น ของฟรี :)

ข้อจำกัดของ Firebase Hosting

สำหรับเว็บไซต์ที่จะนำขึ้น Firebase Hosting นั้น จะต้องเป็น Static Page เช่นพวกไฟล์ HTML, JavaScript และ CSS เป็นต้น

วิธีการ Deploy เว็บไซต์ของเราขึ้น Firebase Hosting

1. ทำการสร้าง Project ใน Firebase
2. ให้เลือกไปที่เมนู Hosting ที่อยู่ทางด้านซ้าย

ก็ให้ทำการติดตั้ง Firebase tools ด้วยคำสั่ง แต่ต้องติดตั้ง Node.js ก่อนะครับ

$ npm install -g firebase-tools

ถ้าติดตั้งเสร็จก็จะได้ออกมาประมาณนี้

จากนั้นก็ให้ทำการ Sing in ด้วย Account Google ด้วยคำสั่ง

$ firebase login

3 . ให้กลับเข้าไป Project ของเรา (เจ้าของบล็อคใช้ Terminal นะจ้า) แล้วให้ทำการกำหนดค่าเริ่มต้นของ Firebase ให้กับ Project โดยใช้คำสั่ง

$ firebase init

ก็ให้เลื่อนลงมาที่ตัวเลือกที่สามดังรูปนะครับ แล้วก็ Enter ได้เบย !!!

ต่อมาก็ให้เลือก Project ที่เราสร้างไว้ เมื่อเลือกเสร็จ Firebase ก็จะถามว่า “ควรใช้ไฟล์อะไรใน Database Rules ชื่อว่า database.rules.json?” ก็ให้เอาค่า Default นั่นแหละกด Enter ไปโลด

แล้วก็จะเจอคำถามว่า “ต้องการติดตั้ง dependencies กับ npm หรือไม่?” ก็ให้ตอบไปสั้นๆว่า Y จากนั้นก็รอให้มันทำการติดตั้งจนเสร็จ จะออกมาประมาณนี้

ต่อไปก็จะเจอในส่วนของการตั้งค่า Hosting ทาง Firebase ก็จะถามว่า “ต้องการใช้ public directory ที่มีชื่อว่า public หรือไม่?” จะกด Enter เลยก็ได้นะครับแต่เจ้าของบล็อคขอเปลี่ยนชื่อเป็น “app” ละกัน เพราะความรู้สึกส่วนตัวล้วนๆ

มาถึงคำถามท้ายสุดและสุดท้ายแล้ว ซึ่งจะถามว่า “การกำหนด Single page ของ app ชื่อว่า index.html ซึ่งถ้ามีก็จะเขียนทับเลยไหม?” แต่ในกรณีที่ไม่มีก็จะสร้างให้เราใหม่ ซึ่งตอนนี้เจ้าของบล็อคยังไม่มีก็เลยตอบไปว่า y

การตั้งค่าเสร็จแล้วเหนื่อยเนาะ 🔥🔥🔥🔥🔥🔥

จากนั้นเจ้าของบล็อคขอกลับไปแก้ไขไฟล์ index.html โดยจะทำเป็นฟอร์ม Login ง่ายๆ โดยไม่มีการ Call APIs นะครับ หน้าตาก็จะออกมาประมาณนี้

เอาล่ะ ได้เวลาทำการเอาขึ้น Hosting ของ Firebase กันสักทีโดยจะใช้คำสั่ง

$ firebase deploy

ก็เป็นอันเสร็จสิ้นพิธีการ Deploy เว็บไซต์ขึ้น Hosting ของ Firebase แล้วครับต่อมาก็ลองเปิด Hosting URL ดูนะครับ เจ้าของบล็อคก็จะได้ผลลัพธ์ดังนี้

และเมื่อกลับไปดูที่หน้า Console Firebase ของ Project ตรงเมนู Hosting จะเห็นประวัติการ Deploy และ Domain ของเว็ปไซต์

สรุป Firebase Hosting เหมาะสำหรับเว็ปไซต์ที่เป็น Static page แต่ถ้าเป็น Script ในฝั่ง Server ละก็ให้เลิกล้มความคิดนั้นไปเลยนะครับ ซึ่งเจ้านี่มันเหมาะสมมากสำหรับการทำ Project Demo,หัดเขียนเว็ปไซต์ หรือตัวจบ เป็นอย่างมากเพราะไม่ต้องไปเช่าลดค่าใช้จ่ายลงไปได้เยอะเลยครับผม ก็หวังว่าจะเป็น Hosting อีกตัวหนึ่งที่น่าใช้งานนะครับ 🔥👏​🙏👍💪