Azure Storage’dan Static Site Hosting

Azure Storage adından da anlaşılacağı üzere 🙂 Azure’daki Storage hizmetlerini temsil ediyor. İlk zamanlarından beridir Azure’da yer alan ve altyapısal olarak yapı taşlarından olan bir hizmet. Aslında tek hizmet de değil. Bugün bir Azure Storage hesabı alırsanız Blob, Queue, Table, Azure Files hepsi aynı şapkadan çıkıyor. Bizim bu yazıda ilgileneceğimiz kısım Blob kısmı.

Azure’da bloblara kabaca binary large object diyebiliriz. Azure’daki web sitenizin kullanıcılar tarafından upload edilen resimleri koyacağı yer, bir dosya alanı. Blob hizmeti REST API üzerinden sunulan ve kendi içinde ölçeklenebilen bir hizmet. Birçok özelliği var, ama bizi bu yazı çerçevesinde ilgilendiren kısmı Blob’lardan static site host etmek.

Neden sitemi Azure Blob’lardan yayınlayayım ki?

İlk olarak şunu bir kenara koyalım. Eğer elinizde statik bir site yoksa, yani sadece HTML’lerden, JS, CSS gibi dosyalarından oluşan bir site yoksa bu static site hosting işinize yaramayacaktır. Arkada C# vs gibi bir uygulama katmanımız olmayacak. Ben Angular ile yazdım zaten API çağırıyorum diyorsanız CORS’a dikkat ettiğiniz sürece sıkıntı yaşamazsınız. Static Site Generator’lar ile kullanmayı düşünebilirsiniz, fakat o noktada da Blob’lara FTP erişiminiz olmayacağı için 🙂 generator özellikle Azure Blob API’ı desteklemiyorsa yine şansınız yok. Veya bir şekilde generate ettiğiniz içeriği Azure Storage’a yükleme kısmını otomatize etmek için siz birşeyler yapacaksınız. İtiraf etmek gerekirse AzCopy ile kolayca halledebilirsiniz.

Kendimden bahsedecek olursam 🙂 ben genelde single page app’ler için veya ufak landing page’ler için kullanıyorum. Çok da güzel oluyor. Tabi CI/CD kısmı biraz dertli. Biraz önce bahsettiğim file access sıkıntılarından dolayı orada da takla atmak gerekebiliyor. AzCopy rahatlıkla Azure DevOps Pipeline içerisine sokuşturulabiliyor.

Peki tamam da, bu kadar sıkıntılı birşeyi niye kullanalım? Çünkü çok ucuz, dertsiz ve kendi kendine ölçekleniyor. Azure Storage’da blobların önünde zaten birer HTTP endpoint var. Eğer bunu özellikle kapatmazsak zaten bir HTTP endpoint ile her binary objeye ulaşılabiliyor. Bu kapsamda aslında Azure Storage’da static site host edebiliyor olmak çok da yeni birşey değil. Esas sıkıntı neydi biliyor musunuz? 🙂 Root level default dosya atamak. Her blobun kendi URL’i olduğu ve oradan ulaşılabildiği için herhangi bir noktada root level bir klasöre / containera ulaşmak istediğimizde o containerdeki bir dosyayı default olarak açacağını bilemiyordu Storage. Çünkü günün sonunda bu iş için tasarlanmış değildi zaten 🙂 Özetle bahsettiğim şey belki de IIS gibi bir webserverdan bilebileceğiniz “Default file” kavramı… Directory level bir yere gidildiğinde index.html’in açılması konusu 🙂

Bundan bir süre önce Azure Storage’a static site hosting özelliği geldi. Bu özelliğin içinde Microsoft’un yaptıp şeyler aslında süper basit.

Her storage hesabının için bir tane $web adında container koydular. Burası static site’ımızı atacağımız yer olacak. Unutmadan, bu yazıda kullandığım örnek benim eski Türkçe blog 🙂 Şu an http://Daron.yondem.com adresine giderseniz site azure’da bir storage’dan host ediliyor.

$web adındaki containerin kendini göstermesi için Azure Storage hesabınızdaki “Static website” özelliğini açmanız gerekiyor. Sonrasında yukarıdaki ekran görüntüsünde de görebileceğiniz üzere bir default bir de error sayfası seçiyorsunuz. Error sayfasını Storage 404 döndüreceği zaman kullanıyor ve otomatik redirect ediyor.

Aslında Microsoft’un yaptığı bu kadar 🙂 Azure Storage’ın geri kalan faydaları eskiden beridir vardı. Yukarıdaki şekilde host ettiğimiz bir sitede sakladığımız veri için günlük para ödeyeceğiz, insanlar ziyaret ettikçe transaction ve http bandwidth parası ödeyeceğiz. Hepsi o kadar. İşin güzel tarafı ne kadar ziyaret edilirse o kadar ödeyeceğiz ve herhangi bir provisioning vs yapmamız gerekmiyor. Scaling ile uğaşramamız gerekmiyor Storage hesabında Read-Access Geo Redundancy açtığınız anda Read’leri birden çok region’a bile dağıtabilirsiniz.

Değinmediğimiz ufak bir nokta var 🙂 O da storage’da kendi domainimizi kullanmak. Bu özellik eskiden de vardı. Ama tabi statis site hosting ile beraber kullanımı daha tatlı bir sonuç veriyor.

İsterseniz hemen Storage’ın Custom Domain özelliğinden faydalanarak kendi domaininizi yönlendirebilirsiniz. Yukarıdaki ekran görüntüsünden devam ederseniz gerekli CNAME bilgileri vs portalde kendini gösterecektir. Ben farklı birşey yaptım 🙂

Benim http://daron.yondem.com adresine tüm Türkiye aynı anda girerse de problem olmasın diye 😀 önüne bir de CDN aldım. Ne de olsa beleş.. yani beleş değil de aynı para. Çünkü sonuç itibari ile CND için de aynı bandwidth ücretini ödeyeceğim. En azından Storage Transaction’dan kurtulurum biraz. Duyan da herkes deli deli benim bloga giriyorlar zannedecek 🙂 Neyse, maksat fantezi.

Hemen Azure Storage’ın panelinden Azure CDN’i bulabilirsiniz. Bir CDN profili yaratmak gerekiyor. Bende zaten hazır bulunduğu için yukarıdaki ekran örnek olsun diye açım ve ekran görüntüsü aldım. Burada CDN endpoint name çok önemli değil. Çünkü CDN’in önüne kendi domaimizi alacağız 🙂 Bu arada, unutmadan, Storage’ın önüne CDN alacaksanız gidip de domaininizi Storage’a yönlendirmenin bir anlamı yok. CDN gidip Storage’a yönlenecek, bizim domain de CDN’e.

Pricing Tier kısmında Microsoft CDN’i seçip geçebilirsiniz. Verizon biraz daha pahalı çünkü HTTP Redirection ve Custom Rule Engine desteği var.

CDN provision edildikten sonra endpointi seçip Custom domain redirection ayarlayacağız.

Kendi domaininizi yönlendirme işini de tamamladığınızda yukarıdaki gibi bir manzara sizi karşılayacak. Origin bizim storage hesabı, endpoint CDN’in adresi, custom domain ise benim kendi domainim. Aslında Azure CDN custom SSL de verebiliyor.. fakat SSL açarsanız HTTP kapanıyor 🙂 HTTP’den HTTPS redirection için de daha önce bahsettiğimiz ve görece pahalı olan Verizon CDN gerekiyor. O nedenle benlde beleşe gelse de SSL kapalı 🙂

Peki maliyetlere dönsek?

Tabi, dönelim 🙂 Benim sitenin metriclerine bakalım. Ayda 500M Egress ve 32MB Ingress trafik gözüküyor Storage’da. Son bir ayda toplam 0.12$ ödemişim. 66 Kuruş yapıyor 🙂 Ödediğim paranın hepsini de CDN’e vermişim. Türkiye’de Azure bakış açısından Zone 1’de. Aylık 10TB’a kadar fiyatlandırma GB başına $0.081. Buradan kabaca aylık 1.4GB bandwidth’in CND tarafından kaldırıldığını ve storage’a uğramadığını söyleyebiliriz. Tabi yine kabaca bu 1.4’ün 500’ü blobalara gelmiş 🙂 O da normal. Eğer bu trafiği direk storage’dan verseydik $0.087/GB ödeyecektik 🙂 Storage’ın kendi maliyeti aylık $0.01 olmuş. O nedenle öne CDN almak benim minnak sitede bile bize 4 kuruş kar getirmiş 😀 Bu rakamlar sizi heyecanlandırmıyorsan sizi heyecanlandırman bir çarpanla çarpmaktan çekinmeyin 😀

Son bir özet geçecek olursak 🙂 sitemizin hosting kısmını tamamen Pay-As-You-Go yaptık. Arkadaki compute ihtiyaçları için bir JS framework ve API yaklaşımına sıcak bakarsanız Azure Functions ile o katmanı da Serverless tutup her tarafta 100% Pay-As-You-Go takılabilirsiniz. Yani 0 provisioning maliyeti! 0 scaling derdi. Hoşunuza gittiyse ileriki yazılarda belki o konulara da değinebiliriz ve bir web mimarisine baktığımızda her bacağı nasıl tamamen Serverless hale getirebileceğimize göz atarız.

Kolay gelsin 🙂