ผสานรวม Angular Universal

ด้วย CLI ที่รับรู้เฟรมเวิร์กของ Firebase คุณสามารถปรับใช้แอปพลิเคชันเชิงมุมของคุณกับ 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. เลือกไดเร็กทอรีต้นทางโฮสติ้งของคุณ นี่อาจเป็นแอปเชิงมุมที่มีอยู่

5. หากได้รับแจ้ง ให้เลือกเชิงมุม

เริ่มต้นโครงการที่มีอยู่

เปลี่ยนการกำหนดค่าโฮสติ้งของคุณใน 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)