Veröffentlichen eines mit Visual Studio Code entwickelten Add-Ins

Dieser Artikel beschreibt, wie Sie ein Office-Add-In veröffentlichen können, das Sie mit dem Yeoman-Generator erstellt und mit Visual Studio Code (VS Code) oder einem beliebigen anderen Editor entwickelt haben.

Hinweis

• Informationen zum Veröffentlichen eines Office-Add-Ins, das Sie mithilfe von Visual Studio erstellt haben, finden Sie unter Veröffentlichen Ihres Add-Ins mithilfe von Visual Studio.
• Informationen zum Veröffentlichen eines Office-Add-Ins, das Sie mit dem Teams Toolkit erstellt haben, finden Sie unter Bereitstellen der Teams-App in der Cloud und Bereitstellen Ihrer ersten Teams-App. In diesem Artikel geht es um Teams-Registerkarten-Apps, aber er gilt für Office-Add-Ins, die mit dem Teams-Toolkit erstellt wurden.

Veröffentlichen eines Add-Ins, auf das anderer Benutzer zugreifen können.

Ein Office-Add-In besteht aus einer Webanwendung und einer Manifest-Datei. Die Webanwendung definiert die Benutzeroberfläche und die Funktionalität des Add-Ins, während das Manifest den Speicherort der Webanwendung angibt sowie die Einstellungen und Funktionen des Add-Ins definiert.

Während der Entwicklung können Sie das Add-In auf Ihrem lokalen Webserver (localhost) ausführen. Wenn Sie bereit sind, es für andere Benutzer zu veröffentlichen, müssen Sie die Webanwendung bereitstellen und das Manifest aktualisieren, um die URL der bereitgestellten Anwendung anzugeben.

Wenn Ihr Add-In wie gewünscht funktioniert, können Sie es mithilfe der Azure Storage-Erweiterung direkt über Visual Studio Code veröffentlichen.

Visual Studio Code zum Veröffentlichen verwenden

Hinweis

Diese Schritte funktionieren nur für Projekte, die mit dem Yeoman-Generator erstellt wurden und das XML-formatierte Manifest verwenden. Sie gelten nicht, wenn Sie das Add-In mit dem Teams Toolkit oder mit dem Yeoman-Generator erstellt haben und das einheitliche Manifest für Microsoft 365 verwendet wird.

1. Öffnen Sie Ihr Projekt aus dem Stammordner in Visual Studio Code (VS Code).

2. Wählen Sie Erweiterungen anzeigen> (STRG+UMSCHALT+X) aus, um die Ansicht Erweiterungen zu öffnen.

3. Suchen Sie nach der Azure Storage-Erweiterung , und installieren Sie sie.

4. Nach der Installation wird der Aktivitätsleiste ein Azure-Symbol hinzugefügt. Wählen Sie sie aus, um auf die Erweiterung zuzugreifen. Wenn die Aktivitätsleiste ausgeblendet ist, öffnen Sie sie, indem SieDie AktivitätsleisteDarstellung>anzeigen> auswählen.

5. Wählen Sie Bei Azure anmelden aus, um sich bei Ihrem Azure-Konto anzumelden. Wenn Sie noch nicht über ein Azure-Konto verfügen, erstellen Sie eines, indem Sie Azure-Konto erstellen auswählen. Führen Sie die angegebenen Schritte aus, um Ihr Konto einzurichten.

   

6. Sobald Sie angemeldet sind, werden Ihre Azure-Speicherkonten in der Erweiterung angezeigt. Wenn Sie noch nicht über ein Speicherkonto verfügen, erstellen Sie eines mithilfe der Option Speicherkonto erstellen in der Befehlspalette. Geben Sie Ihrem Speicherkonto einen global eindeutigen Namen, und verwenden Sie nur "a-z" und "0-9". Beachten Sie, dass dadurch standardmäßig ein Speicherkonto und eine Ressourcengruppe mit demselben Namen erstellt werden. Das Speicherkonto wird automatisch in "USA, Westen" platziert. Dies kann online über Ihr Azure-Konto angepasst werden.

   

7. Klicken Sie mit der rechten Maustaste auf Ihr Speicherkonto, und wählen Sie Statische Website konfigurieren aus. Sie werden aufgefordert, den Namen des Indexdokuments und den Dokumentnamen 404 einzugeben. Ändern Sie den Namen des Indexdokuments von der Standardeinstellung index.html in taskpane.html. Sie können auch den Dokumentnamen 404 ändern, müssen aber nicht.

8. Klicken Sie erneut mit der rechten Maustaste auf Ihr Speicherkonto, und wählen Sie dieses Mal Statische Website durchsuchen aus. Kopieren Sie im daraufhin geöffneten Browserfenster die Website-URL.

9. Öffnen Sie die Manifestdatei (manifest.xml) Ihres Projekts, und ändern Sie alle Verweise auf Ihre localhost-URL (z https://localhost:3000. B. ) in die URL, die Sie kopiert haben. Dieser Endpunkt ist die statische Website-URL für Ihr neu erstelltes Speicherkonto. Speichern Sie die Änderungen an Ihrer Manifestdatei.

10. Öffnen Sie eine Eingabeaufforderung oder ein Terminalfenster, und wechseln Sie zum Stammverzeichnis Ihres Add-In-Projekts. Führen Sie den folgenden Befehl aus, um alle Dateien für die Produktionsbereitstellung vorzubereiten.

    npm run build
    

    Nach Abschluss des Builds enthält der Ordner Dist (Distribution/Verteilung) im Stammverzeichnis Ihres Add-in-Projekts diejenigen Dateien, die Sie in den nachfolgenden Schritten bereitstellen.

11. Navigieren Sie in VS Code zum Explorer, klicken Sie mit der rechten Maustaste auf den Ordner dist, und wählen Sie Auf statischer Website über Azure Storage bereitstellen aus. Wenn Sie dazu aufgefordert werden, wählen Sie das zuvor erstellte Speicherkonto aus.

    

12. Klicken Sie nach Abschluss der Bereitstellung mit der rechten Maustaste auf das zuvor erstellte Speicherkonto, und wählen Sie Statische Website durchsuchen aus. Dadurch wird die statische Website geöffnet und der Aufgabenbereich angezeigt.

13. Laden Sie schließlich die Manifestdatei quer , und das Add-In wird von der statischen Website geladen, die Sie gerade bereitgestellt haben.

Bereitstellen von benutzerdefinierten Funktionen für Excel

Wenn Ihr Add-In über benutzerdefinierte Funktionen verfügt, sind einige weitere Schritte erforderlich, um sie für das Azure Storage-Konto zu aktivieren. Aktivieren Sie zunächst CORS, damit Office auf die Datei functions.json zugreifen kann.

1. Klicken Sie mit der rechten Maustaste auf das Azure-Speicherkonto, und wählen Sie Im Portal öffnen aus.

2. Wählen Sie in der Gruppe Einstellungen die Option Ressourcenfreigabe (CORS) aus. Sie können auch das Suchfeld verwenden, um dies zu finden.

3. Erstellen Sie eine neue CORS-Regel mit den folgenden Einstellungen.

   Eigenschaft	Wert
   Zulässige Ursprünge	*
   Zulässige Methoden	GET
   Zulässige Header	*
   Verfügbar gemachte Header	Access-Control-Allow-Origin
   Max. Alter	200

4. Wählen Sie Speichern aus.

Achtung

Bei dieser CORS-Konfiguration wird davon ausgegangen, dass alle Dateien auf Ihrem Server für alle Domänen öffentlich verfügbar sind.

Fügen Sie als Nächstes einen MIME-Typ für JSON-Dateien hinzu.

1. Erstellen Sie im Ordner /src eine neue Datei mit dem Namen web.config.

2. Fügen Sie den folgenden XML-Code ein, und speichern Sie die Datei.

   <?xml version="1.0"?>
   <configuration>
     <system.webServer>
       <staticContent>
         <mimeMap fileExtension=".json" mimeType="application/json" />
       </staticContent>
     </system.webServer>
   </configuration> 
   

3. Öffnen Sie die Datei webpack.config.js.

4. Fügen Sie den folgenden Code zur Liste von plugins hinzu, um die web.config in das Paket zu kopieren, wenn der Build ausgeführt wird.

   new CopyWebpackPlugin({
     patterns: [
     {
       from: "src/web.config",
       to: "src/web.config",
     },
    ],
   }),
   

5. Öffnen Sie eine Eingabeaufforderung, und wechseln Sie zum Stammverzeichnis Ihres Add-In-Projekts. Führen Sie dann den folgenden Befehl aus, um alle Dateien für die Bereitstellung vorzubereiten.

   npm run build
   

   Nach Abschluss des Builds enthält der Ordner dist im Stammverzeichnis Ihres Add-In-Projekts die Dateien, die Sie bereitstellen.

6. Klicken Sie zum Bereitstellen im VS Code-Explorer mit der rechten Maustaste auf den Ordner dist, und wählen Sie Auf statischer Website über Azure Storage bereitstellen aus. Wenn Sie dazu aufgefordert werden, wählen Sie das zuvor erstellte Speicherkonto aus. Wenn Sie den Ordner dist bereits bereitgestellt haben, werden Sie aufgefordert, die Dateien im Azure-Speicher mit den neuesten Änderungen zu überschreiben.

Bereitstellen von Updates

Wenn Sie Features hinzufügen oder Fehler in Ihrem Add-In beheben, müssen Sie die Updates bereitstellen. Wenn Ihr Add-In von einem oder mehreren Administratoren in ihren Organisationen bereitgestellt wird, müssen einige Manifeständerungen vom Administrator den Updates zustimmen. Benutzer werden für das Add-In gesperrt, bis die Zustimmung erteilt wurde. Für die folgenden Manifeständerungen muss der Administrator erneut zustimmen.

• Änderungen an angeforderten Berechtigungen. Weitere Informationen finden Sie unter Anfordern von Berechtigungen für die API-Verwendung in Add-Ins und Grundlegendes zu Outlook-Add-In-Berechtigungen.
• Zusätzliche oder geänderte Bereiche. (Nicht zutreffend, wenn das Add-In das einheitliche Manifest für Microsoft 365 verwendet.)
• Zusätzliche oder geänderte Outlook-Ereignisse.

Hinweis

Wenn Sie eine Änderung am Manifest vornehmen, müssen Sie die Versionsnummer des Manifests erhöhen.

• Wenn das Add-In das XML-Manifest verwendet, finden Sie weitere Informationen unter Version-Element.
• Wenn das Add-In das einheitliche Manifest verwendet, finden Sie weitere Informationen unter Versionseigenschaft.

Siehe auch

• Office Add-Ins mit Visual Studio Code entwickeln
• Bereitstellen und Veröffentlichen Ihres Office-Add-Ins
• Unterstützung der ressourcenübergreifenden Ressourcenfreigabe (Cross-Origin Resource Sharing, CORS) für Azure Storage