Размещение клиентской веб-части в сети доставки содержимого Microsoft 365 (Hello World, часть 4)

Статья
03/21/2023

Сеть доставки содержимого Microsoft 365 позволяет разместить ресурсы непосредственно в клиенте Microsoft 365. В ней можно разместить любые статические ресурсы, используемые в SharePoint Online.

Примечание.

Разместить ресурсы веб-части можно несколькими способами. В этом руководстве описана сеть CDN Microsoft 365, но можно также использовать сеть доставки содержимого Microsoft Azure или просто разместить ресурсы в библиотеке SharePoint из своего клиента. Последний вариант предоставляет такие же возможности, но уступает сетям CDN в производительности. Ресурсы можно разместить в любом расположении, к которому пользователи могут получить доступ с помощью протокола HTTP(S).

Важно!

В этой статье упоминается атрибут includeClientSideAssets, который появился в SharePoint Framework (SPFx) 1.4. Эта версия не поддерживается в SharePoint 2016 с пакетом дополнительных компонентов 2. Если вы используете локальную конфигурацию, определите расположение CDN отдельно. Файлы JavaScript также можно размещать в централизованной библиотеке локальной среды SharePoint, к которой у пользователей есть доступ. Дополнительные рекомендации представлены в руководстве, посвященном SharePoint 2016.

Прежде чем приступать к работе, убедитесь, что выполнены следующие задачи:

Вы также можете выполнить эти действия, посмотрев это видео на канале YouTube сообщества платформы Microsoft 365 (PnP):

Включение сети доставки содержимого (CDN) в клиенте Microsoft 365

Для получения дополнительных сведений об активации и настройке сети доставки содержимого Microsoft 365 в клиенте SharePoint Online см. статью Включение CDN Microsoft 365.

Завершение решения для развертывания

Откройте консоль и убедитесь, что по-прежнему выбран каталог проекта, который использовался для настройки проекта веб-части.
Если у вас до сих пор запущен локальный веб-сервер из предыдущего учебника с помощью команды gulp serve, нажмите CTRL+C, чтобы завершить его работу.
Перейдите в каталог проекта:
```
cd helloworld-webpart
```

Проверка параметров решения

Откройте проект веб-части HelloWorldWebPart в Visual Studio Code или другой среде IDE.

Откройте файл package-solution.json в папке config.

В файле 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 включена, она используется автоматически с параметрами по умолчанию. Если сеть доставки содержимого Microsoft 365 не включена, ресурсы доставляются из семейства веб-сайтов с каталогом приложений. Это означает, что если оставить для параметра includeClientSideAssets значение true, ресурсы решения будут автоматически размещаться в клиенте.

Подготовка ресурсов веб-части к развертыванию

Выполните приведенную ниже задачу, чтобы создать пакет решения. При этом будет выполнена сборка выпуска проекта с использованием динамической метки в качестве URL-адреса для размещения ресурсов. Этот URL-адрес автоматически обновляется в соответствии с параметрами CDN клиента.
```
gulp bundle --ship
```
Выполните приведенную ниже задачу, чтобы упаковать решение. Эта команда создает обновленный пакет helloworld-webpart.sppkg в папке sharepoint/solution.
```
gulp package-solution --ship
```
Примечание.

Если вас интересует, что на самом деле упаковано в файл *.sppkg , вы можете просмотреть содержимое папки sharepoint/solution/debug .
Добавьте или перетащите новый пакет клиентского решения в каталог приложений в клиенте.
Так как вы уже развернули пакет, вам будет предложено заменить его. Нажмите кнопку Заменить.
Обратите внимание, что в списке доменов указана среда SharePoint Online. Это вызвано тем, что контент доставляется либо из сети CDN Microsoft 365, либо из каталога приложений (в зависимости от параметров клиента). Выберите Включить приложение .
Откройте сайт, где ранее было установлено решение helloworld-webpart-client-side-solution, или установите решение на новом сайте.
Когда решение будет установлено, в меню со значком шестеренки выберите Добавление страницы, затем в окне выбора веб-частей для современной страницы нажмите HelloWorld, чтобы добавить свою веб-часть на страницу.
Обратите внимание: веб-часть отображается, несмотря на то что локальный веб-сервер не запущен локально.
Сохраните изменения на странице с веб-частью.
Откройте средства разработки браузера и откройте вкладку Источники.
Разверните узел publiccdn.sharepointonline.com в источнике и обратите внимание, что файл hello-world-web-part загружается с URL-адреса общедоступной сети доставки содержимого, динамически указывающего на библиотеку, расположенную в семействе веб-сайтов каталога приложений.

Примечание.

Если в вашем клиенте не включена сеть CDN, а в файле package-solution.json для параметра includeClientSideAssets задано значение true, то URL-адрес для загрузки ресурсов динамически обновляется и указывает непосредственно на папку ClientSideAssets, расположенную в семействе веб-сайтов с каталогом приложений. В данном случае используется URL-адрес https://sppnp.microsoft.com/sites/apps/ClientSideAssets/. Это изменение выполняется автоматически в зависимости от настроек клиента и не требует каких-либо изменений в действительном пакете решения.

Поздравляем! Вы развернули веб-часть в SharePoint Online, автоматически разместив ее в сети доставки содержимого Microsoft 365.

Дальнейшие действия

Вы можете загрузить jQuery и jQuery UI, а затем собрать веб-часть jQuery Accordion. Дальнейшие указания см. в статье Добавление элемента Accordion jQueryUI в клиентскую веб-часть SharePoint.