การใช้ Firebase Hosting เบื้องต้น step by step

บทความนี้จะเป็นการใช้งาน firebase ส่วนของ feature hosting

Firebase Hosting เป็นบริการ hosting ให้เราใช้ได้แบบฟรีๆ แต่เป็นไฟล์แบบ static (html, js, css) หรือจะพูดง่ายๆว่าคือส่วนที่เป็น Frontend เมื่อเรามีส่วน frontend แล้ว firebase ยังมี feature อื่นๆ หลายอื่น เช่น authentication, cloud functions และ realtime database ไหนๆ เลยเรื่อง hosting มาละ ก็อธิบาย feature อื่นไปด้วยเลย

Authentication ตัวนี้เป็นตัวหลักเลยก็ว่าได้ อย่างที่เราเห็นกันว่าระบบส่วนใหญ่ก็ต้องการ Authen เพื่อเข้าใช้งาน ซึ่ง firebase ก็ทำ feature นี้มาให้ใช้ซึ่งสามารถเลือกได้ว่าจะ authen ด้วยกับ provider ตัวไหน Google, Facebook, Twitter, GitHub, Anonymous รวมทั้งการ authen ที่ verify ด้วย Email หรือ Phone ได้ด้วย และที่บอกว่าเป็นตัวหลักเลยก็เพราะว่า ตัว authentication นี้จะผูกกับกฎของการใช้ database ของ firebase ด้วย ว่าการเขียนหรืออ่านข้อมูลจาก database ต้องการการ authen ด้วยหรือไม่

Cloud Functions เปรีบเสมือนเป็น Backend มีหน้าที่ไว้รับ trigger ต่างๆ จาก feature อื่นๆ ของ firebase เอง เช่น Authentication, Database realtime, Storage รวมถึง HTTPS requests ซึ่งจะเป็นการ code ภาษา javascript รันไว้บน Cloud ของ Google

Firebase realtime database ส่วนนี้จะเป็น cloud database แบบ NoSQL ให้เราสร้าง database ไว้ใช้งาน ข้อมูลจะ syncs แบบ realtime และยังสามารถใช้งานแบบ Offline ได้ด้วย

เริ่มสร้าง Project firebase
ให้ผู้อ่านไปที่เว็บ https://console.firebase.google.com (ถ้ายังไม่เคย สมัครสมาชิกเลย)

Create Project Firebase

เมื่อสร้างโปรเจคเสร็จจะมาอยู่ในหน้า Overview จะเห็นส่วนของการเพิ่ม firebase ไปใช้กับ flatform ต่างๆ เช่น iOS, Android และ Web (จริงๆ ณ ตอนนี้ใช้กับ C++ และ Unity ได้ด้วย) ในบทความนี้ผู้เขียนจะนำเสนอการใช้ firebase กับ web นั้นผู้อ่านลองคลิกเลือก Add Firebase to your web app -> แล้วจะปรากฎ script และ config ในรูปแบบ json object แต่ยังไม่ต้องทำการ copy นะครับ เดี๋ยวจะมาดูส่วนของ Firebase Hosting กันก่อน

การอื่นเราต้องลง firebase-tools และ login เข้า firebase ด้วยคำสั่ง (เครื่องต้องมี nodejs ก่อนนะ)

npm install -g firebase-tools
firebase login

หลังจากลง firebase-tools และ login แล้ว เราจะเริ่มการ init โปรเจคกัน ให้ทำการสร้าง floder สำหรับโปรเจคของเราและเข้าไปใน Floder แล้วใช้คำสั่ง init ตามนี้

mkdir <project-name>
cd <project-name>
firebase init

จะมี promt ตามรูปด้านล่าง ให้ตอบ Y

ต่อมาจะเป็นเราต้องเลือกว่าเราจะใช้ feature อะไรบ้างสำหรับการ init โปรเจคนี้ ตามที่กล่าวข้างต้น เราจะทำทั้งสามเลย นั้นกด space bar เพื่อเลือกทั้งสามข้อแล้ว Enter

ขั้นตอนต่อมาเลือกโปรเจค firebase ที่เราได้สร้างจาก console.firebase.com ขั้นตอนแรกสุดเลยย

ตอบ Y เพื่อ install dependencies

กด Enter เพื่อใช้ directory public ของ hosting ชื่อ directory ว่า public

เมื่อทุกอย่างเรียบร้อยจะเจอคำว่า Firebase initialization complete

ลองดูไฟล์และโฟลเดอร์หลังจาก init เสร็จ

จะมีโฟลเดอร์ดังนี้
- functions โฟล์เดอร์นี้จะเป็น code js สำหรับใช้กับ feature Cloud functions
- public โฟลเดอร์เก็บโค้ด html, css และ js ที่เป็น static สำหรับขึ้น hosting

.firebaserc เป็นไฟล์ config ชื่อ project
database.rules.json เป็น rule สำหรับกำหนดสิทธิ์ของ database
firebase.json config ไฟล์ ถ้าเปิดดูจะเห็นว่าเป็นการกำหนด path ต่างๆ

ลองเปิด Project ด้วย Editor ผู้เขียนเปิดด้วย VS Code ส่วนนี้ตามแต่ถนัดกันเลยครับ จะใช้ตัวไหนก็ได้

ลองมาส่งไฟล์ index.js โฟลเดอร์ functions ก่อนเลย จะเห็นว่ามี exports.helloWorld = … ถูกคอมเม้นไว้ 555 อย่าเพิ่งรีบร้อนนะครับ ปล่อยไว้ก่อน

มาส่องไฟล์ที่น่าสนใจถัดไป คือ public/index.html
มีโค้ด default ที่ firebase เค้าเตรียมไว้ให้ เหมือนเดิมยังไม่ต้องแก้ไขอะไรครับ เราจะลอง deploy โค้ด default นี้แหละ ขึ้น hosting เลย

ใช้คำสั่ง

firebase deploy

หลังจากส่งคำสั่งนี้ไปก็ไปชงกาแฟหรือเช็คมือถือสักแปบนะครับ

กลับมาแล้ววว จะเห็นผลของการ Deploy ถ้าไม่มีอะไรผิดพลาดก็จะเป็นตามนี้ครับ
Deploye complete!
Project Console: ….
Hosting URL: https://reactjs-firebase-cd945.firebaseapp.com

ไม่บอกก็รู้ว่าเธอ… นั้นมีเว็บบนโฮสแล้วนะเอ่ออ

URL ของเราจะเป็น subdomain ของ firebaseapp.com
ผู้เขียนเคยสร้าง project ที่ชื่ออื่นแบบไม่ใช่ชื่อโหลๆ แบบนี้ ก็จะได้ชื่อโปรเจคสวยๆ เป็น subdomin.firebaseapp.com เลยนะขอรับ

มาลองเปิดด้วย url จากขั้นตอนก่อนหน้าเมื่อกี้ อัยยะ แสนจะง่ายดาย

ที่หน้าเว็บปรากฎออกมาแบบนี้ ผลจากโค้ด default ของ firebase tools นั้นเอง ตอนนี้คัดไม้คัดมือมาก อยากจะลองแก้โค้ด html แล้ว deploy แล้ววววว แต่ช้าก่อน ลองกลับไปดูที่ console.firebase.com

เมื่อกลับมายัง console firebase ลองไปที่เมนู Hosting ใน Tab Dashboard มี Domain และ Deployment History

ก็ตามนั้นเลยครับ เราสามารถจด Domain เพื่อมาเชื่อมต่อกับ host ได้เลย
และมีประวัติไว้เราดู รวมทั้งยังสามารถ Rollback ได้ด้วย กรณีที่มีการ Deploy แล้วมากกว่า 1 ครั้ง ไม่เชื่อลองดูได้ 555

กลับมาแก้โค้ด public/index.html กันสักนิดหน่อยแล้ว deploy กัน

ผู้เขียนจะลองทำลิงค์เพื่อสลับหน้าไปมาระหว่าง url ให้ผู้อ่านได้เห็นภาพของการโค้ดว่าไม่ต่างการจากใช้ hosting แบบเดิมๆ

ไปไฟล์ index.html แก้โค้ด html ใน tag body เป็นการใส่ลิงค์ โค้ดตามนี้

<div>
<a href="./index.html">Hosting</a>
<a href="./database.html">Database</a>
<a href="./cloudfunction.html">CloudFunction</a>
</div>

สร้างไฟล์ใหม่ชื่อว่า database.html โค้ดตามนี้

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
</head>
<body>
<div>Database</div>
<div>
<a href="./index.html">Hosting</a>
<a href="./database.html">Database</a>
<a href="./cloudfunction.html">CloudFunction</a>
</div>
</body>
</html>

อีกไฟล์ชื่อว่า cloudfunction.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
</head>
<body>
<div>Cloud function</div>
<div>
<a href="./index.html">Hosting</a>
<a href="./database.html">Database</a>
<a href="./cloudfunction.html">CloudFunction</a>
</div>
</body>
</html>

หลังจากแก้โค้ดแล้วลอง deploy โดยกลับไปที่ command แล้วใช้คำสั่ง

firebase deploy

ที่ console firebase จะเห็นประวัติของการ deploy ซึ่งอันที่สถานะเป็น Deployed จะสามารถ Rollback กลับไปใช้งานได้

มาดูเว็บหลังจากเพิ่มลิงค์ไป และลองกดลิงค์ดู ตรงนี้ผู้เขียนต้องการให้เข้าใจวิธีการ deploy ก่อนนะครับ โดยสรุปคือ เราจะเอาโค้ด html, css และ javascript หรือส่วนที่เป็น frontend ไว้ในโฟลเดอร์ public แล้ว deploy เราก็จะได้เว็บแล้ว

ถึงตรงนี้ถือว่าเราใช้ Hosting เป็นแล้วนะครับ แต่ยังมีรายละเอียดในการกำหนด Behavior เกี่ยวกับ hosting อยู่ เช่นเวลาเจอ Error ตามประเภทต่างๆ เช่น 404 , 301, 302 อะไรพวกนั้น สามารถศึกษาต่อได้จาก https://firebase.google.com/docs/hosting/url-redirects-rewrites

Web developer, Full stack developer, React, Nextjs, Nodejs and Golang

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store