listVue Firebase Masterclass
ลง Firebase
สารบัญ
ลง Firebase ลง Project กัน
สร้าง project Firebase
- เข้า https://firebase.google.com/ login ด้วย google จากนั้นให้กดสร้าง project ขึ้นมา
- สร้าง project ขึ้นมา 1 อันสำหรับ project นี้ โดยตั้งชื่อ project ที่ต้องการได้เลย (ถ้าชื่อ project ซ้ำ id มันจะเพิ่มตัวต่อท้ายเข้ามาเพื่อกันซ้ำไว้ให้อยู่แล้ว)
- เมื่อสร้าง project เรียบร้อยจะได้หน้าตาประมาณนี้ออกมา
- จากนั้นเข้าไปที่ Cloud Firestore กด "Create Database"
เลือกเป็น "Test mode" (ตรงนี้เป็นการ setting Firestore rule สำหรับการ dev ไว้ก่อน ซึ่งสามารถแก้ไข mode ได้จากการแก้ไข Firestore rule)
เลือก zone เป็น "asia-southeast1 (Singapore)" (ใกล้สุดในย่านนี้แล้ว)
- เมื่อสร้างเรียบร้อยจะได้หน้าตาประมาณนี้ออกมา = ถือว่าทุกอย่างเสร็จสิ้นเรียบร้อย
Setup Firebase ลง Project
ลงด้วย Firebase CLI https://firebase.google.com/docs/cli#install_the_firebase_cli
bash
npm install -g firebase-cli
firebase initจากนั้นทำการเลือก project ที่ได้ทำการลงไว้ โดยเลือกหัวข้อตามนี้ เราจะลง service ไว้ก่อนทั้งหมด 6 ตัวคือ
- Authentication = สำหรับทำ Login
- Realtime Database = Database สำหรับทำส่วนที่เกี่ยวข้องกับ realtime
- Cloud Firestore = Database
- Cloud Storage = Cloud สำหรับเก็บ asset
- Functions = ส่วนของ Backend (ในที่นี้เราจะใช้ nodejs backend ของ cloud function)
- Emulator = เครื่องมือที่ทำให้เราพัฒนา Firebase บน local ได้
หลังจากนั้นก็รอ setup ตามขั้นตอนไป (ให้ตอบ Yes ไปเรื่อยๆได้เลย) จะเจอกับหมวดของ Emulator ให้เลือกตาม Service ด้านบนเช่นกัน
เมื่อลงทุกอย่างเรียบร้อยก็จะขึ้นมาว่า Firebase setup แล้ว
จากนั้นจะได้ firebase.json ออกมา หน้าตาประมาณนี้ออกมาได้
json
{
"functions": [
{
"source": "functions",
"codebase": "default",
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log"
]
}
],
"database": {
"rules": "database.rules.json"
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"storage": {
"rules": "storage.rules"
},
"emulators": {
"auth": {
"port": 9099
},
"functions": {
"port": 5010
},
"firestore": {
"port": 8080
},
"database": {
"port": 9000
},
"storage": {
"port": 9199
},
"ui": {
"enabled": true
}
}
}ถือว่าเป็นอันเสร็จสิ้นการลง Firebase เรียบร้อย