Entegre Açısal Evrensel,Entegre Açısal Evrensel,Entegre Açısal Evrensel

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

Sen başlamadan önce

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

Firebase CLI sürüm 12.1.0 veya üzeri. Tercih ettiğiniz yöntemi kullanarak CLI'yi yüklediğinizden emin olun.
İsteğe bağlı: Firebase projenizde faturalandırma etkinleştirildi (SSR kullanmayı planlıyorsanız gereklidir)
İsteğe bağlı: AngularFire

Firebase'i başlat

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

Yeni bir proje başlatın

Firebase CLI'de web çerçeveleri önizlemesini etkinleştirin:
```
firebase experiments:enable webframeworks
```
CLI'den başlatma komutunu çalıştırın ve ardından istemleri izleyin:
```
firebase init hosting
```
"Bir web çerçevesi kullanmak istiyor musunuz? (deneysel)" sorusuna evet yanıtı verin.
Barındırma kaynağı dizininizi seçin; bu mevcut bir Angular uygulaması olabilir.
İstenirse Angular'ı seçin.

Mevcut bir projeyi başlat

firebase.json barındırma yapılandırmanızı, public bir seçenek yerine bir 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'i ayarlamanız gerekir. Firebase CLI, Express Engine'den şunları bekliyor:

ng add @nguniversal/express-engine

Daha fazla bilgi için Angular Universal kılavuzuna bakın.

Önceden oluşturma URL'leri ekleyin

Varsayılan olarak yalnızca kök dizin önceden oluşturulur. angular.json önceden oluşturma adımını bulup daha fazla rota ekleyerek ek rotalar ekleyebilirsiniz:

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

Firebase ayrıca, daha fazla özelleştirmeye ihtiyacınız varsa, barındırma kökündeki guessRoutes veya bir routes.txt dosyasına da saygı duyar. Bu seçenekler hakkında daha fazla bilgi için Angular'ın ön işleme kılavuzuna bakın.

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

Dağıtmak

firebase deploy dağıtımıyla dağıtım yaptığınızda Firebase, tarayıcı paketinizi, sunucu paketinizi oluşturur ve uygulamayı önceden oluşturur. Bu öğeler Firebase için Barındırma ve Bulut İşlevlerine dağıtılır.

Özel dağıtım

Firebase CLI, şemalarınızda üretim yapılandırmasına sahip sunucu, derleme ve önceden oluşturma adımlarına sahip olduğunuzu varsayar.

CLI'nin varsayımlarını uyarlamak istiyorsanız, ng deploy yapılandırın ve yapılandırmayı angular.json dosyasında düzenleyin. Örneğin, SSR'yi devre dışı bırakabilir ve önceden oluşturulmuş içeriği yalnızca serverTarget kaldırarak 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'sıyla entegrasyon

Firebase JS SDK yöntemlerini hem sunucu hem de istemci paketlerine dahil ederken, ürünü kullanmadan önce isSupported() kontrol ederek çalışma zamanı hatalarına karşı koruma sağlayın. Tüm ürünler her ortamda desteklenmez .

İsteğe bağlı: Firebase Yönetici SDK'sıyla entegrasyon

Yönetici paketleri tarayıcı yapınıza 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 sunun

İsteğe bağlı: Firebase Authentication ile entegre edin

Web çerçevesine duyarlı Firebase dağıtım aracı, çerezleri kullanarak istemci ve sunucu durumunu otomatik olarak senkronize halde tutar. Express res.locals nesnesi isteğe bağlı olarak kimliği doğrulanmış bir Firebase Uygulaması örneğini ( firebaseApp ) ve şu anda oturum açmış olan kullanıcıyı ( currentUser ) içerecektir. Bu, REQUEST belirteci aracılığıyla modülünüze enjekte edilebilir (@nguniversal/express-engine/tokens adresinden dışa aktarılır).