Google Firebase ile Ucretsiz Hosting

Merhaba. Firebase nedir, nasil kullanir, hangi servisler vardir gibi detaylara bu yazida girmeyecegim. Daha detayli bilgi icin asagidaki linklere goz atabilirsiniz.

Firebase Products

What is Firebase?

Eveet.. Gelelim hosting isine, ucretsiz hosting. Firebase’in ucretli ucretsiz cesitli paketleri ve ona gore bir pricing list’i var. Ucretsiz hostinge ihtiyacimiz oldugundan emin olmak icin once ihtiyaclarimiza bir goz gezdirelim;

• Hazir bir websitesi
• Dusuk trafik ihtiyaci
• Kisitli butce
• Google/Gmail hesabi

Eger 4'te 3 evet ise, devam edebiliriz.

Oncelikle https://console.firebase.google.com/ linkine gidip, Google hesabimiz ile giris yapiyoruz.

Firebase anasayfasi

Sag ustte bulunun ‘Go to Console’ butonuna tiklayarak, calisma alanimiza giris yapiyoruz. Google Firebase, bize cesitli uygulamar icin cesitli playgroundlar sunuyor. Hosting projemiz icin oncelikle yeni bir proje yaratmamiz gerekli.

Firebase Console Görünümü

Oncelikle yeni bir proje yaratmamiz gerekli. Bunun icin “Proje Ekle” kismina tiklayalim. Firebase, yeni projemiz icin bizden Proje Adi, kimligi ve Ulkemizi doldurmamizi isteyecek. Ben demo projemiz icin adini ve kimligini “ucretsizhosting1” koyuyorum. Siz de “ucretsizhosting*” ya da istediginiz bir ismi girin ve yolumuza devam edelim. Neredeyse bitti!

Bizi karsilayacak ekran goruntusu boyle;

Aslinda Firebase mobil agirlikli uygulamalarin Storage, Auth. , Testing, vs. gibi back-end islerini cozume ulastirmak icin yaratildi. Literaturde BaaS(Back-end As a Service) olarak geciyor. Soldaki menulerden;

• Authentication
• Storage
• Hosting
• Functions
• TestLab for Android
• ….

Gibi cesitli servislere ulasabilirsiniz.

E hadi artik hosting!

Isimize donelim, hosting. Soldaki menude 7. sirada yer alan, dunya ikonu ile listelenmis “Hosting” butonuna basiyoruz.

Firebase Hosting Sayfasi

Buradan, -baska bir secenek de olmadigindan dolayi- Baslayin butonuna basiyoruz.

Karsimiza bir pop-up cikti! Firebase npm ile bizden kendi package’ini yuklememizi istiyor.

(npm mi? : https://www.w3schools.com/nodejs/nodejs_npm.asp)

Bunun icin sistemimizde npm kurulu olmali. Olmadigini varsayarak once npm’i yukleyelim. Yuklemeyi official siteden yapacagiz. Yukleme detaylarini anlatmaya gerek duymuyorum. Paketi indiriyor ve yukluyoruz! Bu kadar.

Indirme adresi : https://www.npmjs.com/get-npm

Yukleme tamamlandiktan sonra, ilgili Firebase paketlerini npm ile yuklemek icin console’umuzu acalim.

Simdi npm ile ilgili paketleri yuklemek icin;

$ npm install -g firebase-tools

yazip enter’a basin. Paketler yuklenmeye baslanacaktir.

Artik gercekten ilerledik. Bu paket ile sitemizi uzak sunucuya sadece 3 satir bash script ile yukleyebilecegiz!

Yukleyelim madem!

Oncelikle console’da projenin oldugu dizine atlamaliyiz. Ornek veriyorum ki suan “/” dizinindesiniz ve projeniz “/projem” dizininde.

$ cd projem

yazarak proje dizinine geciyoruz.

Proje dizininin icerigini soyle varsayiyorum:

projem
├───index.html
├───Readme.md
├───assets
│   ├───js
│   ├───css

Simdi yapmamiz gereken, proje dizini altindaki her dosya ve klasoru ‘public’ adinda bir klasor olusturup buraya atmak. Bu kisim gercekten cok onemli. projem klasorunun yeni hali aynen soyle olmali;

projem
├───public
│   ├───index.html
│   ├───Readme.md
│   ├───assets
│   │   ├───js
│   │   ├───css

Tekrar yaziyorum, sebebini ileride anlayacaksiniz. Once ‘projem’ altinda public adinda bir klasor olusturuyoruz. Ardindan ‘projem’ klasoru altindaki herseyi(public haric) son yarattigimiz klasorun icine atiyoruz.

Copy Paste yapmak icin yazini okumuyorum!

Tamam neredeyse bitti!

Bu ekrandaki isimiz bitti. npm yukledik ve public klasorune dosyalarimizi atadik Simdi devam diyelim.

Gordugunuz gibi onumuzde 3 adim var.

• Firebase’e console’dan giris yapmak,
• Projemizi bir firebase projesine cevirmek,
• Ve son olarak, sitemizi yayinlamak!

Simdi console’a geri donelim. Eger kapattiysak tekrar proje dosyasina geri gelmemiz gerekli. Bunun icin tekrar;

$ cd projem

Son Dörtlü!

Simdi Firebase’e giris yapalim.

$ firebase login

dedikten sonra bize ilk olarak bunu soracak:

? Allow Firebase to collect anonymous CLI usage and error reporting information?

’n’ diyip gecelim. Cunku Google’da zaten yeterince bilgi var ;)

Simdi Google Sign-In sayfasi acilacak, giris yaparak devam edelim.

….

Bitti! Giris yaptik ve ilk adim tamamlandi!

Geldik ikinci ve en kritik adima. Lutfen burada dediklerimi sirayla ve dikkatle yapin.

Console’a geri donelim. Bulundugumuz dizinin proje dizini olduguna emin olun. Bunu,$ pwd komutu ile kontrol edebilirsiniz. Eger dogru dizindeysek, devam!

Simdi,$ firebase init diyoruz.

Karsimiza soyle bir ekran cikacak, Hosting diyip enter’a basalim.

Ardindan, gelen ekranda yarattigimiz projeyi secip devam edelim. Ekran goruntusu soyle;

Eger bu yaziyi gorebildiyseniz neredeyse oldu!

Simdi, en onemli adim, $ firebase init ile yaratilan firebase.json dosyasini acalim. Icerigi ;

{}

olarak gozukuyor. Bu yanlis, boyle olsun istemiyoruz. Icerigini asagidaki ile degistirelim.

{
  "hosting": {
    "public": "public"
  }
}

Son adim!

Buraya kadar basariyla geldiyseniz harika. Cunku neredeyse bitti. Tek bir komutumuz kaldi, o da deploy. Bu komut ile sitemizi uzak sunucuya deploy edecegiz, gelin yapalim.

$ firebase deploy

Bu islem sitenizin boyutuna gore biraz vakit alabilir. Eger asagidaki ekrani gorduyseniz, islem tamamdir!

Hosting URL bolumundeki link araciligi ile sitenize ulasabilirsiniz.

Umuyorum ki sorunsuzca sitesini ucretsiz olarak Firebase’e yuklediniz. Diger yazimda ise elinizdeki Domain ile Firebase Hosting’i baglamayi anlatacagim.

Tum sorulariniz icin hic cekinmeden info.ugurcem@gmail.com adresine mail atabilirsiniz.

Iyi calismalar!