ผสานรวม 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 CLI ใน Firebase ต้องใช้ 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)