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.

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

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 (oder wählen Sie es aus, und halten Sie es gedrückt), 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 (oder wählen Sie es aus, und halten Sie es gedrückt), 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 (oder wählen Sie den Ordner aus, und halten Sie diesen gedrückt), und wählen Sie Deploy to Static Website via Azure Storage (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 (oder wählen Sie es aus, und halten Sie es gedrückt), 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 functions.json-Datei zugreifen kann.

1. Klicken Sie mit der rechten Maustaste auf das Azure-Speicherkonto (oder wählen Sie es aus, und halten Sie es gedrückt), 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. Klicken Sie auf Speichern.

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 (oder wählen Sie diesen aus, und halten Sie diesen gedrückt), und wählen Sie Bereitstellung auf statische Website über Azure Storage 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

Sie stellen Updates für Ihre Webanwendung auf die gleiche Weise bereit, wie zuvor beschrieben. Änderungen am Manifest erfordern eine erneute Verteilung Des Manifests an Benutzer. Der hierfür ausgeführte Prozess hängt von Ihrer Veröffentlichungsmethode ab. Weitere Informationen zum Aktualisieren Ihres Add-Ins finden Sie unter Verwalten Ihres Office-Add-Ins.

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