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 koşulları ve seçenekleri inceleyin:

• Firebase 12.1.0 veya daha yeni bir KSA sürümü. 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 Firebase'i çerçeve projeniz için ilk olarak hazırlayın. Yeni bir proje için Firebase CLI'yi kullanın veya mevcut bir proje için firebase.json dosyasını değiştirin.

Yeni projeyi başlatma

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

   firebase experiments:enable webframeworks

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

   firebase init hosting

3. "Web çerçevesi kullanmak istiyor musunuz?" sorusuna evet yanıtını verin. (deneysel)"

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

5. İstenirse Angular'ı seçin.

Mevcut bir projeyi başlatma

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

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

Statik içerik sunma

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'ı ayarlamanı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 oluşturma URL'leri ekleme

Varsayılan olarak yalnızca kök dizin önceden işlenir. angular.json dosyasında ön oluşturma adımını bulup daha fazla rota ekleyerek başka 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 ön oluşturma kılavuzuna bakın.

İsteğe bağlı: Sunucu modülü ekleyin

Dağıt

firebase deploy ile dağıttığı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 KSA, şematiklerinizde üretim yapılandırması içeren sunucu, derleme ve ön oluşturma adımlarınızın olduğunu varsayar.

CLI'nin varsayımlarını özelleştirmek istiyorsanız ng deploy'ü yapılandırın ve angular.json'te yapılandırmayı düzenleyin. Örneğin, serverTarget öğesini kaldırarak SSR'yi devre dışı bırakabilir ve yalnızca önceden oluşturulmuş içerik yayınlayabilirsiniz:

{
  "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'sı ile entegrasyon yapın

Firebase JS SDK yöntemlerini hem sunucu hem de istemci paketlerine dahil ederken ürünü kullanmadan önce isSupported() değerini kontrol ederek çalışma zamanında oluşabilecek hatalara karşı önlem alın. Bazı ürünler tüm ortamlarda desteklenmez.

İsteğe bağlı: Firebase Admin SDK'sıyla entegrasyon

Yönetici paketleri, tarayıcı derlemenize dahil edilirse başarısız olur. 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çevesi uyumlu Firebase dağıtım araçları, ç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ği (firebaseApp) ve şu anda oturum açmış kullanıcıyı (currentUser) içerir. Bu, REQUEST jetonu (@nguniversal/express-engine/tokens'den aktarılır) aracılığıyla modülünüze enjekte edilebilir.