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 etmeniz gerekir. Firebase Hosting, değişiklikleri yerel olarak görüntülemenize ve test etmenize, ayrıca taklit edilen arka uç proje kaynaklarıyla etkileşimde bulunmanıza olanak tanır. Ekip arkadaşlarınızın değişikliklerinizi görüntülemesini ve test etmesini istiyorsanız Hosting, siteniz için paylaşılabilir ve geçici önizleme URL'leri oluşturabilir. Pull isteğinden dağıtım yapmak için GitHub entegrasyonunu bile destekliyoruz.

Başlamadan önce

Hosting Başlayın sayfasında listelenen adımları, özellikle de aşağıdaki görevleri tamamlayın:

  1. Firebase KSA'yı yükleyin veya en yeni sürümüne güncelleyin.
  2. Yerel proje dizinini (uygulamanızın içeriğini içerir) 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, bu sayfadaki adımlar için ön koşul değildir.

1. adım: Yerel olarak test edin

Hızlı yinelemeler yapıyorsanız veya uygulamanızın, emüle edilmiş arka uç proje kaynaklarıyla etkileşim kurmasını istiyorsanız Hostingiçeriğinizi ve yapılandırmanızıHosting yerel olarak test edebilirsiniz. Yerel olarak test yaparken Firebase, web uygulamanızı yerel olarak barındırılan bir URL'de sunar.

Hosting, uygulamanızın Firebase Local Emulator Suite ile etkileşim kurmasını sağlayan emüle edilmiş Hosting içeriğinin ve yapılandırmasının yanı sıra isteğe bağlı olarak emüle edilmiş proje kaynaklarınızla (işlevler, veritabanları ve kurallar) etkileşim kurmasını sağlayan Firebase Local Emulator Suite'ın bir parçasıdır.

  1. (İsteğe bağlı) Yerel olarak barındırılan uygulamanız varsayılan olarak emüle edilen değil, gerçek proje kaynaklarıyla (işlevler, veritabanı, kurallar vb.) etkileşim kurar. Bunun yerine, isteğe bağlı olarak uygulamanızı bağlayarak yapılandırdığınız tüm emüle edilmiş proje kaynaklarını kullanabilirsiniz. Daha fazla bilgi: Realtime Database | Cloud Firestore | Cloud Functions

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

    firebase emulators:start

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

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

Diğer yerel cihazlardan test etme

Emülatörler varsayılan olarak yalnızca localhost adresinden gelen isteklere yanıt verir. Bu, barındırılan içeriğinize bilgisayarınızın web tarayıcısından erişebileceğiniz ancak ağınızdaki diğer cihazlardan erişemeyeceğiniz anlamına gelir. Diğer yerel cihazlardan test etmek isterseniz firebase.json cihazınızı aşağıdaki gibi yapılandırın:

"emulators": {
    // ...

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

2. adım: Önizleme ve paylaşma

Diğer kullanıcıların web uygulamanızdaki değişiklikleri yayınlanmadan önce görmesini istiyorsanız önizleme kanallarını kullanabilirsiniz.

Bir önizleme kanalına dağıtım yaptı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 etkileşime girer (yeniden yazma yapılandırmanızdaki "sabitlenmiş" işlevler hariç).

Önizleme URL'lerinin rastgele bir karma içerdiğinden tahmin edilmesinin zor olduğunu ancak bu URL'lerin herkese açık olduğunu unutmayın. Bu nedenle, URL'yi bilen herkes erişebilir.

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

    firebase hosting:channel:deploy CHANNEL_ID

    CHANNEL_ID yerine boşluk içermeyen bir dize girin (örneğin, feature_mission-2-mars). Bu kimlik, önizleme kanalıyla ilişkili önizleme URL'sini oluşturmak için kullanılır.

  2. Web uygulamanızı, CLI tarafından döndürülen önizleme URL'sinde açın. Şuna benzer bir görünüm elde edersiniz: 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. Komutta aynı CHANNEL_ID değerini belirttiğinizden emin olun.

Kanalın geçerlilik süresini ayarlama da dahil olmak üzere önizleme kanallarını yönetme hakkında bilgi edinin.

Firebase Hosting, pull isteğine değişiklik kaydettiğinizde otomatik olarak önizleme URL'si oluşturan ve güncelleyen bir GitHub Action'ı destekler. Bu GitHub Action'ı nasıl ayarlayacağınızı ve kullanacağınızı öğrenin.

3. adım: Canlı yayını dağıtın

Değişikliklerinizi herkesle paylaşmaya hazır olduğunuzda Hosting içeriğinizi ve yapılandırmanızı canlı kanalınızda dağıtın. Firebase, kullanım alanınıza bağlı olarak bu adım için birkaç farklı seçenek sunar (aşağıdaki seçeneklere bakın).

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

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

  1. Herhangi bir dizinden 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ğıdakilerle değiştirin:

    • SOURCE_SITE_ID ve TARGET_SITE_ID: Bunlar, kanalları içeren Hosting sitelerin kimlikleridir.

      • Varsayılan Hosting siteniz için Firebase proje kimliğinizi kullanın.
      • Aynı Firebase projesinde veya farklı Firebase projelerinde bulunan siteleri belirtebilirsiniz.

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

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

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

2. seçenek: Yerel proje dizininizden canlı kanalınıza dağıtma

Bu seçenek, canlı kanala özel yapılandırmaları ayarlama veya önizleme kanalı kullanmamış olsanız bile dağıtım yapma esnekliği sağlar.

  1. Yerel proje dizininizin kökünden 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ı aşağıdaki sitelere dağıtır:

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

  • Hosting sitelerinize bağladığınız tüm özel alanlar

Dağıtımı belirli bir Hosting sitesiyle kısıtlamak için CLI komutunuzda bir dağıtım hedefi belirtin.

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

Dağıtım için yorum ekleme

İsteğe bağlı olarak dağıtıma yorum ekleyebilirsiniz. Bu yorum, Firebase konsolundaki Hosting kontrol panelinde diğer dağıtım bilgileriyle birlikte gösterilir. Örneğin:

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

Dağıtım öncesi ve sonrası komut dosyası görevleri ekleme

İsteğe bağlı olarak, dağıtım öncesi veya sonrası görevleri gerçekleştirmek için kabuk komut dosyalarını firebase deploy komutuna bağlayabilirsiniz. Örneğin, dağıtım sonrası kancası, yöneticileri yeni site içeriği dağıtımları hakkında bilgilendirebilir. Daha fazla ayrıntı için Firebase KSA belgelerine bakın.

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

Statik içerik için istekte bulunulduğunda Firebase Hosting, içeriği CDN'de otomatik olarak önbelleğe alır. Sitenizin içeriğini yeniden dağıtırsanız Firebase, yeni isteklerin yeni içeriğinizi alması için CDN'deki tüm önbelleğe alınmış statik içeriğinizi otomatik olarak temizler.

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

HTTPS üzerinden sunma

Firebase Hosting üzerinde barındırılmayan tüm harici kaynakların (harici komut dosyaları dahil) SSL (HTTPS) üzerinden yüklendiğinden emin olun. Çoğu tarayıcı, kullanıcıların "karma içerik" (SSL ve SSL dışı trafik) yüklemesine izin vermez.

Dosyaları silme

Firebase Hosting'da, dağıtılan bir siteden seçili dosyaları silmenin birincil yolu, dosyaları yerel olarak silip yeniden dağıtmaktır.

Sonraki adımlar