Tutorial: Veröffentlichen von Azure Static Web Apps mit Azure DevOps

In diesem Artikel erfahren Sie, wie Sie Azure DevOps für Bereitstellungen in Azure Static Web Apps verwenden.

In diesem Tutorial lernen Sie Folgendes:

  • Einrichten einer Azure Static Web Apps-Website
  • Erstellen einer Azure-Pipeline zum Erstellen und Veröffentlichen einer statischen Web-App

Voraussetzungen

  • Aktives Azure-Konto: Sollten Sie über kein Konto verfügen, können Sie ein kostenloses Konto erstellen.
  • Azure DevOps-Projekt: Sollten Sie über kein Projekt verfügen, können Sie ein kostenloses Projekt erstellen.
    • Azure DevOps beinhaltet Azure-Pipelines. Informationen zu den ersten Schritten mit Azure-Pipelines, finden Sie bei Bedarf unter Erstellen Ihrer ersten Pipeline.
    • Die Static Web-App Pipeline-Task funktioniert derzeit nur auf Linux-Computern. Stellen Sie beim Ausführen der unten genannten Pipeline sicher, dass sie auf einem virtuellen Linux-Computer ausgeführt wird.

Erstellen einer statischen Web-App in Azure DevOps

Hinweis

Wenn Sie bereits über eine App in Ihrem Repository verfügen, können Sie direkt mit dem nächsten Abschnitt fortfahren.

  1. Navigieren Sie zu Ihrem Repository in Azure Repos.

  2. Wählen Sie Importieren aus, um mit dem Importieren einer Beispielanwendung zu beginnen.

    DevOps-Repository

  3. Geben Sie unter URL klonen Folgendes ein: https://github.com/staticwebdev/vanilla-api.git.

  4. Klicken Sie auf Import (Importieren).

Erstellen einer statischen Web-App

  1. Navigieren Sie zum Azure-Portal.

  2. Klicken Sie auf Ressource erstellen.

  3. Suchen Sie nach Static Web Apps.

  4. Klicken Sie auf statische Web-Apps.

  5. Klicken Sie auf Erstellen.

  6. Erstellen Sie eine neue statische Web-App mit den folgenden Werten.

    Bereitstellungsdetails: Option „Andere“

    Einstellung Wert
    Subscription Den Namen Ihres Azure-Abonnements
    Ressourcengruppe Wählen Sie einen vorhandenen Gruppennamen aus, oder erstellen Sie eine neue.
    Name Geben Sie myDevOpsApp ein.
    Typ des Hostingplans Wählen Sie Free aus.
    Region Wählen Sie die Region aus, die Ihnen am nächsten ist.
    Source Wählen Sie Andere (Other) aus.
  7. Klicken Sie auf Überprüfen + erstellen.

  8. Klicken Sie auf Erstellen.

  9. Wählen Sie nach erfolgreicher Bereitstellung Zu Ressource wechseln aus.

  10. Wählen Sie Bereitstellungstoken verwalten aus.

  11. Kopieren Sie das Bereitstellungstoken, und fügen Sie seinen Wert in einen Text-Editor ein. Es wird später auf einem anderen Bildschirm benötigt.

    Hinweis

    Dieser Wert wird auf diese Weise zwischengespeichert, da in den nächsten Schritten weitere Werte kopiert und eingefügt werden müssen.

    Bereitstellungstoken

Erstellen der Pipelineaufgabe in Azure DevOps

  1. Navigieren Sie zu dem zuvor erstellten Repository in Azure Repos.

  2. Wählen Sie Build einrichten aus.

    Buildpipeline

  3. Wählen Sie auf dem Bildschirm Pipeline konfigurieren die Option Starterpipeline aus.

    Konfigurieren der Pipeline

  4. Kopieren Sie den folgenden YAML-Code, und ersetzen Sie die generierte Konfiguration in Ihrer Pipeline durch diesen Code.

    trigger:
      - main
    
    pool:
      vmImage: ubuntu-latest
    
    steps:
      - checkout: self
        submodules: true
      - task: AzureStaticWebApp@0
        inputs:
          app_location: '/src'
          api_location: 'api'
          output_location: '/src'
          azure_static_web_apps_api_token: $(deployment_token)
    

    Hinweis

    Falls Sie nicht die Beispiel-App verwenden, müssen die Werte für app_location, api_location und output_location an die Werte in Ihrer Anwendung angepasst werden.

    Eigenschaft BESCHREIBUNG Beispiel Erforderlich
    app_location Speicherort Ihres Anwendungscodes. Geben Sie / ein, wenn sich Ihr Quellcode für die Anwendung im Stammverzeichnis des Repositorys befindet, oder /app, wenn Ihr Anwendungscode in einem Verzeichnis mit dem Namen app enthalten ist. Ja
    api_location Speicherort Ihres Azure Functions-Codes. Geben Sie /api ein, wenn sich Ihr App-Code in einem Ordner mit dem Namen api befindet. Wenn im Ordner keine Azure Functions-App erkannt wird, tritt für den Buildvorgang kein Fehler auf. Im Workflow wird angenommen, dass Sie keine API benötigen. Nein
    output_location Speicherort des Verzeichnisses für die Buildausgabe relativ zu app_location. Wenn sich Ihr Quellcode für die Anwendung unter /app befindet und vom Buildskript Dateien im Ordner /app/build ausgegeben werden, legen Sie build als Wert für output_location fest. Nein

    Der Wert azure_static_web_apps_api_token wird selbst verwaltet und manuell konfiguriert.

  5. Wählen Sie Variablen aus.

  6. Wählen Sie New variable aus.

  7. Nennen Sie die Variable deployment_token (gemäß dem Namen im Workflow).

  8. Kopieren Sie das Bereitstellungstoken, das Sie zuvor in einen Text-Editor eingefügt haben.

  9. Fügen Sie das Bereitstellungstoken in das Feld Wert ein.

    Variablentoken

  10. Aktivieren Sie das Kontrollkästchen Diesen Geheimniswert beibehalten.

  11. Wählen Sie OK aus.

  12. Wählen Sie Speichern aus, um zu Ihrem Pipeline-YAML-Code zurückzukehren.

  13. Wählen Sie Speichern und ausführen aus, um das Dialogfeld Speichern und ausführen zu öffnen.

    Pipeline

  14. Wählen Sie Speichern und ausführen aus, um die Pipeline auszuführen.

  15. Navigieren Sie nach erfolgreicher Bereitstellung zur Übersicht für Azure Static Web Apps. Dort finden Sie Links zur Bereitstellungskonfiguration. Wie Sie sehen, verweist der Link Quelle jetzt auf den Branch und den Standort des Azure DevOps-Repositorys.

  16. Wählen Sie die URL aus, um die neu bereitgestellte Website anzuzeigen.

    Bereitstellungsspeicherort

Bereinigen von Ressourcen

Löschen Sie die Ressourcengruppe, um die bereitgestellten Ressourcen zu bereinigen.

  1. Wählen Sie im Azure-Portal im linken Menü die Option Ressourcengruppe aus.
  2. Geben Sie den Namen der Ressourcengruppe in das Feld Nach Name filtern ein.
  3. Wählen Sie den Namen der Ressourcengruppe aus, die Sie in diesem Tutorial verwendet haben.
  4. Wählen Sie Ressourcengruppe löschen aus dem Menü ganz oben aus.

Nächste Schritte