ผสานรวม Angular Universal

CLI ที่รองรับเฟรมเวิร์ก Firebase ช่วยให้คุณทำให้แอปพลิเคชัน Angular ใช้งานได้ใน Firebase และแสดงเนื้อหาแบบไดนามิกต่อผู้ใช้ได้

ก่อนเริ่มต้น

ก่อนเริ่มทำให้แอปใช้งานได้ใน Firebase ให้อ่านข้อกำหนดและตัวเลือกต่อไปนี้

  • Firebase CLI เวอร์ชัน 12.1.0 ขึ้นไป อย่าลืมติดตั้ง CLI โดยใช้วิธีที่ต้องการ

  • ไม่บังคับ: เปิดใช้การเรียกเก็บเงินในโปรเจ็กต์ Firebase (จําเป็นหากคุณวางแผนที่จะใช้ SSR)

  • ไม่บังคับ: AngularFire

เริ่มต้น Firebase

เริ่มต้นใช้งานโดยเริ่มต้น Firebase สําหรับโปรเจ็กต์เฟรมเวิร์ก ใช้ Firebase CLI สำหรับโปรเจ็กต์ใหม่ หรือแก้ไข firebase.json สำหรับโปรเจ็กต์ที่มีอยู่

เริ่มต้นโปรเจ็กต์ใหม่

  1. ใน Firebase CLI ให้เปิดใช้ตัวอย่างเฟรมเวิร์กเว็บโดยทำดังนี้ 
    firebase experiments:enable webframeworks

  2. เรียกใช้คำสั่งเริ่มต้นจาก CLI แล้วทำตามข้อความแจ้ง 

    firebase init hosting

  3. ตอบว่า "ใช่" เมื่อระบบถามว่า "คุณต้องการใช้เฟรมเวิร์กเว็บไหม (ทดลอง)"

  4. เลือกไดเรกทอรีแหล่งที่มาของโฮสติ้ง ซึ่งอาจเป็นแอป Angular ที่มีอยู่

  5. เลือก 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 จะสร้างกลุ่มของเบราว์เซอร์ กลุ่มของเซิร์ฟเวอร์ และแสดงผลแอปพลิเคชันล่วงหน้า องค์ประกอบเหล่านี้จะติดตั้งใช้งานใน Hosting และ 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

แพ็กเกจผู้ดูแลระบบจะใช้งานไม่ได้หากรวมอยู่ในบิลด์เบราว์เซอร์ ดังนั้นให้พิจารณาระบุไว้ในโมดูลเซิร์ฟเวอร์และแทรกเป็นข้อบังคับที่ไม่บังคับ

// 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) (ไม่บังคับ) ซึ่งสามารถแทรกลงในโมดูลผ่านโทเค็นคำขอ (ส่งออกจาก @nguniversal/express-engine/tokens)