ผสานรวม 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 Admin SDK หรือ Firebase JavaScript SDK ด้วยค่าการกำหนดค่าเริ่มต้น ให้ใช้ initializeApp() โดยไม่ต้องระบุอาร์กิวเมนต์ใดๆ

Admin SDK

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

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

JavaScript SDK

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

สำหรับ 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 แทรกสำหรับการเริ่มต้น 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"}'

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

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

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

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

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

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

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

เรียกใช้คำสั่งนี้อีกครั้งทุกครั้งที่เปลี่ยนแปลงโปรเจ็กต์ Firebase หรือเว็บแอป นอกจากนี้ คุณอาจต้องล้างแคชระดับกลาง (เช่น .next/cache)

ใช้ 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 แบ็กเอนด์จากการละเมิดได้