Angular Universal'ı entegre etme

Firebase çerçevesine duyarlı CLI ile Angular uygulamanızı Firebase'e dağıtabilir ve kullanıcılarınıza dinamik içerik sunabilirsiniz.

Başlamadan önce

Uygulamanızı Firebase'e dağıtmaya başlamadan önce aşağıdaki gereksinimleri ve seçenekleri inceleyin:

• Firebase CLI 12.1.0 veya sonraki sürümler. Tercih ettiğiniz yöntemi kullanarak KSA'yı yüklediğinizden emin olun.

• İsteğe bağlı: Firebase projenizde faturalandırma etkin (SSR kullanmayı planlıyorsanız gereklidir)

• İsteğe bağlı: AngularFire

Firebase'i başlatma

Başlamak için çerçeve projenizde Firebase'i başlatın. Yeni bir proje için Firebase CLI'ı kullanın veya mevcut bir proje için firebase.json ayarını değiştirin.

Yeni bir projeyi başlatma

1. Firebase CLI'da web çerçeveleri önizlemesini etkinleştirin:

   firebase experiments:enable webframeworks

2. KSA'dan başlatma komutunu çalıştırın, ardından istemleri uygulayın:

   firebase init hosting

3. "Web çerçevesi kullanmak ister misiniz? (deneysel)"

4. Barındırma kaynak dizininizi seçin. Bu, mevcut bir Angular uygulaması olabilir.

5. İstenirse Angular'ı seçin.

Mevcut projeyi başlatma

firebase.json ürünündeki barındırma yapılandırmanızı public seçeneği yerine source seçeneğine sahip olacak şekilde değiştirin. Örnek:

{
  "hosting": {
    "source": "./path-to-your-angular-workspace"
  }
}

Statik içerik yayınlama

Firebase'i başlattıktan sonra standart dağıtım komutuyla statik içerik sunabilirsiniz:

firebase deploy

Dinamik içeriği önceden oluşturma

Angular'da dinamik içeriği önceden oluşturmak için Angular Universal'ı kurmanız gerekir. Firebase CLI, Express Engine'i bekler:

ng add @nguniversal/express-engine

Daha fazla bilgi için Açısal Evrensel kılavuzu'na bakın.

Önceden işleme URL'leri ekleme

Varsayılan olarak yalnızca kök dizin önceden işlenir. angular.json ürününde önceden işleme adımını bularak ve daha fazla rota ekleyerek ek rotalar ekleyebilirsiniz:

{
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
    },
    "configurations": {
      /* ... */
    },
    "defaultConfiguration": "production"
  }
}

Daha fazla özelleştirme yapmanız gerekirse Firebase, barındırma kökünde guessRoutes veya routes.txt dosyasına da uyar. Bu seçenekler hakkında daha fazla bilgi için Angular'ın önceden işleme kılavuzuna bakın.

İsteğe bağlı: bir sunucu modülü ekleyin

Dağıtma

firebase deploy ile dağıtım yaptığınızda Firebase, tarayıcı paketinizi ve sunucu paketinizi oluşturur ve uygulamayı önceden oluşturur. Bu öğeler, Hosting ve Cloud Functions for Firebase'e dağıtılır.

Özel dağıtım

Firebase CLI, bir üretim yapılandırmasıyla şemalarınızda sunucu, derleme ve önceden işleme adımlarının bulunduğunu varsayar.

KSA'nın varsayımlarını özelleştirmek istiyorsanız ng deploy öğesini yapılandırın ve angular.json bölümünde yapılandırmayı düzenleyin. Örneğin, serverTarget öğesini kaldırarak SSR'yi devre dışı bırakabilir ve yalnızca önceden oluşturulmuş içeriği sunabilirsiniz:

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "browserTarget": "app:build:production",
      "serverTarget": "app:server:production",
      "prerenderTarget": "app:prerender:production"
    }
  }
}

İsteğe bağlı: Firebase JS SDK ile entegrasyon

Firebase JS SDK yöntemlerini hem sunucu hem de istemci paketlerine eklerken, ürünü kullanmadan önce isSupported() öğesini kontrol ederek çalışma zamanı hatalarından korunun. Tüm ürünler tüm ortamlarda desteklenmez.

İsteğe bağlı: Firebase Admin SDK ile entegrasyon

Yönetici paketleri, tarayıcı derlemenize dahil edilirse başarısız olacaktır. Bu nedenle, bunları sunucu modülünüzde sağlamayı ve isteğe bağlı bir bağımlılık olarak eklemeyi düşünün:

// 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 ile tamamen dinamik içerik sunma

İsteğe bağlı: Firebase Authentication ile entegrasyon

Web çerçevesine duyarlı Firebase dağıtım aracı, çerezleri kullanarak istemci ve sunucu durumunu otomatik olarak senkronize eder. Express res.locals nesnesi isteğe bağlı olarak, kimliği doğrulanmış bir Firebase Uygulama örneğini (firebaseApp) ve şu anda oturum açmış olan kullanıcıyı (currentUser) içerir. Bu örnek, REQUEST jetonu aracılığıyla modülünize eklenebilir (@nguniversal/express-engine/tokens'dan dışa aktarılabilir).