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örüntülemek ve test etmek isteyeceksiniz. Firebase Hosting, değişiklikleri yerel olarak görüntüleyip test etmenize ve öykünülmüş arka uç proje kaynaklarıyla etkileşimde bulunmanıza olanak tanır. 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. Çekme isteğinden dağıtılacak GitHub entegrasyonunu bile destekliyoruz.

Sen başlamadan önce

Barındırma Başlarken sayfasında listelenen adımları, özellikle de 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.

İsteğe bağlı olarak uygulamanızın Barındırma içeriğini ve yapılandırmasını 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 öykünülmüş arka uç proje kaynaklarıyla etkileşimde bulunmasını istiyorsanız Barındırma içeriğinizi test edebilir ve yerel olarak yapılandırabilirsiniz. Yerel olarak test yaparken Firebase, web uygulamanızı yerel olarak barındırılan bir URL'de sunar.

Barındırma, uygulamanızın öykünülmüş Barındırma içeriğiniz ve yapılandırmanızın yanı sıra isteğe bağlı olarak öykünülmüş 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, yapılandırdığınız öykünülmüş proje kaynaklarını kullanmak için uygulamanızı 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. Web uygulamanızı CLI tarafından döndürülen yerel URL'de açın (genellikle http://localhost:5000 ).

  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 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 istiyorsanız 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, yayınlanmadan önce web uygulamanızdaki değişiklikleri görüntülemesini 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 ( rewrites config'inizdeki "sabitlenmiş" işlevler hariç).

Önizleme URL'lerinin tahmin edilmesi zor olsa da (rastgele bir karma içerdikleri için), bunların herkese açık olduğunu unutmayın. Yani 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şluk içermeyen 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. Web uygulamanızı CLI tarafından döndürülen önizleme URL'sinde açın. Bunun gibi bir şeye benzeyecek: 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 belirleneceği de 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 Eylemini destekler. Bu GitHub Eylemini nasıl ayarlayacağı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 Barındırma içeriğinizi dağıtın ve canlı kanalınızda 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çeriğin 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, hatta farklı Firebase projelerinde bulunan siteleri belirtebilirsiniz.

    • SOURCE_CHANNEL_ID : Bu, şu anda canlı kanalınıza 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 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 bir ö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 yayındaki sitenizde görüntüleyin

Yukarıdaki seçeneklerin her ikisi de Hosting içeriğinizi dağıtır ve aşağıdaki sitelere yapılandırır:

  • Varsayılan Barındırma siteniz ve tüm 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 tüm özel alanlar

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ğıtım 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 kontrol panelinde 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ı komut dosyası içeren görevler ekleyin

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

Dağıtılan içeriğin önbelleğe alınması

Statik içerik için bir istek yapıldığında Firebase Hosting, içeriği otomatik olarak CDN'de önbelleğe alır. Sitenizin içeriğini yeniden dağıtırsanız Firebase, yeni isteklerin yeni içeriğinizi alabilmesi için CDN'de önbelleğe alınmış tüm statik içeriğinizi 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, harici komut dosyaları da dahil olmak üzere SSL (HTTPS) üzerinden yüklendiğinden emin olun. Çoğu tarayıcı, kullanıcıların "karışık içerik" (SSL ve SSL olmayan trafik) yüklemesine izin vermez.

Sonraki adımlar