Поделиться через


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

Сеть доставки содержимого 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.

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

  1. Откройте консоль и убедитесь, что по-прежнему выбран каталог проекта, который использовался для настройки проекта веб-части.

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

  3. Перейдите в каталог проекта:

    cd helloworld-webpart
    

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

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

  2. Откройте файл 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"
        }
    }
    
    

Значение по умолчанию для includeClientSideAssetstrue, что означает, что статические ресурсы автоматически упаковываются в файлы *.sppkg , и вам не нужно отдельно размещать ресурсы из внешней системы.

Не меняйте этот параметр для этой реализации, чтобы ресурсы автоматически размещались при развертывании решения в клиенте.

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

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

  1. Выполните приведенную ниже задачу, чтобы создать пакет решения. При этом будет выполнена сборка выпуска проекта с использованием динамической метки в качестве URL-адреса для размещения ресурсов. Этот URL-адрес автоматически обновляется в соответствии с параметрами CDN клиента.

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

    gulp package-solution --ship
    

    Примечание.

    Если вас интересует, что на самом деле упаковано в файл *.sppkg , вы можете просмотреть содержимое папки sharepoint/solution/debug .

  3. Добавьте или перетащите новый пакет клиентского решения в каталог приложений в клиенте.

  4. Так как вы уже развернули пакет, вам будет предложено заменить его. Нажмите кнопку Заменить.

    Переопределение существующего решения

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

    Всплывающее окно при установке решения SPFx в каталоге приложений

  6. Откройте сайт, где ранее было установлено решение helloworld-webpart-client-side-solution, или установите решение на новом сайте.

  7. Когда решение будет установлено, в меню со значком шестеренки выберите Добавление страницы, затем в окне выбора веб-частей для современной страницы нажмите HelloWorld, чтобы добавить свою веб-часть на страницу.

    Веб-часть HelloWorld в средстве выбора веб-частей для современной страницы

  8. Обратите внимание: веб-часть отображается, несмотря на то что локальный веб-сервер не запущен локально.

    Веб-часть HelloWorld на современной странице в режиме редактирования

  9. Сохраните изменения на странице с веб-частью.

  10. Откройте средства разработки браузера и откройте вкладку Источники.

  11. Разверните узел publiccdn.sharepointonline.com в источнике и обратите внимание, что файл hello-world-web-part загружается с URL-адреса общедоступной сети доставки содержимого, динамически указывающего на библиотеку, расположенную в семействе веб-сайтов каталога приложений.

    Пакет веб-части HelloWorld из общедоступной сети CDN по указанному 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.