Firebase Hosting

March 27, 2021

Firebase Hosting Nedir?

Firebase Hosting, modern web geliştiricisi için üretilmiştir. Statik siteler, Angular ve Jekyll gibi JavaScript frameworklerinin yükselişi ile her zamankinden daha güçlü hale gelmiştir. İster basit bir uygulama açılış sayfası veya karmaşık bir Prograsive Web App kullanmakta olsanız bile,Hosting, statik web sitelerini dağıtmak ve yönetmek için uyarlanmış altyapı, özellikler ve takım sağlar.

Hosting, projenize ‘firebaseapp.com’ alan adında bir subdomain verir. Firebase CLI(Command Line Interface) kullanarak, bilgisayarınızdaki yerel dizinlerden dosyaları Hosting sunucusuna deploy edebilirsiniz. Dosyalar, global CDN’deki(Content Delivery Network) en yakın sunucudan bir SSL bağlantısı üzerinden sunulmaktadır.

Statik içeriğin barındırılmasına ek olarak, Firebase Hosting, gelişmiş Progressive Web App ler oluşturabilmeniz için hafif yapılandırma seçenekleri sunar. İstemci tarafı yönlendirmesi için URL’leri kolayca yeniden yazabilir veya özel başlıklar oluşturabilirsiniz.

Bir siteyi üretime hazır hale getirdikten sonra, kendi alan adınızı Firebase Hosting’e bağlayabilirsiniz. Alanınız için otomatik olarak bir SSL sertifikası hazırlanır, böylece tüm içeriğiniz güvenli bir şekilde sunulur.

Gerekli Tool Kurulumları

Firebase Hostingi Firebase CLI üzerinden kullanabilmemiz için bilgisayarımızda npm ve node.js in kurulu olması gerekmekte. npm yüklemeksizin sadece node.js kurulumu ile birlikte npm de bilgisayarınıza yüklenmiş olacaktır.

Sonrasında Firebase CLI kurmak Terminali açıp alttaki komutu girmeniz gerekmektedir:

npm install -g firebase-tools

Eğerki komut sonucu error alırsanız kullanıcı izni gerektiğinden komutun başına “sudo” ekleyip tekrar deneyebilirsiniz.

Gerekli yüklemeler yapıldıktan sonra komutları takip ederek Google hesabınızla eşleştirme yapılacaktır. Bu işlemlerden sonra Firebase hesabınıza girip boş bir proje açmanız gerekmektedir.

Projeye Firebase Eklenme ve Deploy Etme

Tüm bu işlemlerin ardından artık projemize Firebase entegrasyonu yapabiliriz. İlk olarak Terminali açıp projemizin bulunduğu cd ye gidiyoruz. Ardından o dosyanın içindeyken alttaki komutu yazıyoruz:

$ firebase init

sonrasında karşınıza böyle bi ekran gelecektir.

ok tuşları ile “Hosting” e gelip okeyliyoruz.

Hosting kullanmak istediğiniz dosyanın firebasete hangi projeye ait olduğunu seçmeniz için hesabınızda bununan projeler sıralanacaktır.

Eğer proje oluşturmamış iseniz “create a new project” diyerek yeni bir proje oluşturabilirsiniz. Ben daha önceden oluşturduğum boşta duran bir projemi seçtim. Siz arzu ettiğiniz şekilde bir proje oluşturup seçebilirsiniz.

Ardından “Database Rules” kullanmak isteyip istemediğimiz konusunda bir seçenek gelecektir. Projemizi Deploy etmemiz için bunu kullanmamız ve ‘database.rules.json’ dosyasının proje klasörümüzde mevcut olması gerekmekte bu yüzden ‘Y’ komutuyla bunu onaylıyoruz.

Son olarak Proje klasörümüzde, projeye Firebase’i ilk entegre ettiğimizde oluşan ‘public’ klasörünü genel dizin olarak kalıp kalmayacağını soracaktır ki bu klasör biz projeye Firebase entegresi yaptığımızda default olarak genel dizin seçilmiştir.

public’ kalsörü içinde ‘index.html’ barındırır. Ki bu da sitemizin materiallerini içeren dosyadır. Buraya Firebase ‘index.html’ içinde çağıracağımız ‘CSS’ ve ‘asstes’ klasörlerinin public kalsörü dışında olursa daha static bir yapı elde edilebileceğini dile getirmiş fakat ‘assets’ veya ‘CSS’ kalsörünü public içine yetleştirdiğimde de hiçbir sorunla karşılaşmadığımı belirtmek isterim.

Single-page app bi yapı için tüm url leri ‘index.html’ dosyasına tekrar yazmak isteyip istemediğimiz soruyor. Karar sizin..

Ve tüm eklemeler yapıldığında karşımıza proje klasörümüz eklemeler yapılmak, sitemiz veya temamızı gömmek ve Firebase’e deploy etmek üzere hazır halde geliyor.

Geriye sadece projemizi Firebase hosting’e deploy etmek kalıyor…

$ firebase deploy

Ardından deploy ettiğimiz projemizi gerek Firebase Console üzerinden görüp açabilir, gerek Terminalden çıkmadan açabiliriz.

$ firebase open

Bu komutla birlikte proje üzerinde açmak istediğimiz seçenekler sıralanacaktır. ‘Hosting: Deployed Site’ seçerek deploy ettiğimiz sitemizi default browser da açabiliriz.

Deploy ettiğimiz sitemizin linki resimde ve Firebase Console da görülmektedir.

İsteğe göre Pojede değişiklikler yapıldıktan sonra direk bulunan dizinin üzerine ‘firebase deploy’ komutuyla deploy edilebilir veya

$ firebase use –add

komutuyla ‘alias’ yani Consoleda farklı isimli farklı bir dizin oluşturup pojemizi buna deploy edebiliriz ve bu şekilde eski halini yada ilk halini bozmadan depolayıp istediğimiz dizini ‘default’ olarak atayabiliriz.

‘alias’ atadıktan sonra terminalde:

$ firebase use

komutuyla mevcut tüm dizinleri görebilir ve isteğimizi deploy edip linke içerik olarak atayabiliriz.

Tüm işlemlerin Terminal üzerinde görünümü..

Source