Firebase Hosting

Published in

GDG Turkey

5 min readNov 21, 2016

Uzun zamandır yazmamanın verdiği burukluk ve dün gece elde ettiğim deneyimin verdiği hevesle klavyeye sarılıp bu yazıyı sizlerle paylaşma gereği duydum. Bu yazımda sizlere Firebase Hosting Nedir?, Single Page bir web sitesini Firebase Hosting kullanarak nasıl yayınlanır? ve bu siteyi Domaine bağlama işlemi nasıl gerçekleştirilir? sorularını elimden geldiğince cevaplamaya çalışacağım.

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 Console’da 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ü..

Firebase Hosting Domain Bağlama

Firebase Console a gidip sitemizi deploy ettiğimiz projemizi açıyoruz ve sol taraftaki menüden Hosting bölümüne geliyoruz.

kısımdaki bölüme sahip olduğumuz domaini ekledikten sonra..

2. Bölümde bize verilen bilgilerin Domainimizin DNS ayarlarına eklenmesi isteniyor. Ben NameCheap Kullandığımdan Ordaki işlemi kısaca açıklamak istiyorum. Hesabımıza giriş yaptıktan sonra

Domain List > Manage(geçerli domain için) > Advanced DNS ten Host Records bölümüne > Type: TXT — Host: example.com — Value: bize firebase tarafından verilen değerleri ekleyip kaydediyoruz.

Benim yaklaşık 5 dakika içinde bilgilerim doğrulandı ve 3. adıma geçtim.

3. Adımda tekrar Advanced DNS bölümüne bize verilen CNAME vena A kayıtlarını eklememiz isteniyor.

Ben CNAME den verim alamayıp 2 tane verilen A kayıtlarını ekledim. A kayıtlarında:

Type: A Record — Host:@ — Value: verilen IP adresleri

Sonrasinda 15 dakika içinde site aktif hale geldi.

Sonuç

Firebase’in bize sunduğu Hosting imkanı ile single-page, PWA veya herhangi bir JavaScript framework’ünü kullanan projemizi kolay bir şekilde ek hosting ihtiyacı duymadan deploy edip Domain’e bağlayabiliyoruz. Şahsen ben tüm bu işlemleri gerçekleştirirken çok eğlendim ve Firebase’in sunduğu bu imkan karşısında çok müteşekkir olduğumu ifade etmeliyim. Denemenizi tavsiye ederim.

Kaynaklar:

Sorry for long post here is a funny gif for you :)