Übung: Erste Schritte

  • 7 Minuten

In dieser Übung erstellen Sie eine Azure Static Web Apps-Instanz sowie eine GitHub Action, die Ihre Anwendung automatisch kompiliert und veröffentlicht.

In diesem Modul wird Ihnen über die Azure-Sandbox ein kostenloses, temporäres Azure-Abonnement zur Verfügung zu stellen, mit dem Sie diese Übung durcharbeiten können. Sie müssen die Sandbox oben auf dieser Seite aktivieren, ehe Sie mit dieser Übung fortfahren können.

Tipp

Wenn Probleme mit Ihren Knotenabhängigkeiten auftreten, stellen Sie sicher, dass der Knotenversions-Manager installiert ist und Sie zu einer früheren Version wechseln können.

Erstellen eines Repositorys

Als Nächstes erstellen Sie mithilfe eines GitHub-Vorlagenrepositorys ein neues Repository. Mehrere Vorlagen sind verfügbar. Jede enthält eine Starter-App, die mit einem anderen Front-End-Framework erstellt wurde.

  1. Wechseln Sie zur Seite Aus Vorlage erstellen für das Vorlagenrepository.

    • Wenn Sie die Fehlermeldung „404: Seite nicht gefunden“ erhalten, melden Sie sich bei GitHub an, und versuchen Sie es noch einmal.

  2. Wenn Sie aufgefordert werden, einen Besitzer anzugeben, wählen Sie eines ihrer GitHub-Konten aus.

  3. Geben Sie Ihrem Repository den Namen my-static-web-app-authn.

  4. Wählen Sie Create repository from template (Repository aus Vorlage erstellen) aus.

Lokales Klonen Ihrer App

Sie haben soeben in Ihrem GitHub-Konto ein GitHub-Repository mit dem Namen my-static-web-app-authn erstellt. Nun klonen Sie das Repository und führen den Code lokal auf Ihrem Computer aus.

  1. Öffnen Sie ein Terminal auf dem Computer.

  2. Klonen Sie zunächst das GitHub-Repository auf Ihren Computer.

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-authn

  3. Wechseln Sie zum Ordner für Ihren Quellcode.

    cd my-static-web-app-authn

Lokales Konfigurieren von CORS

Beim Veröffentlichen in Azure Static Web Apps müssen Sie sich keine Gedanken über CORS (Cross-Origin Resource Sharing) machen. Azure Static Web Apps konfiguriert Ihre App automatisch so, dass Sie mit der API in Azure über einen Reverseproxy kommunizieren kann. Bei lokaler Ausführung hingegen müssen Sie CORS so konfigurieren, dass die Kommunikation zwischen Ihrer Web-App und Ihrer API ermöglicht wird.

Weisen Sie Azure Functions nun an, dass die Web-App HTTP-Anforderungen an die API auf dem Computer senden soll.

  1. Erstellen Sie eine Datei mit dem Namen api/local.settings.json.

  2. Fügen Sie der Datei den folgenden Inhalt hinzu:

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Hinweis

Die Datei local.settings.json ist in der Datei .gitignore aufgelistet. Daher kann sie nicht per Push an GitHub übertragen werden. Dies liegt daran, dass Sie Geheimnisse in dieser Datei speichern könnten, die nicht in GitHub übertragen werden sollten. Daher mussten Sie die Datei erstellen, als Sie Ihr Repository aus der Vorlage erstellt haben.

Ausführen der API

Der Ordner api enthält das Azure Functions-Projekt mit den HTTP-Endpunkten für die Web-App. Beginnen Sie mit der lokalen Ausführung der API, indem Sie die folgenden Schritte ausführen:

Hinweis

Installieren Sie Azure Functions Core Tools, damit Sie Azure Functions lokal ausführen können.

  1. Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie F1 drücken.

  2. Geben Sie Terminal: Neues integriertes Terminal erstellen ein, und wählen Sie den angezeigten Eintrag aus.

  3. Wechseln Sie zum Ordner api:

    cd api

  4. Führen Sie die Azure Functions-App lokal aus:

    func start

Ausführen der Web-App

  1. Navigieren Sie anschließend wie unten dargestellt zum Ordner Ihres bevorzugten Front-End-Frameworks:

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  2. Installieren Sie nun die Anwendungsabhängigkeiten.

    npm install

  3. Führen Sie schließlich die Front-End-Clientanwendung aus.

    npm start

    npm start

    npm run dev

    npm run serve

Navigieren zu Ihrer App

Schauen Sie sich nun an, wie die Anwendung lokal ausgeführt wird. Jede Front-End-Anwendung wird an einem anderen Port ausgeführt.

  1. Klicken Sie auf den Link, um zu Ihrer Anwendung zu navigieren.

  1. Navigieren Sie zu http://localhost:4200.

    Screenshot: Benutzeroberfläche Ihrer Angular-Web-App

  1. Navigieren Sie zu http://localhost:3000.

    Screenshot: Benutzeroberfläche Ihrer React-Web-App

  1. Navigieren Sie zu http://localhost:5000.

    Screenshot: Benutzeroberfläche Ihrer Svelte-Web-App

  1. Navigieren Sie zu http://localhost:8080.

    Screenshot: Benutzeroberfläche Ihrer Vue-Web-App

Ihre App sollte eine Produktliste anzeigen.

  1. Beenden Sie nun die ausgeführte App, indem Sie im Terminal STRG+C drücken.

Sie haben Ihre Anwendung erstellt, und sie wird nun lokal in Ihrem Browser ausgeführt.

Im nächsten Schritt veröffentlichen Sie Ihre Anwendung in Azure Static Web Apps.

Erstellen einer statischen Web-App

Nachdem Sie Ihr GitHub-Repository erstellt haben, können Sie jetzt mithilfe der Azure Static Web Apps-Erweiterung für Visual Studio Code eine Static Web Apps-Instanz erstellen.

Installieren der Azure Static Web Apps-Erweiterung für Visual Studio Code

  1. Navigieren Sie zum Visual Studio Marketplace, und installieren Sie die Erweiterung Azure Static Web Apps für Visual Studio Code.

  2. Wenn die Registerkarte der Erweiterung in Visual Studio Code geladen wird, wählen Sie Installieren aus.

  3. Wählen Sie nach der Installation Erneut laden aus.

Anmelden bei Azure in Visual Studio Code

  1. Melden Sie sich in Visual Studio Code bei Azure an, indem Sie auf Ansicht>Befehlspalette klicken und Folgendes eingeben: Azure: Anmelden.

    Wichtig

    Melden Sie sich bei Azure mit dem Konto an, mit dem die Sandbox erstellt wurde. Die Sandbox ermöglicht den Zugriff auf ein Concierge-Abonnement.

  2. Führen Sie die Anweisungen aus, um den bereitgestellten Code zu kopieren und in den Webbrowser einzufügen, wodurch Ihre Visual Studio Code-Sitzung authentifiziert wird.

Wählen Sie Ihr Abonnement aus.

  1. Öffnen Sie Visual Studio Code, und navigieren Sie zu Datei > Öffnen, um das Repository zu öffnen, das Sie im Editor auf den Computer geklont haben.

  2. Vergewissern Sie sich, dass Sie Ihre Azure-Abonnements so gefiltert haben, dass Sie das Concierge-Abonnement einschließen, indem Sie die Befehlspalette F1 öffnen, Azure: Select Subscriptionseingeben und dann die EINGABETASTE drücken.

  3. Wählen Sie Concierge-Abonnement aus, und klicken drücken Sie die EINGABETASTE.

    Screenshot: Filtern nach Abonnement

Erstellen einer statischen Web-App mit Visual Studio Code

  1. Öffnen Sie Visual Studio Code, und navigieren Sie zu Datei > Öffnen, um das Repository zu öffnen, das Sie im Editor auf den Computer geklont haben.

  2. Wählen Sie in Visual Studio Code auf der Aktivitätsleiste das Azure-Logo aus, um das Fenster mit den Azure-Erweiterungen zu öffnen.

    Screenshot: Das Azure-Logo in VS Code

    Hinweis

    Azure- und GitHub-Anmeldedaten sind erforderlich. Wenn Sie sich noch nicht über Visual Studio Code bei Azure und GitHub angemeldet haben, werden Sie von der Erweiterung aufgefordert, sich während der Erstellung bei beiden Komponenten anzumelden.

  3. Zeigen Sie mit dem Mauszeiger auf die Bezeichnung Static Web Apps, und klicken Sie auf + (Pluszeichen).

    Screenshot: Eingegebener Anwendungsname

  4. Wenn die Befehlspalette oben im Editor geöffnet wird, wählen Sie Concierge-Abonnement aus, und drücken Sie dann die EINGABETASTE.

    Screenshot: Auswahl eines Abonnements

  5. Geben Sie my-static-web-app-authn ein, und drücken Sie die EINGABETASTE.

    Screenshot: Erstellen einer Static Web Apps-Instanz

  6. Wählen Sie die Region aus, die Ihnen am nächsten liegt, und drücken Sie die EINGABETASTE.

    Screenshot: Standortauswahl

  7. Wählen Sie die entsprechende Frameworkoption aus, und drücken Sie die EINGABETASTE.

  1. Wählen Sie angular-app als Speicherort für den Anwendungscode aus, und drücken Sie die EINGABETASTE.

    Screenshot: Speicherort des Angular-Anwendungscodes

  2. Geben Sie dist/angular-app als Ausgabespeicherort ein, in dem Dateien für die Produktion in der App erstellt werden, und drücken Sie die EINGABETASTE.

    Screenshot: Pfad der Angular-App-Dateien

  1. Wählen Sie react-app als Speicherort für den Anwendungscode aus, und drücken Sie die EINGABETASTE.

    Screenshot: Speicherort des React-Anwendungscodes

  2. Geben Sie build als Ausgabespeicherort ein, in dem Dateien für die Produktion in der App erstellt werden, und drücken Sie die EINGABETASTE.

    Screenshot: Pfad der React-App-Dateien

  1. Wählen Sie svelte-app als Speicherort für den Anwendungscode aus, und drücken Sie die EINGABETASTE.

    Screenshot: Speicherort des Svelte-Anwendungscodes

  2. Geben Sie public als Ausgabespeicherort ein, in dem Dateien für die Produktion in der App erstellt werden, und drücken Sie die EINGABETASTE.

    Screenshot: Pfad der Svelte-App-Dateien

  1. Wählen Sie vue-app als Speicherort für den Anwendungscode aus, und drücken Sie die EINGABETASTE.

    Screenshot: Speicherort des Vue-Anwendungscodes

  2. Geben Sie dist als Ausgabespeicherort ein, in dem Dateien für die Produktion in der App erstellt werden, und drücken Sie die EINGABETASTE.

    Screenshot: Pfad der Vue-App-Dateien

Hinweis

Ihr Repository unterscheidet sich möglicherweise ein wenig von den Repositorys, die Sie in der Vergangenheit verwendet haben. Es enthält vier verschiedene Apps in vier verschiedenen Ordnern. Jeder Ordner enthält eine App, die in einem anderen JavaScript-Framework erstellt wurde. Normalerweise verfügen Sie über eine App im Stammverzeichnis Ihres Repository und geben / für den App-Pfad an. Dies ist ein gutes Beispiel dafür, warum Sie die Speicherorte mit Azure Static Web Apps im ersten Schritt konfigurieren können. Sie erhalten damit die vollständige Kontrolle über die Erstellung der App.

  1. Nach Erstellung der App wird eine Bestätigungsbenachrichtigung in Visual Studio Code angezeigt.

    Screenshot: Popupfenster „Actions auf GitHub öffnen“ und Fenster „Konfiguration anzeigen/bearbeiten“

Während der Ausführung der Bereitstellung meldet die Visual Studio Code-Erweiterung Ihnen den Buildstatus.

:::image type="content" source="../media/extension-waiting-for-deployment.png" alt-text="Screenshot showing the waiting for deployment button.":::

  1. Sie können den Fortschritt der Bereitstellung mithilfe von GitHub Actions anzeigen, indem Sie das Menü Actions (Aktionen) erweitern.

    Screenshot des GitHub Actions-Menüs in VS Code

    Nachdem die Bereitstellung abgeschlossen ist, können Sie direkt zu Ihrer Website wechseln.

  2. Klicken Sie mit der rechten Maustaste auf das Projekt in der Static Web Apps-Erweiterung, und wählen Sie Website durchsuchen aus, um die Website im Browser zu öffnen.

    Screenshot: Schaltfläche „Website durchsuchen“

Herzlichen Glückwunsch! Sie haben Ihre App in Azure Static Web Apps bereitgestellt.

Hinweis

Machen Sie sich keine Sorgen, wenn auf der Webseite angezeigt wird, dass die App noch nicht kompiliert und bereitgestellt wurde. Aktualisieren Sie den Browser nach einer Minute. Die GitHub-Aktion wird automatisch ausgeführt, wenn die Azure Static Web Apps-Instanz erstellt wird. Wenn Ihnen die Begrüßungsseite angezeigt wird, ist die App noch immer bereitgestellt.

Pullen der Änderungen aus GitHub

Pullen Sie die neuesten Änderungen aus GitHub, um die Workflowdatei herunterzuladen, die von Azure Static Web Apps erstellt wurde:

  1. Öffnen Sie die Befehlspalette, indem Sie F1 drücken.

  2. Geben Sie Git:Pull ein, wählen Sie den angezeigten Eintrag aus, und drücken Sie die EINGABETASTE.

Nächste Schritte

Als Nächstes erfahren Sie, wie Sie die Benutzerauthentifizierung in Ihre App integrieren.