SharePoint Framework (SPFx) Deployment Azure CDN

0 79

SharePoint Framework ile Office 365 CDN deploy yapmak zorunda değilsiniz. Azure hesabınız mevcut ise Azure Content Delivery Network (Azure CDN) üzerine deploy yapabilirsiniz. Bunun için Azure Storage hesabınızın olması gerekmektedir. SharePoint Framework otomatik olarak destek sağlar fakat manuel olarakta upload yapabilirsiniz.

Azure storage account konfigürasyonu

İlk olarak Azure storage account oluşturmanız gerekmektedir. Detay için linke tıklayınız.

Hesabınızı oluşturduktan sonra “http://spfxsamples.blob.core.windows.net” gibi endpoint oluşacaktır.

SharePoint Framework projeleriniz için benzersiz bir storage account oluşturmanız gerekmektedir.

BLOB Container oluşturma

Oluşturmuş olduğunuz Azure storage account içerisinde yer alan “+ Container” butonuna tıklarak yeni BLOB Container oluşturunuz.

Storage Account access key

Storage account dashboard içerisinde yer alan “access key” seçip, sonrasında keylerden herhangi birisini kopyalayınız.

CDN Profile ve endpoint

Yeni bir CDN profile oluşturup sonrasında BLOB container ile ilişkilendiriniz.

  • Azure strorage içerisinde CDN etkinleştirip, yeni bir CDN profil oluşturunuz. Detay için linke tıklayınız.
  • CDN profilinizi oluşturduktan sonra endpoint oluşturmanız gerekmektedir. Detay için linke tıklayınız.

Blog container ile ilişkilendirdiğimizden dolayı “http://spfxsamples.azureedge.net/azurehosted-webpart/” endpoint oluşacaktır.

Solution package ayarları

“config” folder içerisinde yer alan “package-solution.json” dosyasını açınız. “includeClientSideAssets” property “false” olarak güncelleyiniz. Bu durumda asset ‘leri paket içerisine dahil etmeyecektir. Çünkü biz Azure CDN üzerinden çekmesini istiyoruz. 🙂

{
 "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
 "solution": {
   "name": "azurehosted-webpart-client-side-solution",
   "id": "a4e95ed1-d096-4573-8a57-d0cc3b52da6a",
   "version": "1.0.0.0",
   "includeClientSideAssets": false,
  },
 "paths": {
   "zippedPackage": "solution/azurehosted-webpart.sppkg"
 }
}

Azure storage account konfigürasyonu

“config” folder içerisinde yer alan “deploy-azure-storage.json” dosyayı açınız.

{
 "$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
 "workingDir": "./temp/deploy/",
 "account": "<!-- STORAGE ACCOUNT NAME -->",
 "container": "azurehosted-webpart",
 "accessKey": "<!-- ACCESS KEY -->"
}

“account, container, accessKey” ayarlarınızı oluşturmuş olduğunuz Azure storage account içerisinde yer alan bilgilerle güncelleyiniz.

“workingDir” ise assets bulunduğu path adıdır.

{
 "workingDir": "./temp/deploy/",
 "account": "spfxsamples",
 "container": "azurehosted-webpart",
 "accessKey": "q1UsGWocj+CnlLuv9ZpriOCj46ikgBbDBCaQ0FfE8+qKVbDTVSbRGj41avlG73rynbvKizZpIKK9XpnpA=="
}

CDN Path güncelleme

“config” folder içerisinde yer alan “write-manifest.json” dosyasını açınız. “cdnBasePath” içerisine oluşturmuş olduğunuz Azure CDN url ile güncelleyiniz.

{
 "cdnBasePath": "https://spfxsamples.azureedge.net/azurehosted-webpart/"
}

SharePoint Framework Deploy Süreci

  • Aşağıdaki komutu çalıştırınız. “gulp bundle –ship” solution bundle etmenizi etmenizi sağlamaktadır.
gulp bundle --ship
  • Sonra aşağıdaki kodu çalıştırarak CDN ‘e “temp/deploy” içerisinde yer alan CSS, JS gibi assets yükleyiniz.
gulp deploy-azure-storage
  • Solution paket haline getirmek için aşağıdaki komutu çalıştırınız. Komut işlemini tamamladıktan sonra config için belirtmiş olduğunuz path içerisine oluşturmaktadır. (solution klasörü)
gulp package-solution --ship

Paket içerisindeki görüntülemek isterseniz “solution/debug” klasörüne gidip, görüntüleyebilirsiniz.

  • Paketleme işlemimiz bu kadar, şimdi ilgili “.sppkg” dosyasını SharePoint App Katalog içerisine yükleyiniz.
  • Eğer daha önceden aynı isimde bir app mevcut ise size değiştirip değiştirilmeyeceğini soracaktır. “Replace it” butonuna tıklayıp uygulamayı upload ediniz.
  • Başarı ile upload ettikten sonra “Deploy” deyiniz. (domain olarak Azure CDN url olduğuna dikkat ediniz.)

Tüm deploy işlemlerimiz bu kadar 🙂

SharePoint Framework Uygulama Yükleme

  • Developer site ya da uygulamanızı kullanmak istediğiniz site collection ‘a gidiniz.
  • Sağ üst nav bar üzerinde “Add an app” butonuna tıklayınız.
  • Search box üzerinde kendi uygulamanızı aratıp, yükleyiniz.
  • Uygulamanızı yükledikten sonra WebPart mevcut ise görüntülemek istediğiniz sayfayı açınız ve WebPart ekleyiniz.
  • Local üzerinde node.js çalışmasa bile uygulamanız görüntülenmeye devam edecektir.
  • F12 tuşuna basıp kontrol ettiğinizde Azure CDN üzerinden yüklendiğini göreceksiniz.

Tüm işlemimiz bu kadar, okuduğunuz için teşekkür ederim 🙂

Bunları da beğenebilirsin Yazarın diğer kitapları

Themetf