Web uygulamanızı yerel olarak test edin, değişiklikleri başkalarıyla paylaşın, ardından canlı olarak dağıtın

Canlı sitenize dağıtmadan önce değişikliklerinizi görüntüleyip test etmenizi öneririz. Firebase Hosting, değişiklikleri yerel olarak görüntüleyip test etmenize ve etkileşimde bulunmanıza olanak tanır arka uç proje kaynaklarını kullanın. Ekip arkadaşlarınızın yeni bir projede değişikliklerinizi test ederseniz Hosting, sitenizi ziyaret edin. Hatta Search Ads 360'taki pull'dan dağıtım yapmak için GitHub entegrasyonu isteği gönderin.

Başlamadan önce

Şu sayfada listelenen adımları tamamlayın: Hosting Başlarken sayfası, özellikle de şu görevlerden yararlanabilirsiniz:

  1. Firebase KSA'yı yükleyin veya en son sürümüne güncelleyin.
  2. Yerel proje dizinini (uygulamanızın içeriğini içeren) Firebase projenize bağlayın.

İsteğe bağlı olarak uygulamanızın Hosting içeriğini ve yapılandırmasını dağıtabilirsiniz, ancak bu sayfadaki adımlar için ön koşul değildir.

1. Adım: Yerel olarak test edin

Hızlı iterasyonlar yapıyorsanız veya uygulamanızın emülasyonlu sürümlerle etkileşimde bulunmasını istiyorsanız arka uç proje kaynaklarını kullanarak Hosting içeriğinizi ve yapılandırmanızı test edebilirsiniz yerel olarak. Firebase, yerel test yaparken web uygulamanızı yerel olarak barındırılan bir URL'yi tıklayın.

Hosting, Firebase Local Emulator Suite kapsamında yer alır. Bu, uygulamanızın emüle Hosting içeriğinizle etkileşimde bulunmasını sağlar ve yapılandırmanın yanı sıra isteğe bağlı olarak emüle edilen proje kaynaklarınızın (işlevler, veri tabanları ve kurallar).

  1. (İsteğe bağlı) Yerel olarak barındırılan uygulamanız varsayılan olarak real, emüle edilmemiş proje kaynakları (işlevler, veritabanı, kurallar vb.) Bunun yerine isterseniz emülasyonlu herhangi bir projeyi kullanmak için uygulamanızı bağlayabilirsiniz. kaynak olduğunu unutmayın. Daha fazla bilgi: Realtime Database | Cloud Firestore | Cloud Functions

  2. Yerel proje dizininizin kök dizininden aşağıdaki komutu çalıştırın:

    firebase emulators:start

  3. Web uygulamanızı KSA tarafından döndürülen yerel URL'de açın (genellikle http://localhost:5000) bilgileri gösterilir.

  4. Yerel URL'yi değişikliklerle güncellemek için tarayıcınızı yenileyin.

Diğer yerel cihazlardan test edin

Varsayılan olarak emülatörler yalnızca localhost isteklerine yanıt verir. Bu Diğer bir deyişle, barındırılan içeriğinize bilgisayarınızın web değil, ağınızdaki diğer cihazlardan değil. Denemek istiyorsanız diğer yerel cihazlar için firebase.json cihazınızı şu şekilde yapılandırın:

"emulators": {
    // ...

    "hosting": {
      "port": 5000,
      "host": "0.0.0.0"
    }
  }

2. Adım: Önizleyin ve paylaşın

Web uygulamanızdaki değişiklikleri yayınlamadan önce diğer kullanıcıların görüntülemesini istiyorsanız önizleme kanallarını kullanabilirsiniz.

Bir önizleme kanalına dağıttıktan sonra Firebase, web uygulamanızı paylaşılabilir ve geçici bir URL olan "önizleme URL'sinde" yayınlar. Önizleme URL'si kullanırken web uygulamanız tüm proje kaynakları için gerçek arka ucunuzla ( herhangi bir "sabitlenmiş" hariç yeniden yazımlarınızdaki fonksiyonları yapılandırma).

Önizleme URL'lerinin tahmin edilmesi zor olsa da (rastgele bir karma) herkese açıktır. Yani URL'yi bilen herkes ilgili URL'ye erişebilir.

  1. Yerel proje dizininizin kök dizininden aşağıdaki komutu çalıştırın:

    firebase hosting:channel:deploy CHANNEL_ID

    CHANNEL_ID değerini, boşluk içermeyen bir dizeyle değiştirin (örneğin, feature_mission-2-mars). Bu kimlik, önizleme kanalıyla ilişkili önizleme URL'si.

  2. KSA tarafından döndürülen önizleme URL'sinde web uygulamanızı açın. Şuna benzer bir görünüme sahiptir: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. Önizleme URL'nizi değişikliklerle güncellemek için aynı komutu tekrar çalıştırın. Marka komutta aynı CHANNEL_ID değerini belirttiğinizden emin olun.

Önizleme kanallarını yönetme hakkında daha fazla bilgi edinin. örneğin bir kanalın son geçerlilik tarihini nasıl ayarlayacağınızı öğrenin.

Firebase Hosting, bir pull isteğinde değişiklikleri kaydettiğinizde otomatik olarak bir önizleme URL'si oluşturup güncelleyen bir GitHub işlemini destekler. Nasıl yapıldığını öğrenin bu GitHub İşlemini kurup kullanın.

3. Adım: Canlı dağıtım yapın

Değişikliklerinizi dünyayla paylaşmaya hazır olduğunuzda Hosting öğenizi dağıtın ve yapılandırmanız yeterli olacaktır. Firebase, Google Analytics 4'te (aşağıdaki seçeneklere bakın).

1. seçenek: Önizleme kanalından canlı kanalınıza klonlama

Bu seçenek, önizleme kanalında test ettiğiniz tam içeriği ve yapılandırmayı canlı kanalınıza dağıttığınızdan emin olmanızı sağlar. Sürümleri kopyalama hakkında daha fazla bilgi edinin.

  1. Herhangi bir dizinde aşağıdaki komutu çalıştırın:

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    Her yer tutucuyu aşağıdakiyle değiştirin:

    • SOURCE_SITE_ID ve TARGET_SITE_ID: Bunlar kimliklerdir Hosting sitesinde kanallar bulunuyor.

      • Varsayılan Hosting siteniz için Firebase proje kimliğinizi kullanın.
      • Aynı Firebase projesinde, hatta aynı Firebase projesinde Firebase için Google Analytics'i kullanabilirsiniz.

    • SOURCE_CHANNEL_ID: Bu, kanalın şu tür bir tanımlayıcısıdır: , şu anda canlı kanalınıza dağıtmak istediğiniz sürümü sunuyor.

      • Canlı bir kanal için kanal kimliği olarak live kullanın.

  2. Değişikliklerinizi görüntüleyin (sonraki adım).

2. Seçenek: Yerel proje dizininizden canlı kanalınıza dağıtın

Bu seçenek, orijinal yapılandırmaya özgü yapılandırmaları ayarlama esnekliği sağlar veya önizleme kanalı kullanmamış olsanız bile dağıtabilirsiniz.

  1. Yerel proje dizininizin kök dizininden aşağıdaki komutu çalıştırın:

    firebase deploy --only hosting

  2. Değişikliklerinizi görüntüleyin (sonraki adım).

4. Adım: Değişikliklerinizi canlı sitenizde görüntüleyin

Yukarıdaki seçeneklerin her ikisi de Hosting içeriğinizi ve yapılandırmanızı şu siteler:

  • Varsayılan Hosting siteniz ve diğer Hosting siteleriniz için Firebase tarafından sağlanan alt alan adları:
    SITE_ID.web.app (PROJECT_ID.web.app gibi)
    SITE_ID.firebaseapp.com (PROJECT_ID.firebaseapp.com gibi)

  • Bağlandığınız tüm özel alanlar Hosting siten

Dağıtımı belirli bir Hosting sitesiyle kısıtlamak için: bir dağıtım hedefi belirtin yazın.

Diğer dağıtım etkinlikleri ve bilgileri

Dağıtım için yorum ekleyin

İsterseniz dağıtıma yorum ekleyebilirsiniz. Bu yorum, diğer dağıtım bilgilerini Hosting kontrol paneli Firebase konsolunda kontrol edebilirsiniz. Örneğin:

firebase deploy --only hosting -m "Deploying the best new feature ever."

Predeploy ve postdeploy komut dosyası tabanlı görevler ekleme

İsterseniz kabuk komut dosyalarını firebase deploy komutuna bağlayarak dağıtım öncesi veya sonrası görevlerini yerine getirme Örneğin, bir yayın sonrası kanca, yöneticileri yeni site içeriği dağıtımlarından haberdar edebilir. Daha fazla bilgi için Ayrıntılı bilgi için Firebase CLI dokümanlarına göz atın.

Dağıtılan içeriği önbelleğe alma

Statik içerik için istek yapıldığında otomatik olarak Firebase Hosting içeriği CDN'de önbelleğe alır. Sitenizin içeriğini yeniden dağıtırsanız Firebase, CDN genelinde önbelleğe alınmış tüm statik içeriğinizi otomatik olarak siler. Böylece yeni yeni içeriğinizi aldığına dikkat edin.

Dinamik içeriğin önbelleğe alınmasını yapılandırabileceğinizi unutmayın.

HTTPS üzerinden sunma

üzerinde barındırılmayan tüm harici kaynakların Firebase Hosting, harici komut dosyaları da dahil olmak üzere SSL (HTTPS) üzerinden yükleniyor. Çoğu tarayıcı, kullanıcıların "karma içerik" (SSL ve SSL olmayan trafik) yüklemesine izin vermez.

Dosyaları silme

Firebase Hosting ürününde, seçili dosyaları silmenin birincil yolu dosyaları yerel olarak silip yeniden dağıtmaktır.

Sonraki adımlar