通过 Microsoft 365 CDN 托管客户端 Web 部件（Hello World 第 4 部分）

项目
03/21/2023

Microsoft 365 内容交付网络 (CDN) 提供了简便解决方案，可用于直接通过自己的 Office 365 租户托管资产。它可用于托管 SharePoint Online 中使用的任何静态资产。

注意

Web 部件资产有多种不同的托管选项。本教程重点介绍了 Microsoft 365 CDN 选项，但你也可以使用 Azure CDN 或直接从租户托管 SharePoint 库中的资产。在后一种情况下，将无法受益于 CDN 性能改进，但从功能角度来看这样做也可行。从技术角度来讲，最终用户可以使用 HTTP(S) 访问的任何位置都适用于为最终用户托管资产。

重要

本文使用 includeClientSideAssets 属性，在 SharePoint 框架 (SPFx) v1.4 中引入。此版本无法与 SharePoint 2016 功能包 2 配合使用。如果你使用的是本地设置，则需要单独决定 CDN 托管位置。也可以直接将集中式库内的 JavaScript 文件托管到用户有权访问的本地 SharePoint 中。请参阅 SharePoint 2016 专门指导中的其他注意事项。

开始前，请务必确保已完成以下任务：

还可以通过在 Microsoft 365 平台社区 (PnP) YouTube 频道上观看此视频来执行这些步骤：

在 Microsoft 365 租户中启用 CDN

有关在 SharePoint Online 租户内启用和配置 Microsoft 365 CDN 的信息，请参阅启用 Microsoft 365 CDN。

最终确定部署解决方案

切换到控制台，并确保仍位于设置 Web 部件项目所使用的项目目录中。
如果仍在通过执行上一教程中的gulp serve来运行本地 Web 服务器，请按 Ctrl+C 来终止它。
确保位于项目目录中：
```
cd helloworld-webpart
```

审阅解决方案设置

在 Visual Studio Code 或首选 IDE 中，打开“HelloWorldWebPart”Web 部件项目。

打开“config”文件夹中的“package-solution.json”。

package-solution.json 文件定义包元数据，如下面的代码所示：

{
    "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
    "solution": {
        "name": "mysolution-client-side-solution",
        "id": "ee1a495d-c7bb-499b-bd71-728aaeb79cd2",
        "version": "1.0.0.0",
        "includeClientSideAssets": true,
        "skipFeatureDeployment": true,
        "isDomainIsolated": false,
        "developer": {
            "name": "",
            "websiteUrl": "",
            "privacyUrl": "",
            "termsOfUseUrl": "",
            "mpnId": "Undefined-1.14.0"
        },
        "metadata": {
        "shortDescription": {
            "default": "mysolution description"
        },
        "longDescription": {
            "default": "mysolution description"
        },
        "screenshotPaths": [],
        "videoUrl": "",
        "categories": []
        },
        "features": [
        {
            "title": "mysolution Feature",
            "description": "The feature that activates elements of the mysolution solution.",
            "id": "d72e47b2-d5a2-479f-9f9a-85e1e7472dee",
            "version": "1.0.0.0"
        }
        ]
    },
    "paths": {
        "zippedPackage": "solution/mysolution.sppkg"
    }
}

的 includeClientSideAssets 默认值为 true，这意味着静态资产会自动打包到 *.sppkg 文件中，并且无需从外部系统单独托管资产。

请勿在本练习中更改此设置，以便将解决方案部署到租户时，可以自动托管资产。

如果 已启用 Microsoft 365 CDN，它将自动与默认设置一起使用。如果 未启用 Microsoft 365 CDN，则通过应用目录网站集提供资产。这意味着，如果保留 includeClientSideAssets 设置为 true，解决方案资产将自动托管在租户中。

准备要部署的 Web 部件资产

执行下列任务，以捆绑解决方案。这会将动态标签用作资产的主机 URL，从而执行项目的发布版本。此 URL 会根据租户 CDN 设置自动进行更新。
```
gulp bundle --ship
```
执行下列任务，以打包解决方案。这会在“sharepoint/solution”文件夹中创建更新后的“helloworld-webpart.sppkg”包。
```
gulp package-solution --ship
```
注意

如果对 *.sppkg 文件中实际打包的内容感兴趣，可以查看 sharepoint/solution/debug 文件夹的内容。
将新建的客户端解决方案包上传或拖放到租户中的应用目录。
因为你已部署过程序包，系统将提示是否替换现有包。选择“替换”。
请注意，提示中的“域”列表显示的是“SharePoint Online”。这是因为内容是通过 Microsoft 365 CDN 或应用目录（具体视租户设置而定）提供的。选择启用应用。
打开之前安装了“helloworld-webpart-client-side-solution”的网站，或将解决方案安装到新网站。
安装解决方案后，选择“齿轮”菜单中的“添加页面”，再选择新式页面 Web 部件选取器中的“HelloWorld”，将自定义 Web 部件添加到页面。
即使不运行本地 web 服务器，也请注意 Web 部件的呈现方式。
保存包含 Web 部件的页面上的更改。
打开浏览器的开发工具，并打开“源”选项卡。
展开源下的“publiccdn.sharepointonline.com”，并注意“hello-world-web-part”文件是通过动态指向应用目录网站集下的库的公用 CDN URL 进行加载。

注意

如果没有在租户中启用 CDN，并且 package-solution.json 中的 includeClientSideAssets 设置为 true，那么资产的加载 URL 会动态更新，并直接指向应用程序目录网站集中的 ClientSideAssets 文件夹。在此示例中，URL 是 https://sppnp.microsoft.com/sites/apps/ClientSideAssets/。此更改将根据你的租户设置自动执行，且无需在实际解决方案包中进行任何更改。

现在，你已将自定义 Web 部件部署到 SharePoint Online，并正在通过 Microsoft 365 CDN 自动托管该部件。

后续步骤

可以加载 jQuery 和 jQuery UI，并生成 jQuery 手风琴 Web 部件。若要继续操作，请参阅将 jQueryUI 手风琴小组件添加到客户端 Web 部件。