Microsoft Azure Arşiv

SPFx Azure CDN Kullanımı

Hazırladığımız SPFx tabanlı webpart projesinin javascript, css, image gibi varlıklarını sunabilmek için farklı alternatiflerimiz bulunuyor.

  • SharePoint / SharePoint Online altında yer alan bir asset library
  • Azure Blob Storage
  • Kendi belirleyeceğiniz bir CDN yapısı (yerel sunucu, AWS, vb diğer bulut çözümleri)

SPFx webpart projeniz içerisinde yer alan write-manifest.json bu dosyaların hangi adres üzerinden alınması gerektiğini belirttiğimiz alan. Varsayılan olarak aşağıdaki değer ile karşımıza çıkacaktır.

 

Burada yer alan PATH TO CDN alanı yukarıda bahsettiğim seçeneklerden varlıklarınızı yüklemiş olduğunuz yolu parametre olarak alacak ve sonraki paketlemeden itibaren de bunu kullanmaya başlayacaktır. Ben bu kısa yazıda Azure CDN’i nasıl kullanabileceğimizi özetlemeye çalışacağım. Bunun için şüphesiz öncelikle bir Microsoft Azure hizmetinizin bulunması gerekiyor. Şirketinizin sağlayacağı MSDN ayrıcalıkları ile elde edebileceğiniz gibi ücretsiz olarak trial bir Azure üyeliği de başlayabilirsiniz.

İhtiyacımız olan bileşenler ve oluşturma sıramız aşağıdaki gibi olacak;

  • Tüm varlıklarımızı gruplamamıza yarayacak bir resource group
  • Storage account
  • Blob container
  • CDN profile
  • CDN endpoint

Azure Portal’a https://portal.azure.com adresinden ulaştıktan sonra sol menüden Resource groups > Add bağlantısını tıklayarak bir kaynak grubu oluşturabilirsiniz.

 

 

İsmin pek önemi yok ama kendinize ve beraber çalıştığınız ekibe göre bir isimlendirme formatıyla isimlendirmenizi öneririm. Resource grubunuz hazır olduğunda içerisine bir storage account ve blob container oluşturmamız gerekiyor. Çünkü varlık (asset) olarak adlandırdığımız javascript, css ve diğer dosyalarımızı bu yapı içine yükleyeceğiz. Bunun için oluşturduğunuz resource group ismini tıklayaray Add komutunu vermeniz ve Storage Account’u seçmeniz yeterli olacaktır.

 

 

Storage accountunuz oluştuğunda aşağıdaki gibi bir görüntü oluşacaktır.

 

 

Storage account ismini tıklayarak ulaşacağınız sayfa üzerinden “Blob” türünde bir container oluşturabilirsiniz.

 

 

Storage accountu oluşturduğumuz işlem adımlarıyla sırasıyla önce bir CDN Profile, ardından da CDN EndPoint yaratabilirsiniz. İlgili ekranlara ulaşmak için aşağıdaki gibi bir yolu izleyebilirsiniz.

 

 

 

Artık ihtiyacımız olan kaynakları yarattık ve projemizin içerisindeki ihtiyaç duyulan bilgileri girebilmek adına bazı notlar alalım. Önce neye ihtiyacımız olduğunu anlamaya çalışalım. Projemizin config klasörü altında deploy-azure-storage.json isminde bir dosyamız bulunuyor. Eğer Azure CDN kullanmak istiyorsak bu dosya içerisindeki bilgileri doldurmak durumundayız. Varsayılan hali aşağıdaki gibi ve sonraki kod bloğu ise benim düzenlediğim hali. Sizler de Azure işlemleriniz esnasında verdiğiniz bilgileri bu alana yerleştirebilirsiniz.

Alanları tek tek inceleyecek olursak;

workingDir: Kodlarınızı bundle ettiğinizde javascript, css gibi yapılarınızın sıkıştırılmış hallerinin oluşturulduğu dizindir. Bu alanda bir değişiklik yapmıyoruz.

account: Microsoft Azure üzerinde oluşturduğunuz storage account için belirlediğiniz isim.

container: Storage account altında oluşturduğunuz blob container’ın ismi.

accessKey: Bu bölümden yukarıda bahsetmedim. Kısaca storage accountunuzu oluşturduğunuzda Azure Portal üzerinde sol bölümde göreceğiniz Access keys alanından alacağınız değer. Aşağıdaki gibi bir yoldan görüntüleyebilir ve kopyalayabilirsiniz.

 

 

Paketimizi oluşturmadan önce son bir işimiz kaldı. O da oluşturduğumuz CDN EndPoint adresini write-manifest.json içerisine yerleştirmek. Bunun için oluşturduğunuz CDN EndPoint adresini bulmamız gerekiyor. Daha öncekilere benzer bir şekilde resource group içerisinden endpoint adresini alabiliriz.

 

 

Bunun sonuna blob container adresimizi ekleyerek write-manifest.json dosyamızı da güncellememiz gerekiyor. Dosya içeriğimiz aşağıdaki gibi olacak.

 

Şimdi tüm dosyalarımızı kaydedip öncelikle varlıklarımızın Azure CDN’e kopyalanmasını sağlayabiliriz. Bunun için aşağıdaki komutu çalıştırmamız yeterli olacak.

 

Bu komut sonrası dosyalarınız Azure Blob Storage’daki yerini alacaktır.

 

 

Azure Storage’daki durumu görmek için bir aracımız var aslında. Azure Storage Explorer isimli aracı indirerek kurduğunuzda aşağıdaki gibi bir görüntü ile dosyaların doğru yüklendiğini gözlemleyebilirsiniz.

 

 

Şimdi paketlememizi yapıp SharePoint’e güncellenmiş uygulama paketimizi yükleyebiliriz.

 

Yeniden yükleme esnasında daha önceden yüklü bir paket olacağından güncelleme seçeneği çıkacaktır karşımıza ve bu ekranda artık kaynak dosyalarımızın Microsoft Azure CDN’den alınacağını da görmüş oluyoruz.

 

 

Şimdi sonucu görme zamanı, yine bir sayfa ekleyip webpartımızı bu sayfaya ekleyerek test edebiliriz. F12 ile developer console’unuda açıp varlıkların Azure CDN’den geldiğini doğrulamış olalım.

 

Azure VM Internet Bağlantı Hatası

Microsoft Azure üzerinde oluşturmuş olduğunuz sanal sunucu (virtual machine) üzerindeki tarayıcı aracılığı ile internete erişmekte problem yaşayabilirsiniz. Aslında bu senaryonun ağırlıklı olarak karşılaşıldığı senaryo sunucu üzerinde domain controller rolünün aktif bulunduğu zamanlar olacaktır. Sunucu üzerinde domain controller tanımı yaparken ayrı bir dns sunucu belirtmediyseniz, yani sunucunun kendisini dns server olarak tanımladıysanız, public bir dns server bulunamayacak ve internete çıkış işlemlerinde problem yaşanabilecektir.

Sorunun çözümü için, virtual machine tarafından kullanılmakta olan sanal ağ bağlantısına (virtual network) ulaşarak Microsoft’un hazır public DNS adreslerini tanımlamanız gerekiyor. İşlem sonrasında sunucuyu restart etmenizi öneriyorum. Microsoft’un public DNS sunucu bilgileri aşağıdaki şekilde;

  • 168.63.129.16
  • 168.62.167.9

Eğer oluşturduğunuz sanal sunucuyu spesifik bir sanal ağ bağlantısına bağlı olarak oluşturmadıysanız bu durumda sunucunun içindeki ağ bağlantıları bölümünden IPv4 ayarlarına giderek doğrudan dns server adresi olarak bu IP’leri belirtebilirsiniz. Veya sunucunuzun bir imaj yedeğini alarak şablonlardan sanal sunucu oluştur seçeneği ile yeni bir sanal sunucu oluşturabilir ve bu esnada yukarıdaki düzenlemeyi yaptığınız bir sanal ağ bağlantısı belirleyebilirsiniz.