SharePoint のクライアント側 Web パーツを Azure CDN に展開するDeploy your SharePoint client-side web part to Azure CDN

ホスティング ソリューションとして Office 365 CDN の既定値を使用する代わりに、新しい Web パーツのサンプルを作成し、そのアセットを Azure CDN (Content Delivery Network) に展開します。Create a new sample web part and deploy its assets to an Azure Content Delivery Network (CDN) instead of using the default Office 365 CDN as the hosting solution. CDN と統合された Azure Storage アカウントを使用して、アセットを展開します。You'll use an Azure Storage account integrated with a CDN to deploy your assets. SharePoint Framework のビルド ツールは、Azure Storage アカウントに展開するための簡易サポートを提供します。ただし、お気に入りの CDN プロバイダーまたは SharePoint へのファイルのアップロードは手動で行うこともできます。SharePoint Framework build tools provide out-of-the-box support for deploying to an Azure Storage account; however, you can also manually upload the files to your favorite CDN provider or to SharePoint.

注意

Web パーツ アセットには複数の異なるホスティング オプションがあります。There are multiple different hosting options for your web part assets. このチュートリアルは、Azure CDN オプションの表示に重点を置いていますが、Office 365 CDN を使用することも、単にテナントから SharePoint ライブラリのアセットをホストすることもできます。This tutorial concentrates on showing the Azure CDN option, but you could also use the Office 365 CDN or simply host your assets from SharePoint library from your tenant. 後者の場合は、CDN のパフォーマンス向上の恩恵を受けませんが、機能面で効果があります。In the latter case, you would not benefit from the CDN performance improvements, but that would also work from the functionality perspective. エンド ユーザーが HTTP を使用してアクセスできる場所は、エンド ユーザーのアセットをホスティングするのに技術的に適しています。Any location that end users can access by using HTTP would be technically suitable for hosting the assets for end users.

Azure Storage アカウントを構成するConfigure an Azure storage account

Azure Storage アカウントを作成し、CDN と統合するために、この記事の詳細な手順に加えて、「ストレージ アカウントと Azure CDN の統合」という記事の指示に従います。To configure an Azure storage account and integrate it with the CDN, follow the instructions at Integrate an Azure storage account with Azure CDN, along with the detailed steps in this article.

注意

Azure UI は速いペースで進化しているので、いくつかの画像と手順は最新の状態ではない可能性がありますが、大まかなプロセスはまだ有効です。As Azure UIs are evolving fast, some of the pictures and steps might be out of date, but high level process is still valid.

ストレージ アカウント名Storage account name

これはストレージ アカウントを作成するために使用した名前です。この点は、「ステップ 1:ストレージ アカウントを作成する」で説明されています。This is the name you used to create your storage account, as described in Step 1: Create a storage account.

たとえば、次のスクリーン ショットでは、spfxsamples はストレージ アカウント名です。For example, in the following screenshot, spfxsamples is the storage account name.

「新しいストレージ アカウントを作成する」ページを示すスクリーン ショット

これによって、新しいストレージ アカウント エンドポイント spfxsamples.blob.core.windows.net が作成されます。This creates a new storage account endpoint spfxsamples.blob.core.windows.net.

注意

自分の SharePoint Framework プロジェクトの一意のストレージ アカウント名を作成する必要があります。You need to create a unique storage account name for your own SharePoint Framework projects.

BLOB コンテナー名BLOB container name

新しい BLOB サービス コンテナーを作成します。Create a new Blob service container. これは、ストレージ アカウントのダッシュ ボードで使用可能です。This is available in your storage account dashboard.

[+ コンテナー] を選択し、次を使用して新しいコンテナーを作成します。Select the + Container and create a new container with the following:

  • 名前: azurehosted-webpartName: azurehosted-webpart
  • アクセスの種類: コンテナーAccess type: Container

BLOB コンテナーを作成するオプションを示す画像 - 手順 1 BLOB コンテナーを作成するオプションを示す画像  - 手順 2Image that shows the option to create blob container - step 1 Image that shows the option to create blob container - step 2

ストレージ アカウントのアクセス キーStorage account access key

ストレージ アカウントのダッシュ ボードで、ダッシュボードの [アクセス キー] を選択して、アクセス キーのいずれかをコピーします。In the storage account dashboard, select Access Key in the dashboard, and copy one of the access keys.

ストレージ アカウントのアクセス キーが表示されている画像

CDN プロファイルおよびエンドポイントCDN profile and endpoint

新しい CDN プロファイルを作成し、CDN エンドポイントをこの BLOB コンテナーに関連付けます。Create a new CDN profile and associate the CDN endpoint with this BLOB container.

  1. 新しい CDN プロファイルを作成します。この点は、「ステップ 2: ストレージ アカウントに対して CDN を有効にする」で説明されています (ステップ 2 で「新しい CDN プロファイルを作成する」までスクロールする)。Create a new CDN profile as described in Step 2: Enable CDN for the storage account (scroll down in Step 2 for To create a new CDN profile).

    たとえば、次のスクリーン ショットでは、spfxwebparts は CDN プロファイル名です。For example, in the following screenshot, spfxwebparts is the CDN profile name.

    新しい CDN プロファイルの作成のスクリーンショット

  2. CDN エンドポイントを作成します。この点は、「ステップ 2: ストレージ アカウントに対して CDN を有効にする」で説明されています。Create a CDN endpoint as described in Step 2: Enable CDN for the storage account. CDN エンドポイントは、次の URL で作成されます。 http://spfxsamples.azureedge.netThe CDN endpoint is created with the following URL: http://spfxsamples.azureedge.net

    たとえば、次のスクリーン ショットでは、spfxsamples はエンドポイント名、ストレージ は配信元の種類、spfxsamples.blob.core.windows.net はストレージ アカウントです。For example, in the following screenshot, spfxsamples is the endpoint name, Storage is the origin type, and spfxsamples.blob.core.windows.net is the storage account.

    CDN エンドポイントの作成のスクリーンショット

CDN エンドポイントをストレージ アカウントに関連付け、次の URL で BLOB コンテナーにアクセスすることもできます。 http://spfxsamples.azureedge.net/azurehosted-webpart/Because you associated the CDN endpoint with your storage account, you can also access the BLOB container at the following URL: http://spfxsamples.azureedge.net/azurehosted-webpart/

ただし、ファイルをまだ展開していないことに注意してください。Note, however, that you have not yet deployed the files.

新しい Web パーツ プロジェクトの作成Create a new web part project

  1. 希望する場所に新しいプロジェクト ディレクトリを作成します。Create a new project directory in your preferred location:

    md azurehosted-webpart
    
  2. プロジェクト ディレクトリへ移動します。Go to the project directory:

    cd azurehosted-webpart
    
  3. Yeoman の SharePoint ジェネレーターを実行して、新しい SharePoint Framework ソリューションを作成します。Create a new SharePoint Framework solution by running Yeoman SharePoint Generator:

    yo @microsoft/sharepoint
    
  4. ダイアログ ボックスが表示されたら、次の操作を実行します。When prompted:

    • 既定の azurehosted-webpart をソリューション名として受け入れ、Enter キーを押します。Accept the default azurehosted-webpart as your solution name, and select Enter.
    • [SharePoint Online のみ (最新)] を選択し、Enter キーを押します。Select SharePoint Online only (latest), and select Enter.
    • ファイルの配置場所として [現在のフォルダーを使用する] を選びます。Select Use the current folder for where to place the files.
    • [y] を選択してテナント スコープの展開オプションを使用し、Web パーツを展開したときにすぐにサイト全体で使用可能になるようにします。Select y to use the tenant-scoped deployment option, which makes the web part available across sites immediately when it's deployed.
    • ソリューションに固有の権限が含まれている場合は、質問に対して [N] を選択してください。Select N on the question if solution contains unique permissions.
    • 作成するクライアント側コンポーネントの種類として、[Web パーツ] を選択します。Select WebPart as the client-side component type to be created.
  5. 次の一連のダイアログ ボックスでは、Web パーツの詳細情報について入力が求められます。The next set of prompts asks for specific information about your web part:

    • Web パーツの名前に AzureCDN を使用して、Enter キーを押します。Use AzureCDN for your web part name, and select Enter.
    • 既定の AzureCDN の説明 を Web パーツの説明として受け入れ、Enter キーを押します。Accept the default AzureCDN description as your web part description, and select Enter.
    • 使用するフレームワーク として既定の No JavaScript Web フレームワークを受け入れ、[Enter] を選択します。Accept the default No JavaScript web framework as the framework you would like to use, and select Enter.

    新しく作成した Web パーツに関する Yeoman ジェネレーターの質問

    この時点で、Yeoman はソリューション ファイルをスキャフォールディングし、必須の依存関係をインストールします。At this point, Yeoman scaffolds the solution files and installs the required dependencies. これには数分かかる場合があります。This might take a few minutes. Yeoman はプロジェクトをスキャフォールディングし、カスタム Web パーツも含めます。Yeoman scaffolds the project to include your custom web part as well.

  6. 以下のように入力して、Visual Studio Code で Web パーツ プロジェクトを開きます。Enter the following to open the web part project in Visual Studio Code:

    code .
    

既定の設定を使用しないようにソリューションを構成するConfigure the solution not to use default settings

  1. ./config/package-solution.json ファイルを開きます。Open ./config/package-solution.json file. これは、ソリューションのパッケージングを制御する場所です。This is where we control the solution packaging.

  2. クライアント側のアセットが .sppkg ファイル内にパッケージ化されないので、この値を設定します includeClientSideAssets false 。これは既定の動作です。 Set the includeClientSideAssets value to false so that client-side assets are NOT packaged inside the .sppkg file, which is the default behavior. 外部 CDN からアセットをホストしている場合、それらをソリューション パッケージに含めたくない。As we're hosting assets from an external CDN, we do not want them to be included in the solution package. 構成は次のようになります。Your configuration should look somewhat like the following.

    {
      "$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,
        "skipFeatureDeployment": true,
        "isDomainIsolated": false
      },
      "paths": {
        "zippedPackage": "solution/azurehosted-webpart.sppkg"
      }
    }
    

    注意

    テナント スコープの展開オプションの回答が Yeoman フローで 'y' と言ったため、この設定 skipFeatureDeployment true がここに表示されます。The skipFeatureDeployment setting is here true because the answer for the tenant-scope deployment option was said to be 'y' in the Yeoman flow. つまり、Web パーツを利用可能にする前に、サイトにソリューションを明示的にインストールする必要はありません。This means that you do NOT need to explicitly install the solution to the site before the web part is available. テナント アプリ カタログ内でソリューション パッケージを展開し、承認するだけで、指定のテナント内のすべてのサイトにわたって Web パーツを利用可能にすることができます。Deploying and approving the solution package in the tenant app catalog is sufficient to make the web part available across all the sites in the given tenant.

Azure Storage アカウントの詳細情報を構成するConfigure Azure Storage account details

  1. ファイル で ./config/deploy-azure-storage.js開 きます。Open ./config/deploy-azure-storage.json file. これは、Azure Storage アカウントの詳細情報を含むファイルです。This is the file that contains your Azure Storage account details.

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

    重要

    AZURE CDN 展開で使用されるリソースの場所は、SPFx v1.12.1 で変更されました。The location of resources used in the Azure CDN deployments changed in SPFx v1.12.1. 上記のスニペットは、プロパティ内の正しい場所を反映 workingDir しています。The snippet above reflects the correct location in the workingDir property.

    SPFx v1.12.1 より前に作成されたプロジェクトの場合、プロパティ workingDir は に設定されています ./temp/deploy/For projects created prior to SPFx v1.12.1, the workingDir property was set to ./temp/deploy/. プロジェクトを SPFx v1.12.1+にアップグレードした場合は、このプロパティを上記の設定に更新する必要があります。If you've upgraded the project to SPFx v1.12.1+, you should update this property to the above setting. 詳細については 、「SharePoint Framework v1.12.1 リリース ノート」を参照してくださいFor more information, see SharePoint Framework v1.12.1 release notes.

  2. accountcontainer ストレージ アカウント名、BLOB コンテナー、およびストレージ アカウント アクセス キーにそれぞれ accessKey 置き換える。Replace the account, container, accessKey with your storage account name, BLOB container, and storage account access key respectively.

    workingDir は、Web パーツアセットが存在するディレクトリです。workingDir is the directory where the web part assets are located.

    この例では、以前に作成されたストレージ アカウントを使用して、このファイルは次のようになります。In this example, with the storage account created earlier, this file will look like:

    {
      "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
      "workingDir": "./release/assets/",
      "account": "spfxsamples",
      "container": "azurehosted-webpart",
      "accessKey": "q1UsGWocj+CnlLuv9ZpriOCj46ikgBbDBCaQ0FfE8+qKVbDTVSbRGj41avlG73rynbvKizZpIKK9XpnpA=="
    }
    
  3. ファイルを保存します。Save the file.

Web パーツを構成して CDN から読み込むConfigure the web part to load from CDN

Web パーツが CDN から読み込むには、CDN のパスを伝える必要があります。For the web part to load from your CDN, you need to tell it your CDN path.

  1. [コード] Visual Studioに切り替えて、 ファイルの ./config/write-manifests.jsを開 きます。Switch to Visual Studio Code and open the ./config/write-manifests.json file.

  2. プロパティの CDN ベース パスを入力 cdnBasePath します。Enter your CDN base path for the cdnBasePath property.

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

    たとえば、以前に作成された CDN プロファイルを使用して、このファイルは次のようになります。In this example, with the CDN profile created earlier, this file will look like:

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

    注意

    CDN 基本パスは、BLOB コンテナーがある CDN エンドポイントです。The CDN base path is the CDN endpoint with the BLOB container.

  3. ファイルを保存します。Save the file.

展開する Web パーツ アセットを準備するPrepare the web part assets to deploy

CDN にアセットをアップロードする前に、それらをビルドする必要があります。Before uploading the assets to CDN, you need to build them.

  1. コンソールに切り替えて、次の gulp タスクを実行 します。Switch to the console and execute the following gulp task:

    gulp bundle --ship
    

    これは、CDN プロバイダーにアップロードする必要のある縮小されたアセットをビルドします。This builds the minified assets required to upload to the CDN provider. --ship は、配布用にビルドするビルド ツールを示します。The --ship indicates the build tool to build for distribution. ビルド ツールの出力は、ビルド ターゲットが SHIP を 示している場合にも 注意 してくださいYou should also notice that the output of the build tool indicates the Build Target is SHIP.

    Build target: SHIP
    [21:23:01] Using gulpfile ~/apps/azurehosted-webpart/gulpfile.js
    [21:23:01] Starting gulp
    [21:23:01] Starting 'default'...
    

    minified アセットは temp\deploy ディレクトリの下にありますThe minified assets can be found under the temp\deploy directory.

Azure Storage にアセットを展開するDeploy assets to Azure Storage

  1. azurehosted-webpart プロジェクト ディレクトリのコンソールに切り替えます。Switch to the console of the azurehosted-webpart project directory.

  2. gulp タスクを入力して、ストレージ アカウントにアセットを展開します。Enter the gulp task to deploy the assets to your storage account:

    gulp deploy-azure-storage
    

    これは、JavaScript、CSS ファイルなどの他のアセットに加えて、Web パーツのバンドルを CDN に配置します。This deploys the web part bundle along with other assets such as JavaScript and CSS files to the CDN.

更新済みのパッケージを展開するDeploy the updated package

ソリューションのパッケージ化To package the solution

Web パーツのバンドルを変更したため、アプリ カタログにパッケージを再展開する必要があります。Because you changed the web part bundle, you need to redeploy the package to the app catalog. 配布用に縮小されたアセットを生成するために、--ship を使用しました。You used --ship to generate minified assets for distribution.

  1. azurehosted-webpart プロジェクト ディレクトリのコンソールに切り替えます。Switch to the console of the azurehosted-webpart project directory.

  2. gulp タスクを入力して、クライアント側ソリューションをパッケージ化します。今回は --ship フラグを設定 します。Enter the gulp task to package the client-side solution, this time with the --ship flag set. これは、前の手順で構成された CDN 基本パスを取得するよう、タスクに強制します。This forces the task to pick up the CDN base path configured in the previous step:

    gulp package-solution --ship
    

    これは sharepoint\solution フォルダーで、更新されたクライアント側のソリューション パッケージを作成します。This creates the updated client-side solution package in the sharepoint\solution folder.

アプリ カタログにアップロードするTo upload to your app catalog

  1. アプリ カタログにクライアント側のソリューション パッケージをアップロードまたはドラッグ アンド ドロップします。Upload or drag and drop the client-side solution package to the app catalog. URL が前のステップで構成した Azure CDN URL をどのように指し示しているかを確認します。Notice how the URL is pointing to the Azure CDN URL configured in the previous steps.

  2. チェックボックスを選択すると、組織内のすべてのサイトにわたってソリューションを自動的に展開できることを示します。Select the check box to indicate that the solution can be deployed automatically across all sites in the organization.

    クライアント側の信頼できるソリューション パッケージの確認メッセージのスクリーンショット。

  3. [展開] を選択します。Select Deploy.

    アプリ カタログには、CDN から Web パーツのバンドルが読み込まれるクライアント側のソリューション パッケージが現れます。The app catalog now has the client-side solution package where the web part bundle is loaded from the CDN.

HelloWorld Web パーツをテストするTest the HelloWorld web part

  1. テナント内の任意の SharePoint サイトに移動して、歯車 メニューから [ページの追加] を選択します。Go to any SharePoint site in your tenant and select Add a page from the gears menu.

  2. ページを 編集 し、Web パーツ ピッカーから AzureCDN Web パーツを選択して、展開が正常に終了したことを確認します。Edit the page and select AzureCDN web part from the web part picker to confirm that your deployment has been successful.

    ピッカーから Web パーツを選択するスクリーンショット

  3. gulp serve を実行していないので 、localhost から何も提供されないので 注意してくださいNotice that you aren't running gulp serve, and therefore nothing is served from localhost. Azure CDN からコンテンツが提供されます。Content is served from the Azure CDN. ブラウザーで [F12] を選択し、Azure CDN をページアセットのソースの 1 つとして確認することで、これを確認することもできます。You can also double-check this by selecting F12 in your browser and confirming that you can see the Azure CDN as one of the sources for the page assets.

    Azure CDN URL を示すソース

他の CDN への展開Deploy to other CDNs

お気に入りの CDN プロバイダーにアセットを展開するには、ファイルを temp\deploy フォルダーからコピーできます。To deploy the assets to your favorite CDN provider, you can copy the files from temp\deploy folder. 配布用にアセットを生成するには、以前に行ったのと同様、次のように --ship パラメーターを指定して gulp コマンドを実行します。To generate assets for distribution, run the following gulp command as we did before with the --ship parameter:

gulp bundle --ship

適切に更新している限り、 cdnBasePath ファイルは正しく読み込まれています。As long as you're updating the cdnBasePath accordingly, your files are being properly loaded.

注意

ドキュメントまたは SharePoint Framework に問題が見つかった場合は、sp-dev-docs リポジトリの懸案事項リストを使用するか、この記事にコメントを追加するかして、SharePoint エンジニアリングにご報告ください。If you find an issue in the documentation or in the SharePoint Framework, please report that to SharePoint engineering by using the issue list at the sp-dev-docs repository or by adding a comment to this article. よろしくお願いします。Thanks for your input in advance.

関連項目See also