5 min read

8 Adımda Google Cloud App Engine Üzerinde Static Website Host Etme

8 Adımda Google Cloud App Engine Üzerinde Static Website Host Etme

Web projelerini ücretsiz şekilde deploy etmenin yollarından biri de Google Cloud’u kullanmak. Son zamanlarda cloud hizmetleri çok popülerleşti ve bir çok cloud servisi ücretsiz kullanabileceğimiz sınırlı deneyimler sunmaya başladı. Bunlardan biri de Google Cloud. Bu yazımda size yaptığınız basit bir web projesini Google Cloud servisine nasıl yükleyeceğinizi anlatmaya çalışacağım.

Lafı çok uzatmadan başlayalım.

NOT: Başlamadan önce https://cloud.google.com/sdk/docs/install sitesinden Google SDK indirip bilgisayarınıza kurmanız gerekmektedir.

  1. Öncelikle tahmin edeceğiniz üzere bu servisi kullanabilmeniz için bir Google hesabına ihtiyacınız olacak. Günümüzde birçok kişinin Google hesabı olduğunu düşünecek olursak bu aşamayı anlatmıyorum bile 😊
  2. https://console.cloud.google.com adresine girip Google hesabımızla giriş yapıyoruz. Giriş yapınca karşımıza şu şekilde bir sayfa geliyor. Google Cloud Platform yazısının yanında projeleriniz gözükür. Buraya tıklayarak yeni bir proje oluşturmamız gerekiyor.
Yeni proje oluşturma
  1. Gelen pencereden New Project butonuna tıklayalım ve devam edelim.
Yeni proje oluşturma
  1. Mor dikdörtgen içindeki kısım, kaç adet ücretsiz proje hakkınız kaldığını gösterir.

Yeşil dikdörtgen içindeki kısım, projenin adını gireceğiniz yerdir.

Pembe dikdörtgen içindeki kısım, projenin kaydedileceği yerdir.

Gerekli yerleri doldurduktan sonra, Create diyerek projeyi oluşturabilirsiniz.

Yeni proje oluşturma sayfası
  1. Projemizi oluşturduktan sonra, https://console.cloud.google.com adresine geri dönelim, bu sefer Google Cloud Platform yazısının yanında projenizin ismi olduğundan emin olalım ve Project Info bölümündeki Project ID kısmını kopyalayalım ve bilgisayarımızda oluşturacağımız dosyaya bu ismi verelim.

Örneğin, benim projemin ismi YunusEmreTopçu. Project ID değerim ise yunusemretopcu. Bilgisayarımda oluşturduğum klasör ile proje id değeri birbirinin aynısı olmalı.

Project ID ve Klasör İsmi aynı olmalı
  1. Projemizi oluşturduk şimdi birkaç ufak ayar yapalım ve daha sonrasında projemizi deploy edelim. Sol taraftaki navigation menüsündeki Compute Engine kısmına tıklayalım ve açılan Billing Account penceresinden kayıtlı hesabınızı seçebilir veya yeni bir tane oluşturabilirsiniz. Set Account butonuna tıkladıktan sonra karşımıza çıkan Compute Engine API’yı enable diyerek aktif edelim. Bu işlem bir dakika kadar sürebilir.
Compute Engine API Enable yapma
  1. Artık bilgisayarda yapacağımız işlemlere geçebiliriz. Bilgisayarda konsol üzerinden işlemler yapacağımız için en üstte belirttiğim Google SDK’yı indirip bilgisayarınıza mutlaka kurmalısınız Aksi taktirde hata alabilirsiniz.

Öncelikle bir IDE veya kod editörü ile bu klasörümüzü açalım ben bu işlem için Visual Studio Code kullanacağım. VS Code ile klasörümü açtıktan sonra ‘www’ adında bir klasör ve ‘app.yaml’ adında bir dosya oluşturmalıyız. Daha sonra app.yaml adlı dosyanın içine alttaki kodu kopyalayıp yapıştırın ve dosyayı kaydedin. app.yaml dosyasıyla işimiz burada bitti.

runtime: python27
api_version: 1
threadsafe: truehandlers:
- url: /
static_files: www/index.html
upload: www/index.html- url: /(.*)
static_files: www/\1
upload: www/(.*)

Şimdi gelelim www klasörüne. Bunları neden bu şekilde yaptığımızı sormayın, çünkü Google deploy edeceğimiz dosyayı bu şekilde hazırlamamızı istiyor 😊

www klasörünün içinde css adında css dosyalarını koyacağımız bir klasör, images adında resimlerimizi koyacağımız bir klasör ve js adında javascript dosyalarını koyacağımız bir klasör oluşturmamız gerekiyor. Yine www klasörünün altında index.html dosyamızı oluşturmamız gerekiyor. Bunların haricinde başka dosyalarımız varsa yine www klasörünün altında olmalı.

Evet, anlatması çok karışık, anlaması da biraz zor olabilir o yüzden bir resimle daha iyi açıklamaya çalışayım:

Klasör yapısı

Benim deploy edeceğim projede css ve resim olmadığı için, ilgili klasörleri sileceğim.

NOT: index.html içinde JavaScript ve CSS dosyalarımızı çağırırken, “/js/app.js” veya “/css/style.css” şeklinde eklemeliyiz. Başa “www” eklememeliyiz!

Script ve Css Dosyalarının Yapısı

8. Tüm dosyalarımız hazırsa komut satırımızı açalım ve komutlarımızı yazmaya başlayalım. Öncelikle cd [proje_adi] diyerek proje dizinin içine girmeyi unutmayalım!

gcloud init: Konsolumuza bu kodu yazıyoruz ve ilk çıkan seçenekte default ayarları kullanmasını istediğimiz için 1 yazıp enter’a basıyoruz.
gcloud init komutu
Daha sonrasında gelen seçenekte hangi hesapla giriş yapmamızı istediğimizi soracak. Ben halihazırda oturum açtığım hesabımı seçmek için yine 1’e basıyorum ve bir sonraki adıma geçiyorum.
Projeyi seçme
Bu adımda bize hangi proje klasörünü seçeceğimizi soruyor. Dikkat ettiyseniz projeler proje id’sine göre sıralanmış. Buradan ilk başta klasöre adını verdiğimiz proje id’sinin numarasını yazıyoruz. Eğer proje id’si listede çıkmıyorsa kendiniz girebilir ya da daha yeni bir proje oluşturmak istiyorsanız 6 yazarak oluşturabilirsiniz.

Bu adımdan sonra Compute Region and Zone seçimi için default mu olsun diye bir soru soruyor y diyerek bu adımı geçebiliriz.

Bu adımı geçtikten sonra karşımıza Google’ın sunucuları gelecek buradan size en yakın sunucuyu seçebilirsiniz. Tam emin değilim ama, Türkiye’ye en yakın sunucu Europe West diye biliyorum. Bu bağlamda ben de 14 numaradaki Europe-west4-a adlı sunucuyu seçeceğim. Sizde farklı sunucu isimleri çıkabilir dert değil farklı bir sunucu seçebilirsiniz.
Sunucu seçme

Ve bu işlem tamam şimdi sıradaki komutumuza geçelim:

gcloud app deploy: Projemizi ayarladığımız seçeneklere göre deploy etmeyi yarayan komuttur. Konsolumuza bu komutu yazalım, karşımıza tekrardan sunucular çıkıyor, ben yine 14 numaradaki Europe-west6 sunucusunu seçeceğim.

Bu seçimden sonra yine bir yes/no sorusu geliyor. Üstteki bilgileri kontrol edip yes diyoruz.

veeeeee mutlu son 😊

Uygulamamız deploy edildi. Şimdi tek yapmamız gereken üstteki adresi tarayıcımıza yazmak veya “gcloud app browse” komutunu yazmak. Bu komut bizi direkt siteye yönlendirecek.

Browserda uygulamanın görüntülenmesi

Bu da sitemiz 😊

Umarım sizler için faydalı bir yazı olmuştur. Daha fazla bilgi için Google Cloud’un resmi sitesini ziyaret edebilirsiniz.

Sürçü lisan ettiysek affola 😊

Herkese iyi çalışmalar, bir sonraki yazımda görüşmek üzere 😊

Benim yüklediğim sitenin linki: https://yunusemretopcu.ew.r.appspot.com/

Kaynak: https://cloud.google.com/appengine/docs/standard/python/getting-started/hosting-a-static-website

Kişisel Websitem: yunusemretopcu.com