【SharePoint Online】CDN からのクライアント側 Web パーツをホスティングさせる ーSPFx開発 その4ー

2019年11月4日

こんにちは。
とうとうHello, World 最終記事です。
これでローカルからのホスティングは卒業し、
正式にアプリとして完成といえるでしょう。
早速やっていきましょう。
参考にさせていただいた記事はこちらです。

SharePoint Frameworkの記事一覧

Office 365 テナントで CDN を有効にする

まずはテナントでCDNを有効化しましょう。
SharePoint Online Management Shell の最新バージョンがインストールされていない場合はあらかじめインストールしてください。
インストールが終わったら、Management Shellで以下のコマンドを実行してCDN 設定の状態を確認します。(1行ずつ実行してください。)

Connect-SPOService -Url https://<テナント名>-admin.sharepoint.com
Get-SPOTenantCdnEnabled -CdnType Public
Get-SPOTenantCdnOrigins -CdnType Public
Get-SPOTenantCdnPolicies -CdnType Public

Get-SPOTenantCdnEnabledコマンドがFalseであれば以下コマンドで有効にしましょう。

Set-SPOTenantCdnEnabled -CdnType Public

パブリックCDNが有効になりました。
これはつまり、CSS、EOT、GIF、ICO、JPEG、JPG、JS、MAP、PNG、SVG、TTF、WOFF のファイルの種類の拡張子がサポートされるということです。
再度「Get-SPOTenantCdnOrigins -CdnType Public」を実行してみます。

[(configuration pending)]状態になっています。
初めての構成には15分ほど要するようですのでしばらく待ちましょう。

展開するWebパーツアセットを準備する

それではWebパーツをリリースするための準備に取り掛かります。
ソリューションをバンドルするための次のコードをPowerShellで実行します。
これによって自動的にリリースビルドが行われます。

gulp bundle --ship

ソリューションをパッケージ化するための次のタスクを実行します。
これにより、更新された helloworld-webpart.sppkg パッケージが sharepoint/solution フォルダーに作成されます。

gulp package-solution --ship

ALL DONE!

それでは再度カタログサイトにアップロードしましょう。
同じファイル名で上げることになるので昔のパッケージは置換してしまいましょう。

前回helloworld-webpartを展開したサイトで、再度Webパーツを配置してみましょう。
ローカルでサーバを立てなくても正常にリストを取得できていることを確認してみてください。

終わりに

これで全ての工程が完了し、正常にサイトにデプロイすることができました!
いや~面白かった。
次回以降もMSDOCを参考にいくつか記事は上げていきますが、
今後はオリジナルのWebパーツを作成していけたらなと思います。
特にモダンUIでコンテンツスライダーが欲しいなと思ってたので慣れてきたら
作成したいところですね。

それではまた。

次:
【SharePoint Online】jQueryUI アコーディオンWeb パーツを作成する ーSPFx開発 その5ー

SharePoint Frameworkの記事一覧