Freigeben über

Hosten einer SPFx-Erweiterung über Microsoft 365 CDN (Hello World, Teil 4)

  • Artikel

In diesem Artikel wird beschrieben, wie Sie Ihren SharePoint-Framework-Application Customizer über Microsoft 365 CDN bereitstellen und wie dieses über SharePoint für Endbenutzer bereitgestellt wird.

Stellen Sie sicher, dass Sie die Verfahren in den folgenden Artikeln abgeschlossen haben, bevor Sie beginnen:

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

Aktivieren des CDN im Microsoft 365-Mandanten

Microsoft 365 CDN ist die einfachste Möglichkeit, SharePoint-Framework-Lösungen direkt von Ihrem Mandanten aus zu hosten und dabei weiterhin die Vorteile des CDN (Content Delivery Network) zum schnelleren Laden der Objekte zu nutzen.

Führen Sie die im folgenden Dokument beschriebenen Schritte aus, um sicherzustellen, dass Microsoft 365 CDN in Ihrem Mandanten aktiviert ist: Aktivieren von Microsoft 365 CDN.

Aktualisieren des Lösungsprojekts für die CDN-URLs

  1. Kehren Sie zu der zuvor erstellten Lösung zurück, und öffnen Sie die Datei ./config/package-solution.json. Beachten Sie, dass das includeClientSideAssets-Attribut auf true festgelegt werden muss, damit Ressourcen automatisch über Microsoft 365 CDN gehostet werden. Dadurch wird gesteuert, ob die JavaScript-Ressourcen und die zugehörigen Dateien in der *.sppkg-Datei * enthalten sind, wenn die Projektmappe für den Versand gepackt wird.

    {
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "app-extension-client-side-solution",
    "id": "831b6fac-7668-46b4-96c6-e2ee35559287",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    ...
  }
}

  2. Öffnen Sie die Datei ./config/write-manifests.json.

    Diese Datei sollte nur bei Verwendung eines externen CDN, z. B. Microsoft Azure, aktualisiert werden. Stellen Sie sicher, dass das cdnBasePath-Attribut genauso wie unten dargestellt aussieht. Wenn es über einen anderen Eintrag verfügt, funktioniert das automatische Hosting mit dem öffentlichen Microsoft 365-CDN nicht.

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

  3. Führen Sie die folgenden Aufgaben aus, um Ihre Lösung in einem Bundle zu verpacken. Dadurch wird ein Release-Build Ihres Projekts ausgeführt.

    gulp bundle --ship

  4. Führen Sie die folgende Aufgaben aus, um Ihre Lösung zu packen. Dieser Befehl erstellt das Paket ./sharepoint/solution/app-extension.sppkg:

    gulp package-solution --ship

  5. Laden Sie das neu erstellte Paket mit Ihrer clientseitigen Lösung in den App-Katalog des Mandanten hoch. Wenn Sie dazu aufgefordert werden, wählen Sie das Optionsfeld Nur diese App aktivieren und dann die Schaltfläche App aktivieren aus. Beachten Sie, dass die Domänendefinition in SharePoint Online aktualisiert wird, da Ihre Ressourcen nun automatisch über Microsoft 365-CDN gehostet werden:

    Dialogfeld „Vertrauen“ des App-Katalogs mit dem Pfad zum CDN-Endpunkt

  6. Installieren Sie die neue Version der Lösung auf Ihrer Website, und stellen Sie sicher, dass sie ordnungsgemäß funktioniert. Wie Sie sehen, führt Ihre Website automatisch die aktualisierte Version aus und Platzhalter werden über das CDN gerendert, wenn Sie das Paket mit der https://localhost-Installation vor der Aktualisierung im App-Katalog nicht entfernt haben.

    Benutzerdefinierte Kopf- und Fußzeilenelemente, auf der Seite gerendert

Herzlichen Glückwunsch! Sie haben ein öffentliches CDN in Ihrem Microsoft 365-Mandanten aktiviert und es in der Lösung genutzt.

Siehe auch