Erstellen und Bereitstellen von SharePoint-Framework-Projekten für die Produktion
In dieser Lerneinheit erfahren Sie, wie Sie SharePoint-Framework Lösungen in der Produktion packen und bereitstellen.
SharePoint-Framework-Bereitstellungsartefakte
Sehen wir uns zuerst die SharePoint-Framework-Bereitstellungsartefakte an, um die unterschiedlichen Dinge zu verstehen, die benötigt werden, damit SharePoint-Framework-Lösungen in der Produktion funktionieren.
Es gibt zwei verschiedene Arten von Dateien:
Installation und Registrierung: die Installations-und Registrierungsdateien sind in SharePoint-Paketen enthalten, die in den SharePoint-App-Katalogen bereitgestellt werden. Mit diesen Dateien wird SharePoint über die in den Paketen enthaltenen Komponenten informiert.
Diese Dateien umfassen eine App-Manifestdatei, Featureframeworkdateien und andere Dateien, die SharePoint zum Erstellen der Komponenten benötigt. Darunter sind keine Dateien, die der Ausführung der Anwendung dienen.
Komponentenlaufzeitdateien und Abhängigkeiten: Dies sind die Dateien, die zum Ausführen der SharePoint-Framework Komponente nach der Bereitstellung und Installation in einer SharePoint-Umgebung erforderlich sind. Alle Abhängigkeiten, die Ihre Komponente verwendet, wie z. B. Nicht-Microsoft-Webframeworkbibliotheken, können in das Paket der Komponente aufgenommen oder zur Laufzeit aus einem externen CDN geladen werden. Die Manifestdatei der Komponente definiert alle Abhängigkeiten, die die Komponente vor dem Laden und Ausführen auf der Seite benötigen.
Zu diesen Dateien gehören JavaScript-Pakete Ihrer Komponenten, Bilder, CSS-Dateien und JavaScript-Bibliotheken sowie die Objekte, von denen Ihre Komponente abhängt.
SharePoint-Framework-Lösungen erstellen, bündeln und verpacken
SharePoint Framework-Projekte werden über Pakete bereitgestellt. Ein Paketdateiname endet mit der Erweiterung *.sppkg . Das Erstellen des Pakets wird in drei Schritten durchgeführt.
Erstellen
Die Buildphase transpiliert das gesamte TypeScript in JavaScript, generiert TypeScript-Typdeklarationen aus Ihren TypeScript-Dateien und transpiliert SCSS-Dateien (Syntactically Awesome StyleSheets) in CSS. Alle diese Dateien werden im Ordner ./lib in Ihrem Projekt abgelegt.
Der Buildprozess wird gestartet, wenn Sie die Gulp-Aufgabe build von der Befehlszeile aus ausführen:
gulp build
Bündeln
Die nächste Phase ist die Bündelung. In der Phase „Bündelung“ wird ein JavaScript-Bündel und das Manifest für die SharePoint-Framework-Komponente generiert.
Die Bündelung fasst alle in Ihrem Projekt referenzierten JavaScript- und CSS-Dateien zusammen und kombiniert diese in einem einzigen JavaScript-Paket. Mit einer Konfigurationsdatei können Entwickler angeben, ob mehrere Bündel mit bestimmten Komponenten erstellt werden oder ob alle Komponenten in einem einzelnen Bündel gruppiert sind.
Das beliebte Open-Source-Tool webpack wird zum Erstellen der JavaScript-Bündeldatei verwendet. Normalerweise müssen Entwickler eine Konfigurationsdatei erstellen und diese beim Bündeln an WebPack übergeben, aber das SharePoint-Framework erledigt dies für Sie. Wenn die Aufgabe „Bündeln“ ausgeführt wird, erstellt die SharePoint-Framework-Build-Toolkette dynamisch die WebPack-Konfiguration mit Konfigurationsdateien im Projekt.
Die in der Bündelungsphase generierten Dateien werden im Ordner ./dist im Projekt gespeichert.
Der Bündelvorgang wird gestartet, wenn Sie die Gulp-Aufgabe bundle von der Befehlszeile aus ausführen. Wenn Sie den optionalen Befehl --ship oder -p dem Befehl hinzufügen, wird das resultierende Paket und die Manifestdatei durch den Bündelungsprozess minimiert. Durch die Minimierung werden alle Codekommentare und Leerzeichen entfernt, um die kleinstmögliche Datei für die Komponente zu erstellen. Die minimierte Datei wird im Ordner ./release/assets gespeichert.
gulp bundle
Verpacken der Lösung
Die letzte Phase ist das Verpacken. In der Verpackungsphase werden alle Dateien generiert, die für die Bereitstellung Ihrer SharePoint Framework-Lösung in SharePoint erforderlich sind. Diese Dateien werden in einem ZIP-Archiv mit einer sppkg Erweiterung kombiniert, die im Ordner ./sharepoint/solution in Ihrem Projekt gespeichert sind. Diese Datei wird als SharePoint-Paketbezeichnet.
Vor dem Verpacken aller Dateien in das SharePoint-Paket werden in der Verpackungsphase der Lösung mehrere Dateien generiert, die für die Bereitstellung erforderlich sind. Dies umfasst das Erstellen des App-Manifests, Featuredefinitionen, Elementmanifeste und das Sammeln aller Laufzeitdateien wie das Paket, das Komponentenmanifest und die Zeichenfolgenlokalisierungsdateien.
Je nach Projektkonfiguration werden die Laufzeitdateien der Komponenten, einschließlich des Bündels, des Komponentenmanifests, der Lokalisierungsdateien, im Ordner ./release/assets abgelegt oder dem Paket hinzugefügt. Sie können diese Einstellung in der Datei ./config/package-solution.json mit der Eigenschaft includeClientSideAssets konfigurieren. Wenn Sie diese auf true festgelegt haben, werden die Dateien dem Paket hinzugefügt und automatisch zur SharePoint-Bibliothek ClientSideAssets im Stammverzeichnis der Websitesammlung bereitgestellt, in der die App installiert ist. Wenn die -Eigenschaft auf falsefestgelegt ist, sind Sie für die Bereitstellung der Dateien an einem Speicherort verantwortlich, auf den Ihre Benutzer zugreifen können, z. B. in einem Azure Content Delivery Network (CDN).
Der Verpackungsvorgang wird gestartet, wenn Sie die Gulp-Aufgabe package-solution von der Befehlszeile aus ausführen. Wenn Sie dem Befehl den optionalen Befehl "-ship " oder "-p " hinzufügen, ändert der Paketprozess Manifestdateien für die Produktion und legt dabei die URL fest, unter der sich die Laufzeitdateien der Komponente befinden können. Dieser Speicherort wird in der Datei ./config/write-manifests.json definiert.
gulp package-solution
Unterschiedliche Build- und Verpackungsmodi: Debuggen und Produktion
Im vorherigen Abschnitt haben Sie erfahren, dass zwei der gulp-Aufgaben, die beim Erstellen eines SharePoint-Pakets verwendet werden, einen optionalen Switch "--ship " unterstützen. Dieser Schalter gibt an, dass Sie die Lösung für die Produktion bündeln und verpacken. Wenn der Schalter nicht vorhanden ist, bedeutet dies, dass Sie zur Entwicklung und zum Debugging bündeln und verpacken.
Der gulp-Buildtask verfügt über keine Schalter, aber sowohl die Aufgaben bundle als auch package-solution unterstützen den optionalen Switch --ship . Stellen Sie beim Ausführen von bundle und package-solution sicher, dass beide den Schalter --ship verwenden oder nicht verwenden. In anderen Worten: vermeiden Sie es, den Schalter bei der einen Aufgabe zu setzen und bei der anderen nicht.
Debug-Modus
Wenn Sie die Lösung im Debug-Modus bündeln und verpacken, bleiben alle generierten Dateien unminimiert. Dies bedeutet, dass Codekommentare und Leerraum in den generierten Bündel- und Komponenten-Manifestdateien verbleiben.
Der Bündelungsprozess generiert auch JavaScript-Quellzuordnungsdateien, die zum Debuggen der Komponente zur Laufzeit verwendet werden können. Quellzuordnungsdateien verknüpfen das generierte JavaScript mit dem TypeScript-Quellcode, sodass Sie typeScript direkt debuggen können.
Der Debugmodus setzt voraus, dass alle Dateien vom lokalen Webserver bereitgestellt werden. Auch wenn Sie das SharePoint-Paket bereitstellen und installieren, sucht SharePoint auf dem lokalen Webserver nach dem Paket und der Manifestdatei der Komponente.
Produktionsmodus
Wenn Sie die Lösung im Produktionsmodus bündeln und verpacken werden alle generierten Dateien minimiert. Dies bedeutet, dass die Codekommentare und Leerzeichen in den generierten Paket- und Komponentenmanifestdateien entfernt werden, um die kleinsten Dateien zu erstellen, die der Browser zur Laufzeit herunterladen kann.
Im Gegensatz zum Debugmodus generiert der Produktionsmodus keine Quell-Zuordnungsdateien.
Tipp
Entwickler können die webpack-Konfiguration mithilfe der SharePoint Framework-Build-Toolketten-API konfigurieren, um Quell-Zuordnungsdateien zu generieren, wenn sie im Produktionsmodus bündeln.
Der Produktionsmodus setzt voraus, dass alle Dateien aus den Produktionsstandorten bedient werden. Dies ist in der Konfigurationsdatei ./config/write-manifests.json definiert.
Bereitstellen von SharePoint-Objekten
Nachdem Sie das SharePoint-Paket erstellt haben, besteht der nächste Schritt darin, es auf einer SharePoint-Umgebung bereitzustellen. Es gibt zwei Möglichkeiten, SharePoint-Pakete bereitzustellen. Beide Optionen sind SharePoint-App-Kataloge.
SharePoint Online unterstützt zwei Arten von App-Katalogen: mandantenweite und websitesammlungsweite.
Der andere Teil der Paketbereitstellung bezieht sich auf die für die jeweilige Komponente erforderlichen Laufzeitdateien. Dies umfasst das JavaScript-Bündel und die Manifestdateien Ihrer Komponente sowie alle externen Abhängigkeiten. Diese Dateien müssen an einem Hostingspeicherort bereitgestellt werden, auf den alle Benutzer einer Website zugreifen können.
Bereitstellen von Komponenten-Laufzeitdateien
Die Entscheidung, wo diese Laufzeitdateien gehostet werden sollen, gliedert sich in zwei Kategorien. Die erste Kategorie ist „manuelle Bereitstellung“. Mit dieser Option können Sie Dateien manuell an den Zielspeicherort kopieren oder hochladen. Einige Beispiele der Option für die manuelle Bereitstellung umfassen das Office 365 CDN, ein Azure CDN oder einen beliebigen Speicherort auf einer öffentlichen oder internen URL. Die einzige Voraussetzung ist, dass die Dateien für die Benutzer Ihrer Seite zugänglich sein müssen.
Die andere Option zum Bereitstellen der Laufzeitdateien ist automatischer. Ende 2017 hat Microsoft der Datei ./config/package-solution.json die Einstellung includeClientAssets hinzugefügt. Wenn diese Eigenschaft auf „wahr“ festgelegt ist, sind die Laufzeitdateien Bestandteil des SharePoint-Pakets.
Wenn Sie eine App aus dem SharePoint-Paket in einer Websitesammlung installieren, kopiert SharePoint die Laufzeitdateien in die ausgeblendete Bibliothek ClientSideAssets im Stammverzeichnis der Websitesammlung. Die Manifestdatei Ihrer Komponente verfügt über eine spezielle URL, die der SharePoint-Framework zur Laufzeit ersetzt, um auf die ClientSideAssets-Bibliothek zu verweisen.
Diese Bibliothek ist in der Liste der Bibliotheken enthalten, die vom CDN unterstützt werden, wenn das Office 365 CDN aktiviert ist.
Mandantenweite Bereitstellung (oder Websitesammlung)
Sie können Ihre SharePoint-Framework-Komponenten mandantenübergreifend verfügbar machen, indem Sie das Lösungspaket im Mandanten-App-Katalog oder in der Gesamten Websitesammlung installieren, indem Sie das Lösungspaket im App-Katalog der Websitesammlung installieren. Dies kann mithilfe der skipFeatureDeployment Eigenschaft des solution Objekts in der ./config/package-solution.jsonDatei konfiguriert werden.
Wenn der Wert von skipFeatureDeployment auf true festgelegt ist, erhält der Administrator, der das Paket im App-Katalog bereitstellt, die Option, die App zu aktivieren und sie allen Websites hinzuzufügen. Dies gilt für vorhandene Websites und Websites, die in Zukunft erstellt werden.
Wenn der Wert von skipFeatureDeployment auf false festgelegt ist, verfügt der Administrator, der das Paket im App-Katalog bereitstellt, nicht über die zuvor beschriebene Option. Die im Paket enthaltene App muss jedem Standort, an dem die Komponenten verwendet werden, manuell hinzugefügt werden.
Wiederholung – Schritte zur Bereitstellung und Installation
Sehen wir uns die Bereitstellungs- und Installationsschritte für eine SharePoint-Frameworklösung noch einmal an.
Erstellen des Projekts
Der erste Schritt besteht darin, Ihr Projekt mit dem Befehl gulp build zu erstellen. Dadurch werden alle Dateien erstellt, die bei der Bereitstellung Ihrer Lösung verwendet werden.
Generieren des Bündels und des Manifests
Erstellen Sie als nächstes die Komponentenbündel und Manifestdateien für die Produktion mithilfe des Befehls gulp bundle --ship. In diesem Schritt werden die Dateien aus dem Buildschritt erstellt, die in SharePoint bereitgestellt werden sollen.
Generieren des SharePoint-Pakets
Der letzte Schritt beim Verpackungsvorgang ist das Erstellen eines SharePoint-Pakets mit dem Befehl gulp package-solution --ship. In diesem Schritt werden die Ergebnisse aus der Bündelphase übernommen, die erforderlichen Bereitstellungsdateien einschließlich eines App-Manifests und zugehöriger Featuredateien generiert und diese werden dann in ein einziges Archiv mit einer sppkg Erweiterung gepackt.
Hochladen des Pakets in den App-Katalog
Nachdem das Paket erstellt wurde, besteht der nächste Schritt darin, das Paket in einen der SharePoint-App-Kataloge hochzuladen. Ein Teil dieses Vorgangs ist es, dem Paket die Vertrauenswürdigkeit zu bestätigen. Dies signalisiert SharePoint, dass die App in diesem SharePoint-Paket gefahrlos in Ihrer Umgebung ausgeführt werden kann.
In diesem Schritt werden die Komponenten für die Installation und Verwendung innerhalb Ihrer SharePoint-Umgebung vorbereitet.
Installieren der App von der Website „Seiteninhalte“ der Websitesammlung
Wenn der Administrator die mandantenweite Bereitstellung für das Paket nicht aktiviert hat, besteht der letzte Schritt darin, die App aus dem Paket in einer Websitesammlung zu installieren. Dies erfolgt über das Menü Neue > App in der Bibliothek Websiteinhalte in einer Websitesammlung.
Zusammenfassung
In dieser Lektion haben Sie erfahren, wie Sie SharePoint-Framework-Lösungen für die Produktion packen und bereitstellen können.