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

Firebase App Hosting เหมาะอย่างยิ่งสําหรับเว็บแอปแบบไดนามิกที่สร้างด้วย Firebase JavaScript SDK และ Firebase Admin SDK สําหรับ Node.js ในเว็บแอปที่มีฟีเจอร์ครบถ้วน SDK อย่าง Firebase 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 ป้อนข้อมูลการกำหนดค่าเว็บแอปให้คุณโดยอัตโนมัติ ในขณะที่ยังคงมีตัวเลือกในการควบคุมค่าที่เฉพาะเจาะจงอย่างละเอียด หากต้องการลบล้างค่าเริ่มต้น

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

หากต้องการเริ่มต้น SDK Firebase JavaScript หรือ 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 สำหรับ JavaScript SDK กลยุทธ์นี้ใช้ได้กับ 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 แทรกสำหรับการเริ่มต้น SDK ของ JavaScript คุณสามารถระบุค่าใน 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 สคริปต์ postinstall จะค้นหา ตัวแปรสภาพแวดล้อม FIREBASE_WEBAPP_CONFIG ซึ่งตั้งค่าโดยอัตโนมัติ ในสภาพแวดล้อม App Hosting Cloud Build

หากติดตั้ง JS SDK นอก Cloud Build คุณจะต้องตั้งค่าตัวแปรสภาพแวดล้อมนี้ด้วยตนเองเมื่อติดตั้ง 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 จากการละเมิดได้