Übung: Erste Schritte

Abgeschlossen

In dieser Übung erstellen Sie eine Azure Static Web Apps-Instanz sowie eine GitHub Actions-Aktion, die Ihre Website automatisch erstellt und veröffentlicht.

In diesem Modul werden Ressourcen verwendet, die Ihnen über die Sandbox zur Verfügung gestellt werden. Die Sandbox bietet kostenlosen, vorübergehenden Zugriff auf ein Azure-Abonnement sowie auf die Ressourcen, die Sie für diese Übungen benötigen. Stellen Sie sicher, dass Sie die Sandbox oben auf dieser Seite aktivieren. Wenn Sie die Übungen in diesem Modul durcharbeiten, beachten Sie Folgendes: Jede Einheit hängt von Inhalten ab, die Sie in einer früheren Übung erstellt haben. Wählen Sie daher ein JavaScript-Framework aus, und verwenden Sie es für alle nachfolgenden Übungen.

Erstellen eines Repositorys

Um zu beginnen, erstellen Sie ein Repository mithilfe einer GitHub-Vorlage. Es sind mehrere Repositoryvorlagen verfügbar, die eine Starter-App enthalten, die in verschiedenen Front-End-Frameworks implementiert ist.

1. Wechseln Sie zur GitHub-Seite für die Repositoryerstellung mithilfe einer Vorlage, um das Vorlagenrepository zu öffnen.

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

3. Geben Sie folgenden Repositorynamen ein: my-static-web-app-and-api.

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

   Während Sie das Projekt aus einer Vorlage erstellen, erstellt GitHub Ihr Repository im Hintergrund.

Lokales Ausführen der App

Jetzt verfügen Sie in Ihrem GitHub-Konto über ein GitHub-Repository mit dem Namen my-static-web-app-and-api. Nun klonen Sie das GitHub-Repository und führen den Code lokal auf Ihrem Computer aus.

1. Öffnen Sie auf Ihrem Computer ein Terminalfenster.

   Wenn Sie Windows verwenden, können Sie cmd im Suchfeld der Systemleiste eingeben.

2. Um das Repository auf Ihren Computer zu klonen, fügen Sie den folgenden Code in das Eingabeaufforderungsfenster ein.

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

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

   Hinweis

   Wenn Sie Probleme beim Kopieren in das Eingabeaufforderungsterminal haben, klicken Sie mit der rechten Maustaste auf das Symbol in der Titelleiste, und stellen Sie auf der Registerkarte Eigenschaften sicher, dass STRG+UMSCHALT+C/V für Kopier- und Einfügevorgänge aktiviert ist.

3. Navigieren Sie zum Verzeichnis des Quellcodes, den Sie geklont haben.

   cd my-static-web-app-and-api
   

4. Navigieren Sie dann zum Verzeichnis Ihres bevorzugten Front-End-Frameworks.

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

5. Installieren Sie die Anwendungsabhängigkeiten.

   npm install
   

6. Stellen Sie mit dem folgenden Befehl sicher, dass die neueste Version jeder Abhängigkeit installiert ist.

   npm audit fix
   

7. Führen Sie die Front-End-Clientanwendung aus.

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

Navigieren zu Ihrer App

Wenn das Anwendungspaket generiert und kompiliert wurde, wird automatisch eine Browserregisterkarte geöffnet, auf der Ihre lokal ausgeführte Anwendung angezeigt wird.

Der Localhost für Angular ist http://localhost:4200.

Der Localhost für React ist http://localhost:3000.

Der Localhost für Svelte ist http://localhost:5000.

Localhost für Vue ist http://localhost:8080.

Ihre App sollte die Meldung Daten werden geladen anzeigen, da noch keine Daten und keine API vorhanden sind. Sie fügen die API für Ihre Web-App später in dieser Lerneinheit hinzu.

Drücken Sie im Terminal STRG+C, um Ihren Batchauftrag zu beenden.

Herzlichen Glückwunsch! Sie haben Ihre Anwendung erstellt und sich davon überzeugt, dass sie lokal in Ihrem Browser ausgeführt wird. Im nächsten Schritt können Sie Ihre Anwendung in Azure Static Web Apps veröffentlichen.

Erstellen einer statischen Web-App

Sie haben Ihr eigenes GitHub-Repository erstellt. Jetzt können Sie ihre eigene statische Web-App mit der Azure Static Web Apps-Erweiterung für Visual Studio Code erstellen.

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

1. Öffnen Sie Visual Studio Code.

2. Wählen Sie im oberen Menü die OptionAnzeigen>Erweiterungen aus, und geben Sie Azure Static Web Apps in das Suchfeld ein.

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

Öffnen des Anwendungsordners

1. Wählen Sie F1 aus, um die Befehlspalette in Visual Studio Code zu öffnen.

2. Geben Sie Datei: Ordner öffnen... ein.

3. Wählen Sie den Ordner my-static-web-app-and-api aus.

4. Wählen Sie Öffnen aus, um den Ordner in Visual Studio Code zu öffnen.

Anmelden bei Azure in Visual Studio Code

1. Wählen Sie F1 aus, um die Befehlspalette in Visual Studio Code zu öffnen.

2. Geben Sie Azure: Anmelden ein, und folgen Sie den Aufforderungen zur Authentifizierung.

   Wichtig

   Stellen Sie sicher, dass Sie sich bei Azure mit demselben Konto anmelden, das Sie zur Aktivierung der browserinternen Sandbox verwendet haben. Wenn Sie dasselbe Konto verwenden, steht Ihnen das Concierge-Abonnement zur Verfügung, mit dem Sie während dieses Tutorials Zugang zu kostenlosen Azure-Ressourcen erhalten.

Wählen Sie Ihr Abonnement aus.

1. Wählen Sie F1 aus, um die Befehlspalette in Visual Studio Code zu öffnen.

2. Geben Sie Azure: Abonnements auswählen ein, und deaktivieren Sie die gesamte Auswahl mit Ausnahme des Concierge-Abonnements.

   

Committen von Änderungen

Als Sie die Anwendungsabhängigkeiten installiert haben, wurden einige der Dateien in Ihrem Projekt während dieses Vorgangs aktualisiert. Um fortzufahren, müssen Sie diese Änderungen an das Repository committen.

1. Wählen Sie F1 aus, um die Befehlspalette in Visual Studio Code zu öffnen.

2. Geben Sie Git Commit All ein, und wählen Sie diese Option aus.

3. Geben Sie initial commit über der Datei ein.

4. Speichern und schließen Sie die Git Commit-Datei.

   Machen Sie sich zu diesem Zeitpunkt noch keine Gedanken über die Synchronisierung Ihrer Änderungen mit dem Server. Die Updates werden in GitHub kopiert, wenn Sie die statische Web-App veröffentlichen.

Erstellen der statischen Web-App

Eine aktuelle, authentifizierte Azure- und GitHub-Sitzung ist erforderlich, um eine statische Web-App zu erstellen. Wenn Sie nicht bereits bei beiden Anbietern angemeldet sind, fordert die Erweiterung Sie während des Erstellungsvorgangs zur Anmeldung auf.

1. Wählen Sie F1 aus, um die Befehlspalette in Visual Studio Code zu öffnen.

2. Geben Sie Azur Static Web Apps: Statische Web-App erstellen ein, und wählen Sie diese Option aus.

   Geben Sie die folgenden Werte für die restlichen Eingabeaufforderungen der Befehlspalette ein.

   Prompt	Wert
   Subscription	Wählen Sie das Concierge-Abonnement aus.
   Name	Geben Sie my-static-web-app-and-api ein.
   Region	Wählen Sie die nächstgelegene Region aus.
   Voreinstellung	Wählen Sie Angular aus.
   Speicherort des Anwendungscodes	Geben Sie angular-app ein.
   Ausgabeverzeichnis	Geben Sie dist/angular-app ein.

2. Geben Sie Azur Static Web Apps: Statische Web-App erstellen ein, und wählen Sie diese Option aus.

   Geben Sie die folgenden Werte für die restlichen Eingabeaufforderungen der Befehlspalette ein.

   Prompt	Wert
   Subscription	Wählen Sie das Concierge-Abonnement aus.
   Name	Geben Sie my-static-web-app-and-api ein.
   Region	Wählen Sie die nächstgelegene Region aus.
   Voreinstellung	Wählen Sie React aus.
   Speicherort des Anwendungscodes	Geben Sie react-app ein.
   Ausgabeverzeichnis	Geben Sie dist ein.

2. Geben Sie Azur Static Web Apps: Statische Web-App erstellen ein, und wählen Sie diese Option aus.

   Geben Sie die folgenden Werte für die restlichen Eingabeaufforderungen der Befehlspalette ein.

   Prompt	Wert
   Subscription	Wählen Sie das Concierge-Abonnement aus.
   Name	Geben Sie my-static-web-app-and-api ein.
   Region	Wählen Sie die nächstgelegene Region aus.
   Voreinstellung	Wählen Sie Svelte aus.
   Speicherort des Anwendungscodes	Geben Sie svelte-app ein.
   Ausgabeverzeichnis	Geben Sie public ein.

2. Geben Sie Azur Static Web Apps: Statische Web-App erstellen ein, und wählen Sie diese Option aus.

   Geben Sie die folgenden Werte für die restlichen Eingabeaufforderungen der Befehlspalette ein.

   Prompt	Wert
   Subscription	Wählen Sie das Concierge-Abonnement aus.
   Name	Geben Sie my-static-web-app-and-api ein.
   Region	Wählen Sie die nächstgelegene Region aus.
   Voreinstellung	Wählen Sie Vue aus.
   Speicherort des Anwendungscodes	Geben Sie vue-app ein.
   Ausgabeverzeichnis	Geben Sie dist ein.

Hinweis

Dieses Repository unterscheidet sich von anderen Projekten, die Sie möglicherweise in der Vergangenheit verwendet haben. Dieses Projekt enthält vier verschiedene Apps in vier verschiedenen Ordnern. Jeder Ordner enthält eine App, die in einem anderen JavaScript-Framework erstellt wurde. Normalerweise gäbe es nur eine App im Stammverzeichnis Ihres Repository und daher ein Standardzeichen / für den App-Pfad. Dies ist ein gutes Beispiel dafür, wie Sie mit Azure Static Web Apps Speicherorte konfigurieren können – Sie besitzen vollständige Kontrolle darüber, wie die App erstellt wird.

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

   

   Während Sie den Build konfigurieren, meldet Visual Studio Code Ihnen den Buildstatus.

   

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

   

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

5. 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.

   

   Ihre App sollte die Meldung Daten werden geladen anzeigen, da noch keine Daten und keine API vorhanden sind. Sie fügen die API für Ihre Web-App später in diesem Modul hinzu.

Herzlichen Glückwunsch! Ihre App wird 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 die Anzeige des Browsers nach einer Minute. Der Dienst „GitHub Actions“ wird automatisch ausgeführt, während die Azure Static Web Apps-App erstellt wird. Bei Anzeige der Begrüßungsseite wird die Bereitstellung der App noch ausgeführt.

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. Drücken Sie STRG+UMSCHALT+P, um die Befehlspalette zu öffnen.

2. Geben Sie folgenden Befehl ein, und wählen Sie ihn aus: Git: Pull.

3. Drücken Sie die EINGABETASTE.

Nächste Schritte

Als Nächstes erfahren Sie, wie Sie Ihre API mithilfe eines Azure Functions-Projekts erstellen und ausführen.