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