Hosten clientseitiger Webparts in Microsoft 365 CDN (Hello Word, Teil 4)

Artikel
03/21/2023

Microsoft 365 Content Delivery Network (CDN) bietet Ihnen eine einfache Lösung zum Hosten Ihrer Ressourcen direkt aus Ihrem eigenen Microsoft 365-Mandanten. Es kann zum Hosten aller statischen Ressourcen verwendet werden, die in SharePoint Online verwendet werden.

Hinweis

Es gibt mehrere unterschiedliche Hostingoptionen für Webpart-Objekte. In diesem Lernprogramm steht die Option „Microsoft 365 CDN“ im Vordergrund, Sie können jedoch auch das Azure CDN verwenden oder einfach Ihre Objekt aus der SharePoint-Bibliothek aus dem Mandanten hosten. Im letzteren Fall würden Sie nicht von den CDN-Leistungssteigerungen profitieren, im Hinblick auf die Funktionalität wäre dies jedoch möglich. Technisch gesehen wäre jeder Ort zum Hosten der Objekte für Endbenutzer denkbar, auf den Endbenutzer über HTTP(S) zugreifen können.

Wichtig

In diesem Artikel wird das includeClientSideAssets-Attribut verwendet, wurde in SharePoint-Framework (SPFx) v1.4 eingeführt. Diese Version wird mit SharePoint 2016 Feature Pack 2 nicht unterstützt. Wenn Sie ein lokales Setup verwenden, müssen Sie den CDN-Hostingspeicherort separat festlegen. Sie können die JavaScript-Dateien auch einfach über die zentrale Bibliothek in Ihrer lokalen SharePoint-Umgebung hosten, auf die die Benutzer Zugriff haben. Siehe auch weitere Überlegungen in den Anleitungen zu SharePoint 2016.

Führen Sie die folgenden Schritte aus, bevor Sie starten:

Sie können die Schritte auch anhand dieses Videos in unserem YouTube-Kanal „Microsoft 365 Platform Communtiy Patterns & Practices (PnP)“ nachvollziehen:

Aktivieren des CDN im Microsoft 365-Mandanten

Informationen zum Aktivieren und Konfigurieren des Microsoft 365 CDN in Ihrem SharePoint Online-Mandanten finden Sie unter Aktivieren des Microsoft 365 CDN.

Abschließen der Lösung für die Bereitstellung

Wechseln Sie zur Konsole und stellen Sie sicher, dass Sie sich noch in dem Projektverzeichnis befinden, das Sie zum Einrichten des Webpart-Projekts verwendet haben.
Wenn Sie den lokalen Webserver weiterhin ausführen, indem Sie gulp serve im vorherigen Lernprogramm ausführen, drücken Sie STRG+C, um ihn zu beenden.
Stellen Sie sicher, dass Sie sich in Ihrem Projektverzeichnis befinden:
```
cd helloworld-webpart
```

Prüfen von Projektmappeneinstellungen

Öffnen Sie das HelloWorldWebPart-Webpart-Projekt in Visual Studio Code oder in Ihrer bevorzugten IDE.

Öffnen Sie package-solution.json im Ordner config.

Die Datei package-solution.json definiert die Paketmetadaten, wie im folgenden Code dargestellt:

{
    "$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"
    }
}

Der Standardwert für includeClientSideAssets ist true, was bedeutet, dass statische Ressourcen automatisch in den *.sppkg-Dateien gepackt werden und Sie Ihre Ressourcen nicht separat von einem externen System hosten müssen.

Ändern Sie diese Einstellung im Rahmen dieser Übung nicht, damit Objekte automatisch gehostet werden, wenn die Lösung für Ihren Mandanten bereitgestellt wird.

Wenn Microsoft 365 CDBN aktiviert ist, werden automatisch die Standardeinstellungen verwendet. Wenn Microsoft 365 CDN nicht aktiviert ist, werden Objekte von der App-Katalog-Websitesammlung bereitgestellt. Dies bedeutet, dass die Lösungsobjekte automatisch im Mandanten gehostet werden, wenn Sie die Einstellung "includeClientSideAssets" auf "true" eingestellt lassen.

Vorbereiten der bereitzustellenden Webpartressourcen

Führen Sie die folgende Aufgabe aus, um Ihre Lösung in einem Bundle zu verpacken. Dadurch wird ein Versionsbuild des Projekts ausgeführt, indem eine dynamische Bezeichnung als Host-URL für Ihre Objekte verwendet wird. Diese URL wird automatisch auf Grundlage Ihrer CDN-Mandanteneinstellungen aktualisiert.
```
gulp bundle --ship
```
Führen Sie die folgende Aufgaben aus, um Ihre Lösung zu packen. Es wird ein aktualisiertes helloworld-webpart.sppkg-Paket im Ordner sharepoint/solution erstellt.
```
gulp package-solution --ship
```
Hinweis

Wenn Sie daran interessiert sind, was tatsächlich in der *.sppkg-Datei gepackt wurde, können Sie den Inhalt des Ordners sharepoint/solution/debug anzeigen.
Laden Sie das neu erstellte Paket mit Ihrer clientseitigen Lösung in den App-Katalog in Ihrem Mandanten hoch. Alternativ können Sie es auch per Drag & Drop verschieben.
Da Sie das Paket bereits bereitgestellt haben, werden Sie gefragt, ob das vorhandene Paket ersetzt werden soll. Wählen Sie Ersetzen.
Beachten Sie, dass die Domänenliste in der Aufforderung SharePoint Online enthält. Dies ist der Fall, da der Inhalt, je nach Mandanteneinstellungen, entweder von dem Microsoft 365 CDN oder dem App-Katalog bereitgestellt wird. Wählen Sie App aktivieren aus.
Öffnen Sie die Website, auf der Sie zuvor die helloworld-webpart-client-side-solution-Lösung installiert haben, oder installieren Sie die Lösung auf einer neuen Website.
Nachdem die Lösung installiert wurde, wählen Sie Seite hinzufügen im Menü mit dem Zahnradsymbol und wählen Sie HelloWorld in der Webpartauswahl für die moderne Seite aus, um Ihr benutzerdefiniertes Webpart zur Seite hinzuzufügen.
Sie sehen: Das Webpart wird gerendert, obwohl der lokale Webserver nicht ausgeführt wird.
Speichern Sie die Änderungen auf der Seite mit dem Webpart.
Öffnen Sie die Entwicklungstools Ihres Browsers, und öffnen Sie die Registerkarte Quellen.
Erweitern Sie publiccdn.sharepointonline.com unter Quellen, und achten Sie darauf, dass die Datei hello-world-web-part von der URL des öffentlichen CDN geladen wird, die dynamisch auf eine Bibliothek in der App-Katalog-Websitesammlung verweist.

Hinweis

Wenn Sie CDN nicht in Ihrem Mandanten aktiviert hätten und die includeClientSideAssets-Einstellung in package-solution.jsontrue lauten würde, würde die URL zum Laden der Objekte dynamisch aktualisiert und sie würde direkt auf den ClientSideAssets-Ordner in der App-Katalog-Websitesammlung verweisen. In diesem Beispiel lautet die URL: https://sppnp.microsoft.com/sites/apps/ClientSideAssets/. Diese Änderung erfolgt abhängig von Ihren Mandanteneinstellungen automatisch, und sie erfordert keine Änderungen im eigentlichen Lösungspaket.

Ihr benutzerdefiniertes Webpart ist jetzt in SharePoint Online bereitgestellt und wird automatisch in Microsoft 365 CDN gehostet.

Nächste Schritte

Sie können jQuery und jQueryUI laden und ein jQuery Accordion-Webpart erstellen. Lesen Sie die Informationen unter Hinzufügen von jQueryUI Accordion zu Ihrem clientseitigen Webpart, um fortzufahren.