Microsoft 365 CDN から SPFx 拡張機能をホストする (Hello World パート 4)

この記事では、Microsoft 365 CDN からホストされる SharePoint Framework アプリケーション カスタマイザーを展開する方法と、エンド ユーザー向けの SharePoint に展開する方法について説明します。

開始する前に、次の記事の手順を完了していることを確認してください。

• SharePoint Framework の最初の拡張機能を作成する (Hello World パート 1)
• アプリケーション カスタマイザーからページ プレースホルダーを使用する (Hello World パート 2)
• 拡張機能を SharePoint に展開する (Hello World パート 3)

Microsoft 365 プラットフォーム コミュニティ (PnP) YouTube チャンネルのビデオを見て、これらの手順に従うこともできます。

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

Microsoft 365 CDN は、アセットの読み込み時間短縮のためにコンテンツ配信ネットワーク (CDN) サービスの利点を活かしつつ、SharePoint Framework ソリューションをテナントから直接ホストする最も簡単な方法です。

以下のドキュメントに記載された手順に従って、Microsoft 365 CDN がテナントで有効になっていることを確認します: Microsoft 365 CDN を有効にする。

ソリューション プロジェクトを CDN URL 用に更新する

1. 前に作成したソリューションに戻って、./config/package-solution.json ファイルを開きます。 Microsoft 365 CDN を通して資産を自動的にホストするには、includeClientSideAssets 属性を true に設定する必要があることに注意してください。 これにより、ソリューションが出荷用にパッケージ化されるときに、JavaScript アセットと関連ファイルが *.sppkg ファイル* に含まれるかどうかを制御します。

   {
     "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
     "solution": {
       "name": "app-extension-client-side-solution",
       "id": "831b6fac-7668-46b4-96c6-e2ee35559287",
       "version": "1.0.0.0",
       "includeClientSideAssets": true,
       ...
     }
   }
   

2. ./config/write-manifests.json ファイルを開きます。

   このファイルは、Microsoft Azure などの外部 CDN を使用している場合のみ更新する必要があります。 cdnBasePath 属性は、次に示したとおりになっていることを確認してください。 これ以外のエントリの場合は、Microsoft 365 のパブリック CDN による自動ホスティングが動作しなくなります。

   {
     "cdnBasePath": "<!-- PATH TO CDN -->"
   }
   

3. 次のタスクを実行して、ソリューションをバンドルします。 これにより、プロジェクトのリリース ビルドが実行されます。

   gulp bundle --ship
   

4. 次のタスクを実行して、ソリューションをパッケージ化します。 このコマンドは、./sharepoint/solution/app-extension.sppkg パッケージを作成します。

   gulp package-solution --ship
   

5. 新しく作成したクライアント側ソリューション パッケージを、テナント アプリ カタログにアップロードまたはドラッグ アンド ドロップします。 プロンプトが表示されたら、[このアプリのみを有効にする] ラジオ ボタンを選択してから、[アプリを有効にする] ボタンを選択します。 アセットが Microsoft 365 CDN で自動的にホストされるようになったために、ドメイン定義が SharePoint Online として更新されている点に注目してください。

   

6. 新しいバージョンのソリューションをサイトにインストールし、正常に動作することを確認します。 アプリ カタログで更新する前に、https://localhost のインストールに含まれるパッケージを削除していない場合は、サイトによって更新されたバージョンが自動的に実行され、プレース ホルダーが CDN からレンダリングされる点に注意してください。

   

これで完了です。Microsoft 365 テナントでパブリック CDN を有効化し、ソリューションでそのメリットを活用できるようになりました。

関連項目

• 最初の ListView Command Set 拡張機能をビルドする
• 最初のフィールド カスタマイザーの拡張機能をビルドする
• SharePoint Framework 拡張機能の概要