Schnellstart: Erstellen Ihrer ersten statischen Website mit Azure Static Web Apps

Azure Static Web Apps veröffentlicht eine Website, indem Apps aus einem Coderepository erstellt werden. In dieser Schnellstartanleitung stellen Sie mithilfe der Visual Studio Code-Erweiterung eine Webanwendung in Azure Static Web Apps bereit.

Falls Sie noch nicht über ein Azure-Abonnement verfügen, können Sie ein kostenloses Testkonto erstellen.

Voraussetzungen

Erstellen eines Repositorys

In diesem Artikel wird ein GitHub-Vorlagenrepository verwendet, um Ihnen den Einstieg zu erleichtern. Die Vorlage enthält eine Starter-App, die für die Bereitstellung mit Azure Static Web Apps verwendet wird.

  1. Navigieren Sie zum folgenden Speicherort, um ein neues Repository zu erstellen:
    1. https://github.com/staticwebdev/vanilla-basic/generate
  2. Geben Sie Ihrem Repository den Namen my-first-static-web-app.

Hinweis

Für Azure Static Web Apps wird mindestens eine HTML-Datei benötigt, um eine Web-App zu erstellen. Das in diesem Schritt erstellte Repository enthält nur eine Datei vom Typ index.html.

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

Create repository from template (Repository aus Vorlage erstellen)

Klonen des Repositorys

Wenn Sie das Repository in Ihrem GitHub-Konto erstellt haben, klonen Sie das Projekt mit dem folgenden Befehl auf dem lokalen Computer.

git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app.git

Ersetzen Sie <YOUR_GITHUB_ACCOUNT_NAME> unbedingt durch Ihren GitHub-Benutzernamen.

Öffnen Sie als Nächstes Visual Studio Code, und navigieren Sie zu Datei > Ordner öffnen, um das geklonte Repository im Editor zu öffnen.

Erstellen einer statischen Web-App

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

    Azure-Logo

    Hinweis

    Sie müssen sich in Visual Studio Code bei Azure und GitHub anmelden, um fortzufahren. Wenn Sie noch nicht authentifiziert wurden, werden Sie von der Erweiterung während des Erstellungsprozesses aufgefordert, sich bei beiden Diensten anzumelden.

  2. Wählen Sie unter der Bezeichnung Static Web Apps das Pluszeichen aus.

    Anwendungsname

    Hinweis

    Die Visual Studio Code-Erweiterung für Azure Static Web Apps optimiert den Erstellungsprozess mithilfe einer Reihe von Standardwerten. Wenn Sie eine fein abgestufte Kontrolle über den Erstellungsprozess wünschen, öffnen Sie die Befehlspalette, und wählen Sie Azure Static Web Apps: Static Web App erstellen... (Erweitert) aus.

  3. Die Befehlspalette wird oben im Editor geöffnet. Dort werden Sie aufgefordert, einen Abonnementnamen auszuwählen.

    Wählen Sie Ihr Abonnement aus, und drücken Sie die EINGABETASTE.

    Auswählen eines Azure-Abonnements

  4. Benennen Sie Ihre Anwendung als Nächstes.

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

    Erstellen einer statischen Web-App

  5. Wählen Sie eine Region in Ihrer Nähe aus.

    Hinweis

    Azure Static Web Apps verteilt die statischen Ressourcen global. Die von Ihnen ausgewählte Region bestimmt, wo sich Ihre optionalen Stagingumgebungen und die API-Funktions-App befinden werden.

  6. Wählen Sie die Voreinstellungen aus, die dem Anwendungstyp entsprechen.

    Anwendungsvoreinstellungen: kein Framework

    Geben Sie /src als Speicherort für die Anwendungsdateien ein, und drücken Sie die EINGABETASTE.

    Diese App erzeugt keine Buildausgabe. Vergewissern Sie sich, dass der Speicherort der Buildausgabe leer ist, und drücken Sie die EINGABETASTE.

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

    Bestätigung der Erstellung

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

    Warten auf die Bereitstellung

    Sobald die Bereitstellung abgeschlossen ist, können Sie direkt zu Ihrer Website navigieren.

  8. Wenn Sie die Website im Browser anzeigen möchten, klicken Sie in der Static Web Apps-Erweiterung mit der rechten Maustaste auf das Projekt, und wählen Sie Browsen zur Website aus.

    Browsen zur Website

Bereinigen von Ressourcen

Falls Sie diese Anwendung nicht weiter nutzen möchten, können Sie die Azure Static Web Apps-Instanz über die Erweiterung löschen.

Kehren Sie im Fenster des Visual Studio Code-Explorers zum Abschnitt Static Web Apps zurück, klicken Sie mit der rechten Maustaste auf my-first-static-web-app, und wählen Sie Löschen aus.

Löschen einer App

Nächste Schritte