สร้างเว็บด้วย Next.js Material-UI บน Serverless ของ Firebase

เว็บที่สร้างด้วย Next.js กับ Material-UI โดยเว็บไซต์นี้ จะทำงานอยู่บน Serverless ของ Firebase แบบ Server Side Rendering
- เป็นเว็บ SSR (Server Side Rendering) โดยใช้งาน Cloud Functions เพื่อเรนเดอร์เว็บออกมาพร้อมเนื้อหาในครั้งแรก โดยใช้ Javascript และสามารถทำ SEO ได้ด้วย (Search Engine Optimization)
- เว็บที่ใช้งานฐานข้อมูล (Database) ของ Firebase Firestore เป็นหลัก
- เว็บที่ใช้งาน Cloud Storage ของ Firebase สำหรับเก็บข้อมูลรูปภาพ หรือเนื้อหา (Contents) ต่างๆ
- เว็บที่ใช้งาน Hosting ของ Firebase เพื่อเก็บข้อมูลสำหรับบริการเว็บไซต์ ส่วนใหญ่จะเป็นไฟล์ Build ของ Next JS เพื่อให้เบราว์เซอร์ดึงไปใช้งาน สำหรับแสดงและติดต่อกับผู้ใช้งานเว็บไซต์ทั่วไป อนาคตอาจจะมีการใช้งานอย่างอื่นของ Firebase เพิ่มเติม
และนี้คือตัวอย่างที่เรากำลังพัฒนา จิ้มลิงค์นี้เลย DEMO: https://fbc.saprayworld.com/
หากต้องการตามไฟล์ที่อัพเดทใกล้กับตัว DEMO มากที่สุด ให้โคลนโปรเจคจาก Branch ที่ชื่อ dev นะครับ
หากผมกำลังทำอะไรอยู่ก็สามารถดูได้ที่ลิงค์นี้นะงับ https://github.com/users/saprayworld/projects/1 (ทำไมไม่สร้างใน Repository แต่แรก ก็ไม่เข้าใจตัวเองเหมือนกัน 555)
และแน่นอน มันคือตัวที่กำลังพัฒนาอย่างต่อเนื่อง ดังนั้นจึงไม่แนะนำ ใจจริงอยากให้รอตัว master มากกว่า เพราะอยากทำให้มันดีที่สุดจริงๆก่อน ค่อยปล่อยให้โหลดไปใช้งานกัน โปรเจคนี้ผมทำคนเดียวนะ 5555 ส่วนใหญ่จะทำตอนว่างๆ แต่ก็ทำทุกวันน๊าาาาา °^°
นอกเรื่องแล้วววว °^°
ที่กล่าวมาทั้งหมด ทำไมต้องเป็น Firebase นั้นก็เพราะว่า มันฟรียังไงล่ะ 5555 เราสามารถสร้างเว็บไซต์ของเราและปล่อยสู่สาธารณะได้โดยไม่เสียเงินสักบาท
Firebase แบบใช้งานฟรี ให้อะไรกับเราบ้าง
Hosting (พื้นที่เก็บข้อมูล Static Files ต่างๆ สำหรับเว็บ)
- พื้นที่เก็บข้อมูล 10 GB
- จำนวนข้อมูลที่ถ่ายโอน 10 GB/เดือน โดยนำมาหารจำนวนวันในแต่ละเดือนจะได้จำนวนจริงๆ จะอยู่ที่ 360MB โดยประมาณ
- สามารถตั้งค่า domain ของเราเองได้ หากเรามี domain อยู่แล้ว และเมื่อเราตั้งค่าแล้ว Firebase จะใส่ SSL ให้เราด้วยเลย
- ตัวฟรีจะใช้งานได้แค่ 1 เว็บ
Cloud Functions
- การเรียกใช้งานที่ 125,000 ครั้ง/เดือน อันนี้ต่อเดือนจริงๆ
- GB-seconds 40,000/เดือน อันนี้ไม่รู้คืออะไรแฮะ ถ้ารู้เดี๋ยวมาอัพเดทนะ
- CPU-seconds 40,000/เดือน อันนี้ไม่รู้คืออะไรแฮะ ถ้ารู้เดี๋ยวมาอัพเดทนะ
Storage (พื้นที่เก็บข้อมูล รูปภาพ หรือเนื้อหา ต่างๆ)
- พื้นที่เก็บข้อมูล 5 GB
- จำนวนข้อมูลที่ถ่ายโอน 1 GB/วัน
- เขียน หรืออัพโหลดไฟล์ต่างๆ 20,000 ครั้ง/วัน
- อ่าน หรือดาวน์โหลดไฟล์ต่างๆ 50,000 ครั้ง/วัน รวมทั้งการอ่านไฟล์เพื่อมาแสดงในเว็บด้วยเช่นกันนะครับ
- ตัวฟรี จะสร้างที่เก็บข้อมูลได้แค่เพียงที่เดียว
Cloud Firestore (บริการฐานข้อมูล (แบบเรียลไทม์ก็ได้เช่นกัน) แบบไม่ใช่ SQL อะไรพวกนั้นนะ)
- พื้นที่เก็บข้อมูล 1 GB
- จำนวนข้อมูลที่ถ่ายโอนเฉพาะขาออก 10 GB/เดือน
- เขียนได้ 20,000 ครั้ง/วัน
- อ่านได้ 50,000 ครั้ง/วัน
- ลบได้ 20,000 ครั้ง/วัน
Authentication (บริการยืนยันตัวตนเพื่อเข้าใช้งานเว็บ)
- ยืนยันโดยใช้โทรศัพท์ ใน US แคนนาดา และ อินเดีย 10,000 ครั้ง/เดือน
- ยืนยันโดยใช้โทรศัพท์ ใน ประเทศอื่นๆทั้งหมด 10,000 ครั้ง/เดือน
- บริการยืนยันตัวตนอื่นๆที่ Firebase มีให้ใช้งาน ฟรี
Realtime Database (บริการฐานข้อมูลแบบเรียลไทม์ โดยเก็บในรูปแบบ JSON )
- การเชื่อมต่อสูงสุด 100 (การเชื่อมต่อค้างเอาไว้ จะกินจำนวนข้อมูลที่ดาวน์โหลดไปเรื่อยๆ เพราะต้องคอยเช็คสถานะตลอดเวลา)
- พื้นที่เก็บข้อมูล 1GB
- ข้อมูลที่อ่านหรือดาวน์โหลด 10 GB/เดือน
- ตัวฟรี จะสร้างได้แค่ฐานข้อมูลเดียว
Cloud Messaging (ส่งการแจ้งเตื่อนไปยังอุปกรณ์ต่างๆ)
- ฟรี
ดูข้อมูลเพิ่มได้ที่ https://firebase.google.com/pricing
เรียกได้ว่า ที่ Firebase เขาให้มา เราก็สามารถสร้างเว็บเล็กๆของเราได้สักเว็บนึงแล้ว 55555
คำสั่งพื้นฐาน
เริ่มต้น
โคลนโปรเจคและทำการติดตั้ง
git clone https://github.com/saprayworld/sapray-firebase-web.git my-project
cd my-project
yarn install && cd functions && yarn install && cd ..
ตั้งค่า App ID ในไฟล์ .firebaserc ให้เป็นของตัวเองด้วยนะ
// .firebaserc
{
"projects": {
"default": "ใส่ APP ID ที่นี่"
}
}
ทำการสร้างไฟล์ .env ไว้ในส่วน บนสุด หรือ root (/.env) ของโปรเจค แล้วทำการใส่การตั้งค่า Firebase ลงไป
ปล. ที่ก่อนหน้านี้ ผมเล่นใส่คีย์ API ในซอร์สโค้ดแล้วอัพขึ้น Github เลย ทางระบบ Google เขาเลยส่งอีเมลล์มาบอกว่า คุณเมิงอัพโหลดคีย์เป็นสาธารณะนะ ผมเลยต้องไปรีเซ็ตคีย์ แล้วก็ทำเป็นคอนฟิกไฟล์แบบนี้แทน ซึ่งมันควรทำตั้งนานแล้วโว้ยยย
FIREBASE_API_KEY=ใส่ apiKey
FIREBASE_AUTH_DOMAIN=ใส่ authDomain
FIREBASE_DATABASE_URL=ใส่ databaseURL
FIREBASE_PROJECT_ID=ใส่ projectId
FIREBASE_STORAGE_BUCKET=ใส่ storageBucket
FIREBASE_MESSAGING_SENDER_ID=ใส่ messagingSenderId
FIREBASE_APP_ID=ใส่ appId
ต้องใส่นะ ถ้าไม่ใส่ แดงเถือกมาเลยนะจร้ 55555 ถ้าใครไม่รู้วิธีการสร้างโปรเจค Firebase เดี๋ยวจะหาเวลามาทำคู่มือให้นะงับ
ลองรันคำสั่งเพื่อทดสอบ
yarn run dev
Build เว็บแอพ
yarn run build
ทำการจัดไฟล์ต่างๆเพื่อส่งขึ้น Firebase
yarn run fileinit
ส่งขึ้น Firebase (Deploy)
yarn run fbdeploy