【SharePoint Online】03 将Spfx扩展程序部署到 SharePoint Online站点中（通过Microsoft 365 CDN部署到SharePoint Online站点上）

前言

上一讲了解了本地托管的方式：基于feature xml 的预配在特定站点中使用扩展程序解决方案，这一讲将介绍如何将 SharePoint 框架应用程序（SPFx Application Customizer）通过Microsoft 365 CDN部署到SharePoint Online站点上

【SharePoint Online】01 通过Spfx创建扩展部件（SPFx Application Customizer）

【SharePoint Online】02 将Spfx扩展程序部署到 SharePoint Online站点中（本地托管的方式：基于feature xml 的预配在特定站点中使用扩展程序解决方案）

 步骤

一、在 Microsoft 365 租户中启用 CDN

1、安装CLI for Microsoft 365（安装Microsoft 365 CLI组件）

打开cmd，输入如下命令进行安装

npm i -g @pnp/cli-microsoft365

2、登录O365

接着在cmd中执行如下命令

m365 login

然后根据提示在浏览器中打开网址 https://microsoft.com/devicelogin，输入cmd中的code，点击下一步

稍后会弹出账号密码输入框，如下，输入office365管理员账号密码即可

 

接下来会弹出一个授权确认框，点击“接受”即可

 

2、获取 Microsoft 365 CDN 目前状态

在cmd中输入如下命令

m365 spo cdn get --type Public

3、添加新 CDN 源

在cmd中输入如下命令

m365 spo cdn origin add --origin */CDN

 4、验证是否已添加源

在cmd中输入如下命令进行验证

m365 spo cdn get --type Public

二、在项目中更新解决方案属性

1、返回到以前创建的解决方案，并打开文件上的./config/package-solution.js

2、将includeClientSideAssets 属性设置为 true

3、文件./config/write-manifests.js修改为如下代码

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

三、发布项目到SharePoint Online App站点

1、执行如下命令捆绑解决方案

gulp bundle --ship

 

2、执行如下命令打包解决方案， 此命令将创建 ./sharepoint/solution/app-extension-t.sppkg包

gulp package-solution --ship

 3、将生成的.sppkg包上传到app应用程序站点中，首先先打开app应用程序站点

4、按照如下步骤进行上传

 5、在弹出的对话框中点击“Deploy”即可

注意：此时的域已经变为了Sharepoint Online（区别与本地托管方法的localhost）

四、在SharePoint Online站点中使用

1、打开需要使用该扩展部件的SharePoint Online站点

2、点击右上角齿轮，然后点击“Add an app”

 3、找到刚刚发布的扩展部件app （app-extension-t-client-side-solution）,直接点击即可

 4、点击之后会自动把该app放到站点的网站内容中，稍等片刻后会在整个站点生效