ผสานรวม 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 Admin SDK หรือ Firebase JavaScript ด้วยค่าการกำหนดค่าเริ่มต้น ให้ใช้ 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 ซึ่งตั้งค่าโดยอัตโนมัติ ในสภาพแวดล้อมของบิลด์ 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 หรือเว็บแอป ให้เรียกใช้คำสั่งนี้อีกครั้ง นอกจากนี้ คุณอาจต้องล้างแคชระดับกลาง (เช่น .next/cache) ด้วย

ใช้ FirebaseServerApp สำหรับ SSR

หากเคยใช้ Firebase JS SDK หรือ Firebase Client SDK อื่นๆ ในการพัฒนาเว็บแอป คุณอาจคุ้นเคยกับ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 จากการละเมิดได้