Modern Yöntemlerle Statik Bir Web Sitesi Yayınlamak

Bilgisayarımızdaki statik bir web sitesinin, bir repository'ye gönderdiğimiz andan başlayan, bir pipeline tarafından dosyaların storage'a kopyalanarak devam ettiği ve ücretsiz SSL'i, güvenlik duvarı olan bir domain üzerinde yayınlanmasına kadar ki bütün sürecinin otomatize edildiğini hayal edelim? Hayal etmekle kalmayıp başlayalım!

Bir domain kirala
Cloudflare'e bu domain'i kaydet
Cloudflare'de domain için SSL ayarla ve sayfa kuralı tanımla
Azure'da bir storage açıp statik web sitesi için ayarla
Cloudflare'de yönetilen domain için DNS kayıtları ekle
Azure'de bir repository oluştur
Statik dosyaları Azure Storage'a manuel yükle
Repository'den Azure Storage'a kopyalayan bir pipeline hazırla

Bu aşamalardan domain kiralama hariç hiçbiri için ücret ödememize gerek olmayacaktır. 2020 yılında böyle en azından.

1. Bir domain kirala

GoDaddy'den daha önce aklımda olan bir fikirle ilgili uygun fiyatlı (yıllık ₺63, yıl: 2020) bir domain kiraladım. Daha önce İsim Tescil'den, Natro'dan, Turhost'tan da domain kiraladım. GoDaddy olmasının özel bir sebebi yok bu arada. Cloudflare ile entegrasyon konusunda rahat ederim diye düşünüyordum ki öyle de oldu. Başka bir domain firmasını da rahatlıkla kullanabilirsiniz.

2. Cloudflare'e bu domain'i kaydet

Cloudflare, sahip olduğunuz domain ile ilgili birçok şeyi yönetebilmenizi sağlayan bir platformdur. Daha önce kullanmadıysanız kayıt olup domain'inizi ekleyerek kullanmaya başlayabilirsiniz. Kullanmadan da sürecin devamını oluşturabiliriz, ancak ihtiyaç anında öğrenmiş olacağınız bu platform, eminim ileride işinize yarayacaktır. Ben öğrenmiş olduğum için çok memnunum.

Cloudflare'e aldığım domain'i ekledim. Cloudflare'in isim sunucularının adreslerini aldım ve bunları GoDaddy'ye ekleyerek, artık DNS yönetimi için GoDaddy'yi değil de Cloudflare'i kullanmak istediğimi belirtmiş oldum. Bu andan itibaren GoDaddy'ye giriş yapmama bile gerek kalmadı.

Cloudflare İsim Sunucuları
fred.ns.cloudflare.com
hope.ns.cloudflare.com

Bir süre sonra (3-5 saat) Cloudflare'den bir aktivasyon e-postası geldi. Artık domain'ime bir istek yapıldığında, nereye nasıl gideceğine Cloudflare üzerinden geçtikten sonra karar verilecektir.

Hatırlarsanız 2019'un Haziran ayında Cloudflare çökünce, Cloudflare üzerinden yönetilen sitelere erişilememişti, ancak yeteneklerini düşününce bunu göze alıyorum. GoDaddy üzerinden yönetmeye devam edebilirdim ama Cloudflare'i kullandıkça neden burada olmam gerektiğini anlıyorum.

Ücretsiz planı kullanarak kaç ziyaretçi, kaç istek, istekler hangi ülkelerden, bandwith miktarı vb. gibi birçok bilgiye ve hizmete erişebiliyorum. SSL hizmetini ücretsiz olarak alabiliyorum. SSL'i farklı bir mimari ile çalışıyor ama işini yapıyor. Ataklara, botlara vb. herkesin karşılaşabileceği sıradan sorunlara karşı önlem almış da oluyorum. Güvenlik duvarı, cache, yönlendirme kuralları vb. gibi daha birçok hizmeti de bulunmaktadır. Kısacası yetenekli ve ücretsiz paketinde sunulan çokça hizmeti olduğu için kullanabiliriz.

3. Cloudflare'de domain için SSL ayarla ve sayfa kuralı tanımla

Kullanıcı - Cloudflare ve Cloudflare - web sitesi arasında kullanılacak SSL'i, Full seçeneğini işaretleyerek aktive ediyorum.

2 tane sayfa kuralı (page rule) ekledim.

'mydomain.com' şeklinde gelirse www.mydomain.com'a yönlendir. *.mydomain.com'dan gelirse her zaman SSL kullan, yani htttps'e yönlendir.

4. Azure'da bir storage açıp statik web sitesi için ayarla

Daha sonra Cloudflare'de birkaç işlem daha yapacağız ama şimdi Azure'a geçelim. Azure, Microsoft'un en büyük gelir kaynağı ve bulutta ilk sıralarda yer alan altyapı hizmetidir. Amazon'da da gezinmiş biri olarak Azure'un derli toplu olması, homojen ekran yapısı, hizmet isimlendirmeleri çok daha güzel olmuş diyebilirim. 1 yıl ücretsiz ve tamamen ücretsiz olan bir dolu hizmeti var. Şahsi Microsoft hesabım ile giriş yapıp kredi kartı bilgilerimi ekledikten sonra kullanmaya başlayabiliyorum.

Azure Portal'da bir Storage Account oluşturacağız. Bunu bir hosting firmasının size verdiği alan gibi düşünebilirsiniz. Web sitesinin dosyalarını (html, js vb.) buraya yükleyeceğiz. 1 yıl boyunca 5 GB'lik bir storage'ı ücretsiz kullanabileceğiz. Sonrasında ise kullandıkça ödediğiniz ($0.00081/GB başına) bir fiyatlandırma politikasına tabii tutulacaksınız. Storage'ı oluşturduktan sonra statik web sitesi barındırmak amacı ile kullanacağınızı belirtmeniz gerekiyor aşağıdaki gibi.

Storage'ı oluşturduktan sonra bu storage'a ait endpoint'leri Static Website sayfasında göreceksiniz. Bu endpoint'ler Azure'un otomatik oluşturduğu url bilgisidir. Basit bir index.html sayfası yükleyerek storage'ın çalışıp çalışmadığını bu url ile kontrol edebilirsiniz.

Örneğin; https://mystorage.z19.web.core.windows.net/

5. Cloudflare'de yönetilen domain için DNS kayıtları ekle

Bir tane storage hesabı oluşturdum ve bu hesaba tıklayınca açılan menüden Static Website sayfasına ulaşıp bu özelliği aktive ettim. Daha sonra, aynı menüden Custom Domain menüsünü tıklayarak mystorage.z19.web.core.windows.net erişim linkini kopyalayıp Cloudflare'e geçtim. Buraya toplamda 3 tane DNS kaydı ekledim. Bir tanesi gereksiz olabilir ama emin olmak için ekledim onu da.

Type: CNAME, Name: asverify.www, Content: asverify.mystorage.z19.web.core.windows.net
Type: CNAME, Name: mydomain.com, Content: mystorage.z19.web.core.windows.net
Type: CNAME, Name: www, Content: asverify.mystorage.z19.web.core.windows.net

Azure'a geri dönüp Custom Domain bölümüne www.mydomain.com bilgisini girdim. Bu esnada hata alabilirsiniz ve genellikle nedeni DNS gecikmesidir. Azure bu konuda 2 yöntem sunuyor. Asverify'lı bir CNAME eklerseniz daha çabuk keşfedebiliyor.

SSL için Azure Storage sayfasındaki Configuration > Secure transfer required'in Enabled olduğuna emin olun.

Üç CNAME, iki Page Rule ve Azure'da SSL'i aktifleştirilmiş, domain bilgisi girilmiş bir storage accout ile hizmet almaya hazırım. Azure Storage Explorer masaüstü ve web uygulaması ile örnek bir index.html yükleyerek test edebilirsiniz.

6. Azure'de bir repository oluştur

Azure DevOps'a Microsoft veya GitHub hesabınızla giriş yaptıktan sonra bir repository oluşturup, elinizdeki statik web sitesinin dosyalarını bu repository'e push edebilirsiniz. Bu, aşina olduğunuz Git sürecidir. Azure'un birçok platform ile entegrasyonu mevcut. GitHub'da oluşturduğunuz repository'i de kullanabilirsiniz. Hiçbir platformda repository yoksa, Azure'da oluşturabilirsiniz.

7. Statik dosyalarını Azure Storage'a manuel yükle

Bu aşamayı manuel olarak yapmadan Pipeline aracılığı ile yapmak istiyorsanız 8. adıma geçebilirsiniz.

Statik web sitesini bu aşamada manuel olarak biz Azure Storage'a gönderebiliriz. Bunun için Azure Storage Explorer uygulamasını indirebilirsiniz. Bu işlemin FileZilla ile FTP'ye bağlanıp dosyaları atmamızdan pek de bir farkı bulunmamaktadır.

8. Repository’den Azure Storage’a kopyalayan bir pipeline hazırla

Pipeline ile daha önce tanışmayan varsa kısaca özetleyeyim: Kodunuzu, barındığı yerden alarak derleyebilen, belirttiğiniz testleri çalıştırabilen, derlenmiş kodu zip'leyip başka bir yere atabilen, attığı yerde açıp belirttiğiniz uygulama sunucusuna yükleyebilen işlemler zinciridir. Kodu push ederim, başka hiçbir şey yapmadan otomatik olarak sistem güncellenir. Şu zamanlarda DevOps Mühendisleri olarak işe alınan kişiler, pipeline'ın her aşamasını düzenler. Versiyonlama, sistem güncelleme zamanları, geri almalar vb. bütün işlemleri yapacak süreci planlayıp uygularlar. Bizim senaryomuzdaki pipeline, basit bir HTML sitesini, repository'den alıp Azure Storage'a kopyalayacak. Bunun için de aşağıdaki yaml dosyasını veya Azure Pipeline'daki Visual Assist isimli aracını kullanabiliriz. İkisi de aynı sonuca varıyor.

Pipelines > Azure Repos Git > My Repo > HTML işlemlerini takip ettiğinizde sizi bir yaml dosyasına getirecektir. Bu dosyaya aşağıdaki yaml'i kopyalayarak dosyayı düzenlerseniz, Pipeline'ınız hazır hale gelecektir.

trigger:
- master
 
pool:
  vmImage: 'windows-latest'
 
steps:
 
- task: AzureFileCopy@2
  inputs:
    SourcePath: '$(Build.SourcesDirectory)'
    azureSubscription: 'Azure subscription 1 (dsdb74er-8uy7-4e1e-py87-sdfsdfsf)'
    Destination: 'AzureBlob'
    storage: 'mystorage'
    containerName: '$web'

3, 2, 1 Kayıt

Buraya kadar zahmet çekip geldiğinize göre, keyif sürme zamanınız da gelmiş demektir. Pipelines menüsüne tıkladığınızda oluşturduğunuz kaydı seçin ve Run Pipeline butonuna tıklayın. Pipeline, repository'deki dosyaları alıp, mystorage'a kopyalayacaktır. İşi bitince de size bir e-posta göndermiş olmasını bekliyorum. Sitenizi, tarayıcınızı açarak test edebilirsiniz.

Teknolojiye hakim bir nesil olarak, büyüklerimizin bu konudaki ihtiyaçları ile ilgilenmeliyiz. Annemizin, babamızın akıllı telefon, e-posta, rehber senkronizasyonu, E-Devlet, E-Nabız, online bankacılık gibi imkanlardan faydalanabilmeleri için onlara destek olmalıyız.

COVID-19 ile mücadele içinde olduğumuz şu günlerde, neyi iyi yaptığımızı düşünüyorsak onu yapmaya devam etmemiz gerekiyor. Sağlıcakla kalın.