Catch up on highlights from Firebase at Google I/O 2023. Learn more

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

Yayındaki sitenize dağıtmadan önce değişikliklerinizi görmek ve test etmek isteyeceksiniz. Firebase Barındırma, değişiklikleri yerel olarak görüntülemenizi ve test etmenizi ve benzetilmiş arka uç proje kaynaklarıyla etkileşim kurmanızı sağlar. Ekip arkadaşlarınızın değişikliklerinizi görüntülemesine ve test etmesine ihtiyacınız varsa, Hosting siteniz için paylaşılabilir, geçici önizleme URL'leri oluşturabilir. Bir çekme isteğinden dağıtmak için bir GitHub entegrasyonunu bile destekliyoruz.

Sen başlamadan önce

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

  1. Firebase CLI'yi 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.

Uygulamanızın Barındırma içeriğini ve yapılandırmasını isteğe bağlı olarak dağıtabilirsiniz, ancak bu, bu sayfadaki adımlar için bir ön koşul değildir.

1. Adım: Yerel olarak test edin

Hızlı yinelemeler yapıyorsanız veya uygulamanızın benzetilmiş arka uç proje kaynaklarıyla etkileşime girmesini istiyorsanız, Barındırma içeriğinizi test edebilir ve yerel olarak yapılandırabilirsiniz. Yerel olarak test ederken Firebase, web uygulamanızı yerel olarak barındırılan bir URL'de sunar.

Barındırma, uygulamanızın öykünmüş Barındırma içeriğiniz ve yapılandırmanızın yanı sıra isteğe bağlı olarak öykünmüş proje kaynaklarınızla (işlevler, veritabanları ve kurallar) etkileşim kurmasını sağlayan Firebase Local Emulator Suite'in bir parçasıdır.

  1. (İsteğe bağlı) Varsayılan olarak, yerel olarak barındırılan uygulamanız öykünülmüş değil gerçek proje kaynaklarıyla (işlevler, veritabanı, kurallar vb.) etkileşime girer. Bunun yerine isteğe bağlı olarak uygulamanızı, yapılandırdığınız benzetilmiş proje kaynaklarını kullanmak için bağlayabilirsiniz. Daha fazla bilgi edinin: Gerçek Zamanlı Veritabanı | Bulut Firestore | Bulut İşlevleri

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

    firebase emulators:start

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

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

Diğer yerel cihazlardan test edin

Öykünücüler varsayılan olarak yalnızca localhost 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 yapmak isterseniz, firebase.json dosyanızı şu şekilde yapılandırın:

"emulators": {
    // ...

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

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

Başkalarının canlı yayına geçmeden önce web uygulamanızdaki değişiklikleri görmesini istiyorsanız önizleme kanallarını kullanabilirsiniz.

Bir önizleme kanalına dağıtım yaptıktan sonra Firebase, web uygulamanızı paylaşılabilir, geçici bir URL olan bir "önizleme URL'sinde" sunar. Bir ö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 tahmin edilmesi zor olsa da (rastgele bir hash içerdiklerinden), bunların herkese açık olduğunu unutmayın. Böylece, URL'yi bilen herkes ona 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 boşluksuz bir dizeyle değiştirin (örneğin, feature_mission-2-mars ). Bu kimlik, önizleme kanalıyla ilişkili önizleme URL'sini oluşturmak için kullanılacaktır.

  2. CLI tarafından döndürülen önizleme URL'sinde web uygulamanızı açın. Şunun gibi görünecektir: 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 belirttiğinizden emin olun.

Bir kanalın sona erme tarihinin nasıl ayarlanacağı da dahil olmak üzere önizleme kanallarını yönetme hakkında bilgi edinin.

Firebase Hosting, bir çekme isteğinde değişiklik yaptığınızda otomatik olarak bir önizleme URL'si oluşturan ve güncelleyen bir GitHub İşlemini destekler. Bu GitHub İşlemini nasıl kuracağınızı ve kullanacağınızı öğrenin.

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

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

1. Seçenek: Bir önizleme kanalından canlı kanalınıza kopyalama

Bu seçenek, bir önizleme kanalında test ettiğiniz içerik ve yapılandırmanın aynısını canlı kanalınıza dağıttığınıza dair güven 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ğıdakiyle değiştirin:

    • SOURCE_SITE_ID ve TARGET_SITE_ID : Kanalların bulunduğu Hosting sitelerinin ID'leridir.

      • Varsayılan Barındırma siteniz için Firebase proje kimliğinizi kullanın.
      • Aynı Firebase projesinde ve hatta farklı Firebase projelerinde bulunan siteleri belirtebilirsiniz.

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

      • 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, canlı kanala özgü yapılandırmaları ayarlama veya bir önizleme kanalı kullanmamış olsanız bile dağıtma 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 Barındırma içeriğinizi dağıtır ve aşağıdaki sitelere yapılandırma yapar:

  • Varsayılan Barındırma siteniz ve ek Barındırma siteleri için Firebase tarafından sağlanan alt alanlar:
    SITE_ID .web.app ( PROJECT_ID .web.app gibi)
    SITE_ID .firebaseapp.com ( PROJECT_ID .firebaseapp.com gibi)

  • Barındırma sitelerinize bağladığınız herhangi bir özel etki alanı

Dağıtımı belirli bir Barındırma sitesiyle sınırlamak için, CLI komutunuzda bir dağıtım hedefi belirtin .

Diğer dağıtma etkinlikleri ve bilgileri

Dağıtım için bir yorum ekleyin

İsteğe bağlı olarak bir dağıtıma yorum ekleyebilirsiniz. Bu yorum, Firebase konsolundaki Barındırma panosundaki diğer dağıtım bilgileriyle birlikte görüntülenecektir. Örneğin:

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

Dağıtım öncesi ve dağıtım sonrası betikli görevler ekleyin

İsteğe bağlı olarak, dağıtım öncesi veya dağıtım sonrası görevleri gerçekleştirmek için kabuk betiklerini firebase deploy komutuna bağlayabilirsiniz. Örneğin, bir dağıtım sonrası kancası, yöneticilere yeni site içeriği dağıtımlarını bildirebilir. Daha fazla ayrıntı için Firebase CLI belgelerine bakın.

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

Statik içerik için bir istek yapıldığında Firebase Hosting, içeriği CDN'de otomatik olarak önbelleğe alır. Sitenizin içeriğini yeniden konuşlandırırsanız Firebase, yeni isteklerin yeni içeriğinizi alması için önbelleğe alınmış tüm statik içeriğinizi CDN'de otomatik olarak temizler.

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

HTTPS üzerinden hizmet verme

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

Sonraki adımlar