Schnellstart: Erstellen Ihrer ersten statischen Web-App

Azure Static Web Apps veröffentlicht eine Website in einer Produktionsumgebung, indem Apps aus einem Azure DevOps- oder GitHub-Repository erstellt werden. In dieser Schnellstartanleitung stellen Sie über das Azure-Portal eine Webanwendung in Azure Static Web Apps bereit.

Voraussetzungen

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

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

Erstellen eines Repositorys

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

Kein Framework

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.

Angular

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

Blazor

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

React

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

Vue

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

Klicken Sie auf Create repository (Repository erstellen).

Erstellen eines Repositorys

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

1. Melden Sie sich bei Azure DevOps an.

2. Wählen Sie Neues Repository aus.

3. Erweitern Sie im Fenster Neues Projekt erstellen das Menü Erweitert, und nehmen Sie folgende Auswahl vor:

   Einstellung	Wert
   Project	Geben Sie my-first-web-static-app ein.
   Sichtbarkeit	Wählen Sie Privat.
   Versionskontrolle	Wählen Sie Git aus.
   Arbeitselementprozess	Wählen Sie die Option aus, die ihren Entwicklungsmethoden am besten entspricht.

4. Klicken Sie auf Erstellen.

5. Wählen Sie das Menüelement Repos.

6. Wählen Sie das Menüelement Dateien.

7. Wählen Sie auf der Karte Repository importieren die Option Importieren aus.

8. Kopieren Sie eine Repository-URL für das Framework Ihrer Wahl, und fügen Sie sie in das Feld URL klonen ein.

   Kein Framework

   https://github.com/staticwebdev/vanilla-basic.git

   Angular

   https://github.com/staticwebdev/angular-basic.git

   Blazor

   https://github.com/staticwebdev/blazor-basic.git

   React

   https://github.com/staticwebdev/react-basic.git

   Vue

   https://github.com/staticwebdev/vue-basic.git

9. Wählen Sie Importieren aus, und warten Sie, bis der Importvorgang abgeschlossen ist.

Erstellen einer statischen Web-App

Nachdem das Repository nun erstellt wurde, können Sie im Azure-Portal eine statische Web-App erstellen.

1. Öffnen Sie das 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.

Konfigurieren Sie im Abschnitt Grundlagen zunächst Ihre neue App, und verknüpfen Sie sie mit einem GitHub-Repository.

Einstellung	Wert
Subscription	Wählen Sie Ihr Azure-Abonnement.
Ressourcengruppe	Wählen Sie den Link Neu erstellen aus, und geben Sie in das Textfeld static-web-apps-test ein.
Name	Geben Sie my-first-static-web-app in das Textfeld ein.
Plantyp	Wählen Sie Free aus.
Details zu Azure Functions und Staging	Wählen Sie die Region aus, die Ihnen am nächsten ist.
`Source`	Wählen Sie GitHub aus.

Wählen Sie Mit GitHub anmelden aus, und authentifizieren Sie sich bei GitHub.

Geben Sie nach der Anmeldung mit GitHub die Informationen zum Repository ein.

Einstellung	Wert
Organization	Wählen Sie Ihre Organisation aus.
Repository	Wählen Sie my-first-web-static-app aus.
Verzweigung	Wählen Sie <branch_name> aus.

Hinweis

Wenn keine Repositorys angezeigt werden:

• Sie müssen möglicherweise Azure Static Web Apps in GitHub autorisieren. Navigieren Sie zu Ihrem GitHub-Repository und dann zu Einstellungen > Anwendungen > Autorisierte OAuth-Apps, und wählen Sie Azure Static Web Apps und dann Zuweisen aus.
• Möglicherweise müssen Sie Azure Static Web Apps in Ihrer Azure DevOps-Organisation autorisieren. Sie müssen Besitzer der Organisation sein, um die Berechtigungen erteilen zu können. Fordern Sie über OAuth Zugriff auf Anwendungen von Drittanbietern an. Weitere Informationen finden Sie unter Autorisieren des Zugriffs auf REST-APIs mit OAuth 2.0.

Konfigurieren Sie im Abschnitt Grundlagen zunächst Ihre neue App, und verknüpfen Sie sie mit einem Azure DevOps-Repository.

Einstellung	Wert
Subscription	Wählen Sie Ihr Azure-Abonnement.
Ressourcengruppe	Wählen Sie den Link Neu erstellen aus, und geben Sie in das Textfeld static-web-apps-test ein.
Name	Geben Sie my-first-static-web-app in das Textfeld ein.
Plantyp	Wählen Sie Free aus.
Details zu Azure Functions und Staging	Wählen Sie die Region aus, die Ihnen am nächsten ist.
`Source`	Wählen Sie DevOps aus.
Organization	Wählen Sie Ihre Organisation aus.
Project	Wählen Sie Ihr Projekt aus.
Repository	Wählen Sie my-first-web-static-app aus.
Verzweigung	Wählen Sie <branch_name> aus.

Hinweis

Stellen Sie sicher, dass der verwendete Branch nicht geschützt ist, und dass Sie über ausreichende Berechtigungen zum Ausgeben eines push-Befehls verfügen. Navigieren Sie zur Überprüfung zu Ihrem DevOps-Repository, wechseln Sie zu Repos ->Branches, und wählen Sie Weitere Optionen aus. Wählen Sie als Nächstes Ihren Branch und dann Branchrichtlinien aus, um sicherzustellen, dass die erforderlichen Richtlinien nicht aktiviert sind.

Fügen Sie im Abschnitt Builddetails die für Ihr bevorzugtes Front-End-Framework spezifischen Konfigurationsdetails hinzu.

Kein Framework

1. Wählen Sie Benutzerdefiniert aus der Dropdownliste Buildvoreinstellungen aus.
2. Geben Sie ./src in das Feld App-Speicherort ein.
3. Lassen Sie das Feld API-Speicherort leer.
4. Geben Sie ./src in das Feld „Speicherort für App-Artefakt“ ein.

Angular

1. Wählen Sie Angular aus der Dropdownliste Buildvoreinstellungen aus.
2. Behalten Sie den Standardwert im Feld App-Speicherort bei.
3. Lassen Sie das Feld API-Speicherort leer.
4. Geben Sie im Feld Speicherort für App-Artefakte den Speicherort dist/angular-basic ein.

Blazor

1. Wählen Sie Blazor aus der Dropdownliste Buildvoreinstellungen aus.
2. Behalten Sie im Feld App-Speicherort den Standardwert Client bei.
3. Lassen Sie das Feld API-Speicherort leer.
4. Behalten Sie im Feld Speicherort für App-Artefakte den Standardwert wwwroot bei.

React

1. Wählen Sie React aus der Dropdownliste Buildvoreinstellungen aus.
2. Behalten Sie den Standardwert im Feld App-Speicherort bei.
3. Lassen Sie das Feld API-Speicherort leer.
4. Geben Sie im Feld Speicherort für App-Artefakte den Speicherort build ein.

Vue

1. Wählen Sie Vue.js aus der Dropdownliste Buildvoreinstellungen aus.
2. Behalten Sie den Standardwert im Feld App-Speicherort bei.
3. Lassen Sie das Feld API-Speicherort leer.
4. Behalten Sie den Standardwert im Feld Speicherort für App-Artefakte bei.

Klicken Sie auf Überprüfen + erstellen.

Hinweis

Sie können die Workflowdatei bearbeiten, um diese Werte nach der Erstellung der App zu ändern.

Wählen Sie Erstellen aus.

Wählen Sie Zu Ressource wechseln aus.

Anzeigen der Website

Für die Bereitstellung einer statischen App gelten zwei Aspekte. Im ersten werden die zugrunde liegenden Azure-Ressourcen erstellt, aus denen Ihre App besteht. Der zweite besteht aus einem Workflow, mit dem Ihre Anwendung erstellt und veröffentlicht wird.

Bevor Sie zu Ihrer neuen statischen Website navigieren können, muss zuvor der Buildvorgang für die Bereitstellung abgeschlossen sein.

Im Fenster Übersicht von Azure Static Web Apps werden einige Links angezeigt, die Ihnen als Hilfe bei der Interaktion mit Ihrer Web-App dienen.

1. Wenn Sie das Banner Hier klicken, um den Status Ihrer GitHub Actions-Ausführungen zu überprüfen auswählen, gelangen Sie zu den GitHub Actions-Instanzen, die für Ihr Repository ausgeführt werden. Nachdem Sie sich vergewissert haben, dass der Bereitstellungsauftrag abgeschlossen ist, können Sie über die generierte URL zu Ihrer Website wechseln.

2. Nachdem der GitHub Actions-Workflow abgeschlossen ist, können Sie den URL-Link auswählen, um die Website auf einer neuen Registerkarte zu öffnen.

Nachdem der Workflow abgeschlossen ist, können Sie den Link URL auswählen, um die Website in einer neuen Registerkarte zu öffnen.

Bereinigen von Ressourcen

Falls Sie diese Anwendung nicht weiter nutzen möchten, können Sie die Azure Static Web Apps-Instanz mit den folgenden Schritten löschen:

1. Öffnen Sie das Azure-Portal.
2. Suchen Sie über die obere Suchleiste nach my-first-web-static-app.
3. Wählen Sie den App-Namen aus.
4. Klicken Sie auf Löschen.
5. Klicken Sie auf Ja, um die Löschaktion zu bestätigen (diese Aktion kann einige Minuten dauern).

Nächste Schritte

Hinzufügen einer API zu Azure Static Web Apps (Vorschauversion) mit Azure Functions