2,906 okumalar

Bir Web Sitesini Firebase'e Dağıtma ve Ücretsiz Kullanma: Bir Kılavuz

ile Vladislav Guzey4m2023/06/06

Çok uzun; Okumak

Firebase bir mobil ve web uygulaması geliştirme platformudur. Gerçek zamanlı veritabanı, kimlik doğrulama, barındırma, bulut depolama ve daha fazlası gibi özellikler sunar. Bugün Next.JS projemizi depolamak için 'Barındırma' özelliğini kullanacağız. Yapmanız gereken ilk şey Firebase'e bir hesap açmak.

featured image - Bir Web Sitesini Firebase'e Dağıtma ve Ücretsiz Kullanma: Bir Kılavuz

Kısa bir süre önce "başlıklı bir yazı yazdım" Web Sitesi Performans Puanları 35'ten 100'e Nasıl Artırılır ? " Bu gönderide size projenizi Firebase'de nasıl dağıtacağınızı ve ücretsiz olarak nasıl kullanacağınızı göstereceğime söz verdim. Sözümü tutuyorum!

Firebase Nedir?

Muhtemelen bazılarınız henüz Firebase'e aşina değil o yüzden size kısaca ne olduğunu açıklayayım.

Firebase geliştiricilerin uygulamalarını daha kolay oluşturmalarına ve ölçeklendirmelerine yardımcı olacak bir dizi araç ve hizmet sağlayan bir mobil ve web uygulaması geliştirme platformudur.

Gerçek zamanlı veritabanı, kimlik doğrulama, barındırma, bulut depolama ve daha fazlası gibi özellikler sunar. Firebase ayrıca arka uç işlevleri ve altyapısı sağlayarak geliştiricilerin sunucu yönetimi veya karmaşık altyapı kurulumu konusunda endişelenmeden uygulamalarını oluşturmaya odaklanmasına olanak tanır.

Genel olarak Firebase, geliştirme sürecini basitleştirir ve geliştiricilerin hızlı bir şekilde yüksek kaliteli uygulamalar oluşturmasına olanak tanır.

Bugün Next.JS projemizi depolamak için 'Barındırma' özelliğini kullanacağız. Bu örnekte size projenizin statik versiyonunu nasıl barındıracağınızı göstereceğim. Yapmanız gereken ilk şey bir hesap açmaktır.

Firebase Hesabı Nasıl Kaydedilir

Firebase'e bir hesap kaydetmek için https://firebase.google.com/ , ve "Başlayın"ı tıklayın.

Daha sonra bir Google hesabı oluşturmanız veya mevcut bir hesabı kullanmanız gerekir. İlk adımı tamamladığınızda Firebase kontrol paneline ulaşacaksınız. Bir sonraki adım bir proje oluşturmaktır.

Firebase'de Proje Nasıl Oluşturulur

Bir proje oluşturmak için 3 basit adımı uygulamanız gerekir:

"Proje ekle"ye tıklayın ve yeni pencerede projeye bir ad verin.

Proje için Google Analytics işlevini etkinleştirin veya devre dışı bırakın ve "Proje oluştur"a tıklayın

Birkaç dakika sonra projeniz oluşturulacaktır.

Firebase'i Ücretsiz Olarak Kullanma

Bir proje oluşturduğunuzda onu kontrol panelinizde görebileceksiniz. Varsayılan olarak Spark Planında olacaksınız. Değilseniz Spark Planına değiştirmeniz gerekir.

Spark Planı herhangi bir aylık maliyeti olmayan ücretsiz bir plandır . Bazı sınırlamaları vardır, ancak özellikle statik web siteniz için bir barındırma platformu olarak kullanmayı planlıyorsanız, projenizi başlatmak için fazlasıyla yeterlidir.

Planın tam açıklamasını görmek için lütfen burayı ziyaret edin bağlantı .

Firebase barındırma işlemini kurmanın zamanı geldi.

Firebase Barındırma Nasıl Kurulur

Firebase barındırma kurulumu da oldukça basittir. Hesabınıza giriş yapın ve projenizi seçin. Daha sonra soldaki menüden "Oluştur"a tıklayın ve açılır menüden "Barındırma"yı seçin.

Yeni pencerede bir karşılama ekranı göreceksiniz. "Başlayın"ı tıklayın.

Projenizi barındırmak için öncelikle Firebase CLI'yi kurmanız gerekir.

Terminal pencerenizi açın ve aşağıdaki komutu girin:

 npm install -g firebase-tools

Kurulum tamamlandıktan sonra terminalinize aşağıdakini yazın:

 firebase login

Erişimi yetkilendirmek için sizi giriş ekranına götürecektir.

Bir sonraki adım, statik web sitenizi sakladığınız terminal penceresi içindeki proje klasörünüze gitmektir.

Aşağıdaki komutu çalıştırın:

 firebase init

Her şeyi doğru yaptıysanız terminal pencerenizde aşağıdakileri görmelisiniz.

Seçenekler listesinde "Barındırma: Firebase Barındırma için dosyaları yapılandırın ve (isteğe bağlı olarak) GitHub Eylem dağıtımlarını ayarlayın" seçeneğini seçin. Gezinmek için klavyenizdeki ok tuşlarını kullanın, seçmek için boşluk tuşuna basın ve ardından enter tuşuna basın.

Daha sonra listeden bir hesap seçin ve enter tuşuna basın.

Zaten bir projemiz olduğundan, listeden "Mevcut bir projeyi kullan" seçeneğini seçin ve önceki adımda oluşturduğunuz projeyi seçin.

Varsayılan olarak ortak dizin "genel" olarak ayarlanmıştır. Başka bir dizin belirtmek istiyorsanız bunu bir sonraki adımda yapabilirsiniz. Örneğin Next.js projem 'out' dizininde web sitesinin statik bir versiyonunu üretiyor, bu yüzden bunu bu adımda belirtiyorum.