หลายคนที่ได้ติดตามข่าวงาน Google I/O 2016 น่าจะได้ยินข่าวการเปิดตัว Firebase บริการใหม่จาก Google ที่เข็นออกมาให้เหล่า Developer อย่างเรา ๆ ได้ร้องว้าว! กันไปแล้ว เพราะถูกอกถูกใจ เนื่องมีบริการและเครื่องมือต่าง ๆ ให้ใช้งานเยอะมาก และนำมาใช้งานได้สะดวก ประหยัดเวลาชีวิตเหล่า Dev ไปได้อีกหลายกอง

หลังจากจบงาน Google I/O 2016 เหล่า Dev ตาม Community ก็พูดถึงกัน แม้แต่งาน Google I/O Extended Bangkok ปีนี้ ก็ยังพูดถึง Firebase อยู่หลาย Session เลยทีเดียว

เนื่องจากช่วงที่ผ่านมาที่หายหน้าหายตาไป ก็เพราะยุ่งมาก ๆ เลยปล่อย Blog ร้างไปอยู่พักนึง แต่ก็แอบเล่นโน่นนี่อยู่เรื่อยนะ และ Firebase ก็เป็นหนึ่งในเรื่องที่แอบไปเล่นมา

จนถึงตอนนี้ ไม่เขียนถึง Firebase ไม่ได้แล้ว แต่ว่าก็มีนักพัฒนา ไปเขียน Blog เกี่ยวกับ Firebase ไปแล้วเพียบเลย ไม่เขียนบ้างไม่ได้แล้วววววววว

ก่อนอื่น ขอแนะนำ Firebase กันก่อน ถ้าเข้าไปที่เว็บหน้าแรกของ Firebase จะพบว่า บริการที่มีอยู่ใน Firebase นั้น เพียบ!

แต่ละตัว แจ่ม ๆ ทั้งนั้น ทั้งสูง ขาว เนียน … เด๋ว ๆ

เข้าเรื่องเลยดีกว่า… Blog นี้ผมจะขอแนะนำให้รู้จักกับบริการ Firebase Hosting

 

Firebase Hosting คืออะไร

ถ้าพูดถึง Hosting หรือ Web Hosting หลาย ๆ คนคงร้องอ๋อ Firebase Hosting ก็เป็น Web Hosting นี่ล่ะ แต่ที่ไม่เหมือน Web Hosting ที่มีให้เช่าเป็นรายปีหรือรายอะไรก็ว่าไปนั้น แน่นอนมีค่าใช้จ่าย แต่สำหรับ Firebase Hosting นั้น ฟรีจ้า!

แต่มีข้อแม้นิดหน่อยนะ นั่นก็คือ ไฟล์ที่วางอยู่บน Firebase Hosting นั้น จะต้องเป็น Static file พูดง่าย ๆ ก็คือเว็บที่เป็น Static… ยากอยู่ใช่มั๊ย ก็พวกไฟล์ HTML, JavaScript, CSS หรือรูปต่าง ๆ นั่นแหล่ะ

ถ้าใครคิดจะเอา php หรือ Script ฝั่ง Server Side ไปวาง เลิกคิดไปได้เลยยยยย

และมีข้อจำกัดด้านปริมาณข้อมูลด้วยนะ เด๋วจะพูดถึงอีกทีตอนท้าย แต่เท่าที่มีให้ใช้ ถ้าไม่ใช้อะไรพิศดาร ก็เยอะมว๊ากแล้ว

 

Firebase เหมาะกับใคร

เนื่องจากเป็น Hosting ที่ยอมรับแต่ Static file เพราะฉะนั้น เหมาะกับเว็บที่มีแต่ Front-end เท่านั้น เช่นเว็บที่ไว้แนะนำเกี่ยวกับธุรกิจของตัวเอง ใช้ Firebase Hosting สบายมากกกก สามารถเลิกเช่า Web Hosting ย้ายมาใช้ Firebase Hosting ได้เลย และแม้แต่มี Domain อยู่แล้ว ก็สามารถกำหนดให้ Domain ชี้มายัง Firebase Hosting ได้เลย อะไรมันจะใจปล้ำขนาดนี้เนี่ยยยย

ช่วงขายของ: ถ้าใครมี Static Web แล้วอยากลดค่าเช่า Web Hosting อยากย้ายมาใช้ Firebase Hosting แต่ทำไม่เป็น หลังไมค์มาจ้างผมได้นะ

 

จะใช้ Firebase Hosting ต้องทำยังไงบ้าง

แค่มี Google Account ก็เปิดใช้งานได้เลย โดยเข้าไปที่ https://console.firebase.google.com/ ทำการ Sign-In ด้วย Google Account ให้เรียบร้อย

หลังจากนั้น คลิกที่ปุ่ม CREATE NEW PROJECT ก็จะพบ Dialog ให้กรอกชื่อ Project name และเลือก Country/region เสร็จแล้วกดปุ่ม CREATE PROJECT ได้เลย

ที่หน้า Firebase Console จะเห็นเมนูด้านซ้าย คลิกเข้าไปที่ Hosting

ก็จะพบ Dialog แนะนำ กดปุ่ม GET STARTED ได้เลย

ขั้นตอนต่อไป จะเป็นการติดตั้ง Firebase tools โดยการติดตั้งนั้น จะต้องติดตั้งผ่าน npm ที่มากับ Node.js หากเครื่องใครไม่ได้ติดตั้ง Node.js ไว้ ก็ทำการติดตั้งให้เรียบร้อยซะ (จะใช้ Version ไหนก็ได้ แต่ผมแนะนำ Version ล่าสุด)

เมื่อติดตั้ง Node.js เรียบร้อย ให้เปิด Command/Terminal ขึ้นมา แล้วพิมพ์คำสั่งดังนี้

สำหรับผู้ที่ใช้ Windows ต้องเปิด Command ขึ้นมาด้วยการ Run as administrator ส่วนผู้ที่ใช้ Mac และ Linux ให้พิมพ์ sudo นำหน้า ดังนี้

ถ้าติดตั้งได้เรียบร้อย จะไม่พบ Error ใด ๆ ดังรูป

ที่ Firebase Console บน Dialog แนะนำก่อนหน้านี้ กดปุ่ม CONTINUE ก็จะพบคำแนะนำต่อไป

ขั้นตอนต่อไป ให้พิมพ์คำสั่ง firebase login Firebase tools จะถามว่า ขอเก็บข้อมูลการใช้งาน จะได้มั๊ย อันนี้เลือกที่สบายใจได้เลย

แล้ว Firebase tools จะเปิดหน้าเว็บไซด์ขึ้นมา เพื่อขอ Permission จากเรา ก็อนุญาตให้เรียบร้อย

เมื่อ Login เสร็จแล้ว ขั้นตอนต่อไปคือการทำ Initialize โดยเราจะต้องย้ายตำแหน่ง Command เราไปอยู่ที่ Folder ที่เราจะวางไฟล์เว็บก่อน แล้วค่อยพิมพ์คำสั่ง firebase init แล้วระบบก็จะถามว่า ต้องการ Setup อะไรบ้าง โดยจะมี 2 ตัวเลือก ก็คือ Database (สำหรับ Firebase Realtime Database) และ Hosting ให้เลื่อนขึ้น-ลง ด้วยปุ่มลูกศร และใช้ปุ่ม Spacebar ในการ Check/Uncheck แล้วกด Enter เพื่อเป็นการยืนยัน

หลังจากนั้น ระบบจะถามว่า จะใช้งาน Firebase project ไหน ก็เลือกไปที่ชื่อ Project ที่เราสร้างไว้ในตอนแรก

Firebase tools จะถามต่ออีก ว่าต้องการใช้ public directory ไม๊ ก็กด Enter ได้เลย

ก็จะมีคำถามอีก ว่าจะสร้างไฟล์ index.html ภายใน Folder public จะให้สร้างไม๊ (ถ้ามีไฟล์เดิมอยู่ก่อน จะถูกเขียนทับ)

เป็นอันเสร็จสิ้นขั้นตอน Initialize ก็จะได้ไฟล์มา 2 ไฟล์ ดังรูป

และอันนี้คือเนื้อไฟล์ของ firebase.json ซึ่งจะบอกรายละเอียดของ Firebase Hosting project ของเรา

 

แล้วเอาไฟล์ขึ้น Firebase Hosting ยังไง

ถ้าผ่านขั้นตอนข้างบนมาแล้ว ง่ายมากครับ เพียงแค่พิมพ์ firebase deploy ก็จะทำการอัพโหลดทุกไฟล์ที่อยู่ใน Folder public ขึ้นไปแล้ว ตอนนี้ก็สามารถลองได้เลยครับ ใช้ไฟล์ index.html ที่ Firebase tools สร้างมาให้นั่นล่ะ อัพโหลดไปก่อนเลย

 

แล้วมันไปอยู่ไหนล่ะ…

กลับเข้าไปดูที่ Firebase Console ถ้ายังเปิด Dialog ค้างไว้อยู่ กดปุ่ม FINISH ไปก่อน แล้วเราจะเห็นว่า จะมี Link ให้เรากดเข้าไปดูเว็บไซด์เราได้แล้ว

ถ้าอยากดูสดที่ผมทำไว้ ก็จิ้มที่นี่เลย

ส่วนด้านล่าง จะแสดงประวัติของการ Deploy เว็บด้วย

ทีนี้ ผมได้ลองเพิ่มไฟล์ hello.html ดังนี้

แล้วพิมพ์คำสั่ง firebase deploy อีกครั้ง ก็จะทำการอัพโหลดขึ้นไปใหม่

ลองเปิดดูหน้าเว็บ ก็จะแสดงผลได้ปกติ ลองเข้าไปดูสด ๆ ที่นี่

 

Filebase Hosting จำกัดปริมาณข้อมูลไม๊

แน่นอนครับ ของฟรี ก็ต้องมี Limit ลองดู Pricing ดูก่อนนะครับ

จะเห็นว่า Firebase Hosting เริ่มต้น เราสามารถใช้เก็บไฟล์ได้มากถึง 1 GB และรองรับการ Download (เช่นการเปิดดูเว็บไซด์) ถึง 10 GB (ใช้ยังไงให้หมดล่ะเนี่ย)

แต่ถ้าใช้มากเกินกว่านี้ ก็สามารถจ่ายเงิน เพื่อเพิ่มได้ 2 รูปแบบ คือ เหมาจ่าย 25 USD ต่อเดือน หรือจ่ายตามการใช้งาน รายละเอียดตามที่แสดงอยู่ในตารางเลย

 

มี Domain จดไว้แล้ว เอามาผูกยังไง

ขั้นตอนนี้ก็ง่ายมากครับ ขอไม่ทำให้ดูละกันเน๊อะ เพียงแค่เข้าไปยัง Firebase Console ที่เมนู Hosting ของ Project เรา จะเห็นปุ่ม CONNECT CUSTOM DOMAIN สีฟ้า ๆ เด่น ๆ ด้านบน กดเข้าไปปุ๊บ ก็จะมีขั้นตอนแนะนำ แป๊บเดียวก็เสร็จแล้ว

 

สรุป

Firebase Hosting คือ Static Web Hosting ของ Google ที่ให้เราสามารถสร้าง Static Website ได้ โดยไม่มีค่าใช้จ่ายใด ๆ เลย นอกเสียจากเว็บนั้นมีผู้ใช้งานเยอะมาก (ซึ่งส่วนใหญ่จะไม่ใช่ Static Web) ก็สามารถจ่ายเงิน เพื่อใช้งานต่อได้

สำหรับ Dev ทุนน้อย หรือน้อง ๆ นักศึกษา โอกาสมาถึงแล้วครับ สร้างเว็บไซด์กันเถอะ