Veröffentlichen eines Office-Add-Ins aus Visual Studio Code in Azure

Eine Möglichkeit zum Veröffentlichen Ihres Office-Add-Ins besteht darin, seine Web-App in Azure bereitzustellen. Dieser Artikel zeigt den End-to-End-Flow für Add-Ins, die nur das Add-In-Manifest verwenden und die mit dem Yeoman-Generator für Office-Add-Ins erstellt wurden.

Veröffentlichen für andere Benutzer

Ein Office-Add-In enthält eine Manifestdatei und eine Web-App. Das Manifest definiert wichtige Details, z. B. die Office-Apps, die Ihr Add-In unterstützen, und die Web-App-URL.

Während der Entwicklung führen Sie das Add-In auf localhost aus. Um sie für andere Benutzer zu veröffentlichen, stellen Sie die Web-App bereit, und aktualisieren Sie das Manifest so, dass es die bereitgestellte URL verwendet.

Sie können diesen Prozess direkt in Visual Studio Code abschließen, indem Sie die Azure Storage-Erweiterung verwenden.

Voraussetzungen

• Ein Office-Add-In-Projekt, das mit dem Yeoman-Generator für Office-Add-Ins erstellt wurde, der nur das Add-In-Manifest verwendet.
• Visual Studio Code.
• Ein Azure Konto und die Berechtigung zum Erstellen Azure Storage-Konten.

Visual Studio Code zum Veröffentlichen verwenden

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

2. Wählen SieErweiterungenanzeigen> (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 Storage-Konten in der Erweiterung angezeigt. Wenn Sie noch keines haben, erstellen Sie mithilfe des Befehls Speicherkonto erstellen eins. Verwenden Sie einen global eindeutigen Kontonamen nur a-z mit und 0-9. Dadurch werden standardmäßig ein Speicherkonto und eine Ressourcengruppe mit demselben Namen in "USA, Westen" erstellt. Sie können diese Einstellungen in Azure-Portal ändern.

   

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 404-Dokumentnamen ä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 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 sie gedrückt), 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 (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. Das Add-In lädt dann von der statischen Website, die Sie bereitgestellt haben.

Bereitstellen von benutzerdefinierten Funktionen für Excel

Wenn Ihr Add-In über benutzerdefinierte Funktionen verfügt, müssen Sie diese im Azure Storage-Konto 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 für den Blob-Dienst 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 eine neue Datei im src Ordner namensweb.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 es gedrückt), 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

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
• CorS-Unterstützung (Cross-Origin Resource Sharing) für Azure Storage