สร้างเว็บด้วย 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