การใช้ Firebase ทำ Hosting

ก่อนอื่นต้องบอกก่อนว่า ส่วนตัวชอบ Firebase ในเรื่องของความง่ายในการใช้งาน แม้จะเป็น Developer มือใหม่ ขอเพียงแค่อ่านนิดนึงก็สามารถทำได้

"Firebase เป็น Cloud Server ที่พัฒนาขึ้นมาโดยทีมของ Google นักพัฒนาทั้งโมไบล์และเว็บสามารถใช้งานได้อย่างอิสระ ทั้งการจัดเก็บข้อมูลการเชื่อมต่อไปยัง Social Network ต่างๆ หรือกระทั้งการเก็บข้อมูลผู้ใช้งาน (Analytics)"

สำหรับบทความนี้เป็นการใช้ Firebase เป็น Hosting สำหรับผู้ที่ต้องการมีเว็บไซต์ของตนเอง

ในกรณีที่เรามีเว็บไซต์ (index.html) อยู่แล้วอาจจะรวมอยู่ใน Folder เดียวกันในเครื่องส่วนตัวหรืออะไรก็ตาม คราวนี้เราจะนำข้อมูลใน Folder นั้นไปไว้ที่ Firebase (Folder ที่เก็บไว้ในเครื่องคือ public) โดยเริ่มจากสร้าง Project ใน Firebase หากมี Project อยู่แล้วจะเลือกใช้ Project เดิมก็ได้ขึ้นอยู่กับความต้องการของนักพัฒนา

หากโปรเจคนั้นยังไม่เคยถูกใช้สำหรับ Hosting จะปรากฏหน้าต่างเริ่มต้นการทำงาน

และเมื่อคลิกที่ปุ่ม GET STARTED จะแสดงลำดับการทำงานให้เราทำตามลำดับ โดยเปิด Terminal ขึ้นมา แล้วติดตั้ง Firebase Command ด้วยคำสั่งดังภาพ

การพิมพ์คำสั่งใน Terminal

เมื่อติดตั้งคำสั่งเสร็จเรียบร้อย เราจะต้องเข้าสู่ระบบของ Firebase ด้วยการใช้คำสั่ง firebase login

หาก login หรือเปิด Firebase ไว้ก็จะแสดงชื่อที่เราได้ login ค้างไว้ให้เห็น

จากนั้นให้สร้าง Folder ที่จะถูก Deploy ขึ้น Firebase ด้วยคำสั่ง firebase init

เลือก CLI feature เป็น Hosting

เลือก Hosting เนื่องจากเราต้องการเอาเว็บของเราไปไว้ที่ Firebase Hosting จากนั้นให้เลือก Project ที่เราต้องการจะเอาเว็บไซต์ไปไว้

เลือก Project สำหรับเก็บเว็บไซต์

หลังจากนั้นระบบจะถามว่าเราต้องใช้ Datbase Rules อะไร ในที่นี้เรากด Enter ผ่านไปได้เลย ให้เรากำหนด Folder สำหรับที่จะเอาไว้ Deploy และถ้าเรายังไม่มี File index.html เราสามารถให้ระบบสร้างให้ได้ ดังภาพ

ลำดับถัดมาระบบจะถามว่าต้องการใช้อะไรเป็น public directory หากเรามีอยู่แล้วเป็น public ก็พิมพ์เป็น public ได้เลย สุดท้ายหากเรามี index.html อยู่แล้วคำถามถัดมาให้ตอบ N แต่ถ้ายังไม่มีก็ตอบ Y ไป

กำหนด init เรียบร้อย

เมื่อทุกอย่างเรียบร้อย คราวนี้เรามา Deploy ด้วยคำสั่ง firebase deploy ดังภาพ

หลังจาก Deploy เรียบร้อย

หากการทำงานทุกอย่างผ่านด้วยดี จะได้ Hosting URL มาให้ Copy ไปเปิดบน web browser

เว็บไซต์ผลลัพธ์

ผลลัพธ์กรณีที่เราให้ระบบสร้างหน้า index.html ให้

คราวนี้เราก็จะมี เว็บไซต์ เป็นของตัวเองแบบง่ายๆ แล้ว