ผสานรวม Firebase SDK กับเว็บแอป

Firebase App Hosting เหมาะอย่างยิ่งสําหรับเว็บแอปแบบไดนามิกที่สร้างด้วย Firebase JavaScript SDK และ Firebase Admin SDK สําหรับ Node.js ในเว็บแอปที่มีคุณสมบัติครบถ้วน Firebase SDK เช่น Authentication, Cloud Firestore และ App Check จะมีบทบาทสําคัญ คู่มือนี้จะอธิบายกลยุทธ์หลักๆ เพื่อช่วยเพิ่มประสิทธิภาพ Firebase SDK และเริ่มต้นสร้าง Firebase ลงในเว็บแอปของคุณใน Firebase App Hosting

เริ่มต้น Firebase Admin SDK และ SDK ของเว็บโดยอัตโนมัติ

สภาพแวดล้อมของ Google เช่น Firebase App Hosting ช่วยให้เริ่มต้นแอปได้ง่ายขึ้นผ่านการเรียกคอนสตรัคเตอร์แบบไม่มีอาร์กิวเมนต์ ณ เวลาสร้างและรันไทม์ ฟีเจอร์นี้เป็นฟีเจอร์ของทั้ง Firebase Admin SDK สำหรับ Node.js ซึ่งเป็น SDK ฝั่งเซิร์ฟเวอร์ที่ปลดล็อกฟังก์ชันการทำงานของ Firebase จำนวนมากและมีประโยชน์อย่างมากในเว็บแอป และ Firebase JavaScript SDK

เมื่อใช้ initializeApp() คุณสามารถอนุญาตให้ Firebase App Hosting ป้อนข้อมูลการกำหนดค่าเว็บแอปให้คุณโดยอัตโนมัติไปพร้อมกับตัวเลือกการควบคุมค่าที่เฉพาะเจาะจงอย่างละเอียดได้หากต้องการลบล้างค่าเริ่มต้น

เริ่มต้นโดยไม่มีอาร์กิวเมนต์

หากต้องการเริ่มต้น Firebase JavaScript SDK หรือ Firebase Admin SDK ด้วยค่าการกำหนดค่าเริ่มต้น ให้ใช้ initializeApp() โดยไม่ต้องระบุอาร์กิวเมนต์ใดๆ ดังนี้

Admin SDK

import { initializeApp } from 'firebase-admin/app';
const app = initializeApp();

JavaScript SDK

import { initializeApp } from 'firebase/app';
const app = initializeApp();

กลยุทธ์นี้สําหรับการเริ่มต้นAdmin SDKใช้ได้กับApp Hostingและสภาพแวดล้อมเซิร์ฟเวอร์อื่นๆ ของ Google รวมถึง Cloud Run, App Engine และ Cloud Functions สําหรับ SDK ของ JavaScript กลยุทธ์นี้จะทํางานใน App Hosting

ลบล้างค่าที่ระบบป้อนโดยอัตโนมัติ

คุณสามารถลบล้างการกำหนดค่าเริ่มต้นที่ระบบแทรกโดยอัตโนมัติได้ โปรดทราบว่าตัวเลือกเหล่านี้แตกต่างกันระหว่าง Admin SDK กับ JavaScript SDK

Admin SDK การลบล้าง

หากต้องการระบุตัวเลือกการเริ่มต้นที่กำหนดเองสำหรับบริการ เช่น Realtime Database, Cloud Storage หรือ Cloud Functions (ไม่บังคับ) ให้ใช้FIREBASE_CONFIGตัวแปรสภาพแวดล้อม หากเนื้อหาของตัวแปร FIREBASE_CONFIG ขึ้นต้นด้วยอักขระ { ระบบจะแยกวิเคราะห์เป็นออบเจ็กต์ JSON ไม่เช่นนั้น SDK จะถือว่าสตริงนั้นเป็นเส้นทางของไฟล์ JSON ที่มีตัวเลือก

# apphosting.yaml

env:
  - variable: FIREBASE_CONFIG
    value: '{"credential: applicationDefault()","databaseURL":"https://project-id-default-rtdb.firebaseio.com"}'

การลบล้าง JavaScript SDK

หากต้องการลบล้างค่า FIREBASE_WEBAPP_CONFIG เริ่มต้นที่ App Hosting แทรกสําหรับการเริ่มต้นใช้งาน JavaScript SDK ให้ระบุค่าใน apphosting.yaml

# apphosting.yaml

env:
  - variable: FIREBASE_WEBAPP_CONFIG
    value: '{"apiKey":"myApiKey","appId":"app:123","authDomain":"project-id.firebaseapp.com","databaseURL":"https://project-id-default-rtdb.firebaseio.com","messagingSenderId":"0123456789","projectId":"project-id","storageBucket":"project-id.firebasestorage.app"}'

การใช้การเริ่มต้นอัตโนมัติในสภาพแวดล้อมอื่นๆ

การตั้งค่าการเริ่มต้นอัตโนมัติจะตั้งค่าด้วยสคริปต์ npm postinstall เมื่อคุณติดตั้ง Firebase JavaScript SDK สคริปต์หลังการติดตั้งจะค้นหาตัวแปรสภาพแวดล้อม FIREBASE_WEBAPP_CONFIG ซึ่งตั้งค่าโดยอัตโนมัติในสภาพแวดล้อม App Hosting Cloud Build

หากติดตั้ง JS SDK นอก Cloud Build เช่น ติดตั้งในเครื่องเพื่อใช้กับชุดโปรแกรมจำลอง Firebase คุณจะต้องตั้งค่าตัวแปรสภาพแวดล้อมนี้ด้วยตนเองเมื่อติดตั้ง Firebase JavaScript SDK

วิธีตั้งค่าสภาพแวดล้อมด้วยตนเองเมื่อติดตั้ง

  1. คัดลอกออบเจ็กต์การกําหนดค่าเว็บแอป Firebase จากคอนโซล Firebase

  2. จากเทอร์มินัล ให้ตั้งค่าตัวแปรสภาพแวดล้อม FIREBASE_WEBAPP_CONFIG ก่อนเรียกใช้คำสั่ง npm install

FIREBASE_WEBAPP_CONFIG="{...}" npm install firebase

ทุกครั้งที่คุณเปลี่ยนโปรเจ็กต์ Firebase หรือเว็บแอป ให้เรียกใช้คําสั่งนี้อีกครั้ง

ใช้ FirebaseServerApp สำหรับ SSR

หากเคยทํางานกับ Firebase JS SDK หรือ SDK ไคลเอ็นต์ Firebase อื่นๆ ในการพัฒนาเว็บแอป คุณอาจคุ้นเคยกับFirebaseAppหน้าเว็บและวิธีใช้เพื่อกําหนดค่าอินสแตนซ์แอป Firebase มี FirebaseServerApp เพื่อช่วยอำนวยความสะดวกในการดำเนินการที่คล้ายกันฝั่งเซิร์ฟเวอร์

FirebaseServerApp เป็นรูปแบบหนึ่งของ FirebaseApp สำหรับใช้ในสภาพแวดล้อมการแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) รวมถึงเครื่องมือสำหรับดำเนินการเซสชัน Firebase ต่อซึ่งครอบคลุมการแสดงผลฝั่งไคลเอ็นต์ (CSR) / การแสดงผลฝั่งเซิร์ฟเวอร์

ใช้ FirebaseServerApp เพื่อดำเนินการต่อไปนี้

  • เรียกใช้โค้ดฝั่งเซิร์ฟเวอร์ภายในบริบทผู้ใช้ ซึ่งต่างจาก Firebase Admin SDK ที่มีสิทธิ์การดูแลระบบแบบเต็ม
  • เปิดใช้ App Check ในสภาพแวดล้อม SSR
  • ดำเนินการต่อในเซสชัน Firebase Auth ที่สร้างขึ้นบนไคลเอ็นต์

ดูรายละเอียดทั้งหมดเกี่ยวกับการใช้ FirebaseServerApp เพื่อวัตถุประสงค์เหล่านี้ได้ที่ใช้ Firebase ในเว็บแอปแบบไดนามิกด้วย SSR

เปิดใช้ App Check ในเว็บแอป

คุณสามารถใช้ App Check เพื่อเสริมความปลอดภัยของเว็บแอปแบบไดนามิกใน App Hosting การใช้กลยุทธ์ฝั่งเซิร์ฟเวอร์บางอย่างที่อธิบายไว้ในใช้ Firebase ในเว็บแอปแบบไดนามิกด้วย SSR จะช่วยปกป้องแบ็กเอนด์ App Hosting ของคุณจากการละเมิด