CLI ที่รับรู้เฟรมเวิร์กของ Firebase ช่วยให้คุณทำให้แอปพลิเคชัน Angular ใช้งานได้กับ Firebase และแสดงเนื้อหาแบบไดนามิกแก่ผู้ใช้ได้
ก่อนเริ่มต้น
ก่อนที่จะเริ่มทำให้แอปใช้งานได้กับ Firebase โปรดอ่านข้อกำหนดและตัวเลือกต่อไปนี้
- Firebase CLI เวอร์ชัน 12.1.0 ขึ้นไป ตรวจสอบว่าได้ติดตั้ง CLI โดยใช้วิธีการที่ต้องการ
ไม่บังคับ: เปิดใช้การเรียกเก็บเงินในโปรเจ็กต์ Firebase แล้ว (ต้องระบุหากคุณวางแผนที่จะใช้ SSR)
ไม่บังคับ: AngularFire
เริ่มต้น Firebase
หากต้องการเริ่มต้นใช้งาน ให้เริ่มต้น Firebase สำหรับโปรเจ็กต์เฟรมเวิร์ก
ใช้ Firebase CLI สำหรับโปรเจ็กต์ใหม่ หรือแก้ไข firebase.json
สำหรับโปรเจ็กต์ที่มีอยู่
เริ่มต้นโปรเจ็กต์ใหม่
- ใน Firebase CLI ให้เปิดใช้การแสดงตัวอย่างเว็บเฟรมเวิร์ก:
firebase experiments:enable webframeworks
เรียกใช้คำสั่งการเริ่มต้นจาก CLI จากนั้นทำตามข้อความแจ้ง
firebase init hosting
ตอบคำถามว่า "คุณต้องการใช้เว็บเฟรมเวิร์กไหม (ทดลอง)"
เลือกไดเรกทอรีแหล่งที่มาของโฮสติ้ง ซึ่งอาจเป็นแอป Angular ที่มีอยู่
หากได้รับข้อความแจ้ง ให้เลือก Angular
เริ่มต้นโปรเจ็กต์ที่มีอยู่
เปลี่ยนการกำหนดค่าโฮสติ้งใน firebase.json
เพื่อให้มีตัวเลือก source
แทนตัวเลือก public
เช่น
{
"hosting": {
"source": "./path-to-your-angular-workspace"
}
}
แสดงเนื้อหาแบบคงที่
หลังจากเริ่มต้น Firebase คุณสามารถแสดงเนื้อหาแบบคงที่ด้วยคำสั่งการทำให้ใช้งานได้มาตรฐาน
firebase deploy
เนื้อหาแบบไดนามิกที่แสดงผลล่วงหน้า
หากต้องการแสดงผลเนื้อหาแบบไดนามิกล่วงหน้าใน Angular คุณต้องตั้งค่า Angular Universal Firebase CLI ต้องการ Express Engine:
ng add @nguniversal/express-engine
ดูข้อมูลเพิ่มเติมในคู่มือ Angular Universal
เพิ่ม URL ที่แสดงผลล่วงหน้า
โดยค่าเริ่มต้น ระบบจะแสดงเฉพาะไดเรกทอรีรูทล่วงหน้า คุณเพิ่มเส้นทางอื่นๆ ได้โดยดูขั้นตอนการแสดงผลล่วงหน้าใน angular.json
และเพิ่มเส้นทางอื่นๆ ดังนี้
{
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
},
"configurations": {
/* ... */
},
"defaultConfiguration": "production"
}
}
Firebase ยังดำเนินการตามไฟล์ guessRoutes
หรือ routes.txt
ในรูทของโฮสติ้งด้วย หากคุณจำเป็นต้องปรับแต่งเพิ่มเติม ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกเหล่านั้นได้ในคำแนะนำในการแสดงผลล่วงหน้าของ Angular
ไม่บังคับ: เพิ่มโมดูลเซิร์ฟเวอร์
ทำให้ใช้งานได้
เมื่อคุณทำให้ใช้งานได้ด้วย firebase deploy
แล้ว Firebase จะสร้างแพ็กเกจเบราว์เซอร์ แพ็กเกจเซิร์ฟเวอร์ และการแสดงผลล่วงหน้าสำหรับแอปพลิเคชัน ซึ่งองค์ประกอบเหล่านี้จะใช้งานได้กับโฮสติ้งและ Cloud Functions for Firebase
การทำให้ใช้งานได้ที่กำหนดเอง
Firebase CLI จะถือว่าคุณมีขั้นตอนของเซิร์ฟเวอร์ บิลด์ และการแสดงผลล่วงหน้าในสคีมาที่มีการกำหนดค่าเวอร์ชันที่ใช้งานจริง
หากต้องการปรับแต่งสมมติฐานของ CLI ให้กำหนดค่า ng deploy
และแก้ไขการกำหนดค่าใน angular.json
ตัวอย่างเช่น คุณอาจปิดใช้ SSR และแสดงเนื้อหาที่แสดงผลล่วงหน้าโดยเฉพาะได้โดยนำ serverTarget
ออก ดังนี้
{
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"browserTarget": "app:build:production",
"serverTarget": "app:server:production",
"prerenderTarget": "app:prerender:production"
}
}
}
ไม่บังคับ: ผสานรวมกับ Firebase JS SDK
เมื่อรวมเมธอด Firebase JS SDK ไว้ในทั้งเซิร์ฟเวอร์และแพ็กเกจไคลเอ็นต์ ให้ป้องกันข้อผิดพลาดด้านรันไทม์โดยการตรวจสอบ isSupported()
ก่อนใช้ผลิตภัณฑ์
ผลิตภัณฑ์บางรายการอาจไม่รองรับในบางสภาพแวดล้อม
ไม่บังคับ: ผสานรวมกับ Firebase Admin SDK
แพ็กเกจผู้ดูแลระบบจะล้มเหลวหากรวมอยู่ในเวอร์ชันของเบราว์เซอร์ ดังนั้นให้พิจารณาใส่แพ็กเกจเหล่านั้นในโมดูลเซิร์ฟเวอร์และแทรกเป็นทรัพยากร Dependency แบบไม่บังคับ
// your-component.ts
import type { app } from 'firebase-admin';
import { FIREBASE_ADMIN } from '../app.module';
@Component({...})
export class YourComponent {
constructor(@Optional() @Inject(FIREBASE_ADMIN) admin: app.App) {
...
}
}
// app.server.module.ts
import * as admin from 'firebase-admin';
import { FIREBASE_ADMIN } from './app.module';
@NgModule({
…
providers: [
…
{ provide: FIREBASE_ADMIN, useFactory: () => admin.apps[0] || admin.initializeApp() }
],
})
export class AppServerModule {}
// app.module.ts
import type { app } from 'firebase-admin';
export const FIREBASE_ADMIN = new InjectionToken<app.App>('firebase-admin');
แสดงเนื้อหาแบบไดนามิกเต็มรูปแบบด้วย SSR
ไม่บังคับ: ผสานรวมกับการตรวจสอบสิทธิ์ Firebase
เครื่องมือการติดตั้งใช้งาน Firebase ที่คำนึงถึงเฟรมเวิร์กเว็บจะซิงค์สถานะไคลเอ็นต์และเซิร์ฟเวอร์ให้ตรงกันโดยอัตโนมัติโดยใช้คุกกี้ ออบเจ็กต์ res.locals
ของ Express จะมีอินสแตนซ์ของแอป Firebase ที่ผ่านการตรวจสอบสิทธิ์แล้ว (firebaseApp
) และผู้ใช้ที่ลงชื่อเข้าใช้ในปัจจุบัน (currentUser
) ข้อมูลนี้สามารถแทรกลงในโมดูลของคุณผ่านโทเค็น REQUEST (ส่งออกจาก @nguniversal/express-engine/tokens)