คุณสามารถใช้ 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 ที่ตระหนักถึงเฟรมเวิร์กบนเว็บช่วยให้สถานะไคลเอ็นต์และเซิร์ฟเวอร์ซิงค์กันโดยอัตโนมัติโดยใช้คุกกี้ ออบเจ็กต์ Express res.locals
จะมีอินสแตนซ์ของแอป Firebase ที่ผ่านการตรวจสอบสิทธิ์ (firebaseApp
) และผู้ใช้ที่ลงชื่อเข้าใช้ในปัจจุบัน (currentUser
) หรือไม่ก็ได้ ซึ่งจะแทรกเข้าไปในโมดูลของคุณผ่านโทเค็น REQUEST (ส่งออกจาก @nguniversal/express-engine/tokens)