Firebase App Hosting Emülatör ile web uygulamalarını yerel olarak test etme

Firebase Local Emulator Suite'in bir parçası olan App Hosting emülatörünü kullanarak uygulamanızın App Hosting dağıtımından önce yerel testlerini gerçekleştirebilirsiniz.

App Hosting emülatörünü kullanmadan önce Firebase'in genel Local Emulator Suite iş akışını anladığınızdan ve Local Emulator Suite'yi yükleyip yapılandırdığınızdan ve CLI komutlarını incelediğinizden emin olun.

Bu konuda, App Hosting hakkında bilgi sahibi olduğunuz varsayılmaktadır. Gerekirse App Hosting girişini ve diğer materyalleri inceleyerek App Hosting'ın nasıl çalıştığını anlayabilirsiniz.

App Hosting emülatörüyle neler yapabilirim?

App Hosting emülatörü, web uygulamalarınızı yerel olarak test etmenize ve iyileştirmenize olanak tanır. Bu, geliştirme sürecinizi kolaylaştırabilir ve Firebase kullanılarak oluşturulan ve App Hosting'e dağıtılan web uygulamalarının kalitesini artırabilir.

App Hosting emülatörü:

  1. apphosting.yaml yapılandırma dosyalarında tanımlanan ortam değişkenleri ve gizli dizilerle web uygulamanızı yerel olarak çalıştırmanıza olanak tanır.
  2. apphosting.emulator.yaml dosyasıyla emülatörde kullanılacak ortam değişkenlerini ve sırları geçersiz kılabilir.
  3. Diğer Firebase emülatörleriyle birlikte kullanılabilir. Firestore, Auth veya başka bir emülatör kullanıyorsanız Local Emulator Suite, bu emülatörlerin App Hosting emülatöründen önce başlatılmasını sağlar.

Emülatörü yapılandırma

Başlamak için Local Emulator Suite'ı Yerel Emulator Suite'i yükleme, yapılandırma ve entegre etme bölümünde açıklandığı şekilde yükleyip başlatın. Ayarlamak istediğiniz diğer Firebase emülatörlerinin yanı sıra App Hosting Emulator seçeneğini de belirleyin. CLI, aşağıdakiler de dahil olmak üzere bazı App Hosting emülatör değerleri ister:

  • Uygulamanızın projeye göre kök dizini. App Hosting ile monorepo'lar kullanıyorsanız bu önemlidir.
  • Yerel geliştirme için değerleri geçersiz kılmak isteyip istemediğiniz.
  • Ekip arkadaşlarınıza yerel geliştirme için sırlara erişim izni vermek isteyip istemediğiniz.
firebase init emulators
=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ App Hosting Emulator
 ◯ Firestore Emulator
 ◯ Database Emulator
 ◯ Hosting Emulator
 ◯ Pub/Sub Emulator
 ◯ Storage Emulator
 ◯ Eventarc Emulator
(Move up and down to reveal more choices)

? Specify your app's root directory relative to your project (./)

? The App Hosting emulator uses a file called apphosting.emulator.yaml to
override values in apphosting.yaml for local testing. This codebase does not
have one, would you like to create it? (Y/n)

? Which environment variables would you like to override? (Press <space> to
select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ MEMCACHE_ADDR
 ◯ API_KEY

? What new value would you like for plaintext MEMCACHE_ADDR?

? What would you like to name the secret reference for API_KEY? (test-api-key)

? What new value would you like for secret TESTKEY [input is hidden]? [input is hidden]

? Your config has secret values. Please provide a comma-separated list of users
or groups who should have access to secrets for local development:

✔  Successfully set IAM bindings on secret test-api-key.

Bu kurulum akışında sağladığınız tüm değerler, firebase.json içindeki App Hosting emülatör yapılandırmanızı güncellemek için kullanılır. Ayrıca, firebase.json dosyasını doğrudan güncelleyerek App Hosting emülatörünü de yapılandırabilirsiniz. App Hosting emülatörünün şeması şöyledir:

{
  ...
  "emulators": {
    "apphosting": {
      "startCommand": <command> [optional],
      "rootDirectory": <path> [optional]
    }
  }
}
  • startCommand, emülatör başlatıldığında otomatik olarak oluşturulur ve ayarlanır. Sağlanmazsa emülatör, paket yöneticinizin geliştirme komutunu algılar ve çalıştırır.
  • rootDirectory, tek depolu proje kurulumlarını desteklemek için kullanılır. Web uygulamanız bir alt dizindeyse bu dizinin köke göre yolunu (firebase.json konumunu) sağlamanız gerekir.

Emülasyonu yönetme

Emülatör başlatıldığında uygulamanızın kök dizininde bir apphosting.emulator.yaml dosyası oluşturulur. Bu yapılandırma dosyası, üretimde kullanılan apphosting.yaml dosyasıyla aynı şemaya sahiptir ancak kesinlikle yerel geliştirme için tasarlanmıştır. Emülatör, varsayılan olarak yapılandırmayı apphosting.yaml dosyanızdan okur ancak apphosting.emulator.yaml dosyası varsa bu dosyadaki yapılandırmalara öncelik verilir.

apphosting.emulator.yaml dosyası, işlenip iş arkadaşlarıyla güvenli bir şekilde paylaşılacak şekilde tasarlanmıştır. Hassas verilerin yanlışlıkla kaynak depolarına aktarılmasını önlemek için apphosting.yaml içindeki tüm gizli ortam değişkenleri apphosting.emulator.yaml içinde de gizli olmalıdır. Üretim ve yerel geliştirme arasında değişmesi gerekmeyen bir gizli değerin (ör. Gemini API anahtarı) apphosting.emulator.yaml'ya eklenmesi gerekmez. Bunun yerine ekibinize gizli değere erişim izni verin.

Uygulamanızda çok sayıda sır kullanılıyorsa (ör.üç farklı hizmet için API anahtarları, üretim, hazırlama ve yerel geliştirme için farklı değerlerle) Cloud Secret Manager'ın ücretsiz katmanını aşabilir ve ayda ek sır başına 0,06 ABD doları ödeyebilirsiniz. Bu ücreti ödememek için yerel yapılandırmayı kaynak kontrolü dışında yönetmeyi tercih ederseniz eski apphosting.local.yaml dosyasını kullanabilirsiniz. apphosting.emulator.yaml'dan farklı olarak bu dosyanın, apphosting.yaml'daki gizli değerler olan ortam değişkenleri için düz metin değerleri sağlamasına izin verilir.

Kullanıcılara veya gruplara sırlara erişim izni verme

apphosting.emulator.yaml içinde depolanan sırlar, emülatör başlatıldığında okunur. Bu, geliştirme ekibinizin gizli anahtara erişmesi gerektiği anlamına gelir. E-posta ile bir kullanıcıya veya gruba gizli erişimi vermek için apphosting:secrets:grantaccess komutunu kullanabilirsiniz.

firebase apphosting:secrets:grantaccess test-api-key --emails my-team@my-company.com

Geçerli olduğu durumlarda, apphosting.emulator.yaml üretim verilerine erişimi olmayan, küresel yan etkileri (e-posta gönderme, kredi kartlarından ödeme alma) olamayan veya daha düşük kotalara sahip olan yalnızca test anahtarlarını kullanmayı düşünün. Bu sayede, incelenmemiş kodun gerçek dünyada daha az sonuç doğurması sağlanır.

Gizli dizilere erişimi yönetmek için tek tek kullanıcılara erişim izni vermek yerine Google Gruplar'ı kullanmayı düşünebilirsiniz. Bu sayede, yeni üyeleri geliştirici ekibinize dahil etmek kolaylaşır. Çünkü bu üyeleri gruba eklediğinizde ihtiyaç duydukları tüm sırlara erişebilirler. Geliştiricilerin birbirleriyle iletişim kurduğu uygun bir grubunuz olabilir. Google Gruplar ile erişimi kontrol etmek, ekibinizden ayrılan geliştiricilerin e-posta grubundan kaldırıldıklarında tüm sırlara erişimini kaybetmesini de sağlar. Gizli, üretim verilerine veya gerçek dünyadaki yan etkilere erişebiliyorsa anahtarınızı döndürmeniz ve firebase apphosting:secrets:set ile yeni bir değer vermeniz yine de uygun olabilir.

Emülatörü çalıştırma

firebase emulators:start

Bu işlem, App Hosting emülatörü de dahil olmak üzere firebase.json dosyanızda tanımlanan tüm emülatörleri başlatır.

Angular uygulamaları için start komutunu yapılandırma

Emülatör start komutunun zaman aşımı gerçekleşirse Angular geliştirme sunucusu, uygulamanızı App Hosting emülatörünün beklediğinden farklı bir bağlantı noktasında sunuyor olabilir. firebase.json bölümüne bazı ek yapılandırmalar ekleyerek bu sorunu giderebilirsiniz:

  • emulators.apphosting.startCommand değerini ng serve olarak ayarlayın.
  • Varsayılan olmayan bir bağlantı noktası kullanmak için emulators.apphosting.port ile ayarlayın (--port işaretini emulators.apphosting.startCommand içindeki ng serve'ye eklemek yerine).

Örneğin:

"emulators": {
    "apphosting": {
      "port": 5002,
      "rootDirectory": "./test-app",
      "startCommand": "ng serve"
    },
    "ui": {
      "enabled": true
    },
    ...
  }