SharePoint Framework (SPFx) Deployment Office 365 CDN

0 67

Artık SPFx ile development yapabiliyoruz. Şimdi deployment sürecine bir göz atalım 🙂

SharePoint Framework (SPFx) ile geliştirmiş olduğunuz applicationı Office CDN üzerinde kullanabilirsiniz. Varsayılan olarak pasif olmasından dolayı PowerShell script yazarak aktifleştirmeniz gerekmektedir.

Office 365 CDN Aktifleştirme

  • SharePoint Online Management Shell ‘i linke tıklayarak bilgisayarınıza yükleyiniz.

SharePoint Online Management Shell sadece Window üzerinde çalışmaktadır. Farklı bir işletim sisteminiz mevcur ise Office 365 CLI kullanarak bu adımları gerçekleştirebilirsiniz.

  • Aşağıdaki komutu yazarak, SharePoint tenant ortamınıza bağlanın
Connect-SPOService -Url https://contoso-admin.sharepoint.com
  • SharePoint tenant hesabınızda CDN aktif edilip edilmediğini öğrenmek için aşağıdaki komutu kullanabilirsiniz.
Get-SPOTenantCdnEnabled -CdnType Public
Get-SPOTenantCdnOrigins -CdnType Public
Get-SPOTenantCdnPolicies -CdnType Public
  • SharePoint tenant hesabınızı aktifleştirmek için aşağıdaki komutu çalıştırınız.
Set-SPOTenantCdnEnabled -CdnType Public
  • Sizden ayarlar için onay isteyecektir. “Y” tuşuna basıp, enter deyiniz.

Aktifleştirilmesi biraz zaman alacaktır, Office 365 CDN için gerekli işlemlerimiz bu kadar 🙂

Solution settings

“config” folder içerisinde yer alan “package-solution.json” dosyasını açınız.

{
 "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
 "solution": {
   "name": "helloword-webpart-client-side-solution",
   "id": "3c1af394-bbf0-473c-bb7d-0798f0587cb7",
   "version": "1.0.0.0",
   "includeClientSideAssets": true
 },
 "paths": {
   "zippedPackage": "solution/helloword-webpart.sppkg"
 }
}

“includeClientSideAssets” varsayılan “true” olarak gelmektedir. Bu property ile statik assets “.sppkg” paketi içerisine otomatik dahil edilmektedir.

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
  • 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 SharePoint Online yazdığına 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 “http://publiccdn.sharepointonline.com” adresi üzerinden yüklendiğini göreceksiniz.

SharePoint Online içerisinde CDN aktif değilse ve “includeClientSideAssets” config içerisinde “true” olarak işaretliyse app catalog içerisinde yer alan “ClientSideAssets” içerisine yüklenecektir. Bu durumda url: “https://sppnp.microsoft.com/sites/apps/ClientSideAssets/.” gibi olacaktır.

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

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

Themetf