Übung: Erste Schritte

In dieser Übung erstellen Sie eine Azure Static Web App-Instanz, einschließlich einer GitHub-Aktion, die Ihre Website automatisch erstellt und veröffentlicht.

Dieses Modul verwendet Ressourcen, die Ihnen über den Sandkasten zur Verfügung gestellt werden, der kostenlosen, temporären Zugriff auf ein Azure-Abonnement sowie die Ressourcen bietet, die Sie zum Ausführen der Übungen benötigen. Stellen Sie sicher, dass Sie den Sandkasten oben auf dieser Seite aktivieren. Während Sie die Übungen in diesem Modul durcharbeiten, hängt jede Einheit von Inhalten ab, die Sie in einer vorherigen Übung erstellt haben. Wählen Sie aus diesem Grund ein JavaScript-Framework aus, und verwenden Sie es für alle nachfolgenden Übungen.

Erstellen eines Repositorys

Erstellen Sie zunächst ein Repository mithilfe einer GitHub-Vorlage. Es stehen eine Reihe von Repositoryvorlagen zur Verfügung, die eine Start-App enthalten, die in verschiedenen Front-End-Frameworks implementiert ist.

1. Wechseln Sie zur GitHub-Seite zum Erstellen aus Vorlage.

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

3. Geben Sie für Repository-Namemy-static-web-app-and-api ein.

4. Klicken Sie auf Create repository (Repository erstellen).

   Wenn Sie das Projekt aus einer Vorlage erstellen, erstellt GitHub Ihr Repository im Hintergrund.

Lokales Ausführen Ihrer App

Jetzt haben Sie ein GitHub-Repository namens my-static-web-app-and-api in Ihrem GitHub-Konto . Als Nächstes klonen Sie das GitHub-Repository, und führen Sie den Code lokal auf Ihrem Computer aus.

1. Öffnen Sie ein Terminalfenster auf Ihrem Computer.

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

2. Um das Repository auf Ihrem 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.git
   

   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 als Kopieren/Einfügen aktiviert ist.

3. Wechseln Sie in das Verzeichnis für den Quellcode, den Sie geklont haben.

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

4. Wechseln Sie zum Verzeichnis für Ihr bevorzugtes Front-End-Framework.

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

5. Installieren Sie die Anwendungsabhängigkeiten.

   npm install
   

6. Stellen Sie sicher, dass die neueste Version jeder Abhängigkeit mit dem folgenden Befehl 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.

Ihre App sollte Laden von Daten ... anzeigen, da noch keine Daten oder API verfügbar sind. Sie fügen die API für Ihre Web-App später in dieser Lektion hinzu.

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

Glückwunsch! Sie haben Ihre Anwendung erstellt und gesehen, dass sie lokal in Ihrem Browser ausgeführt wird. Als Nächstes 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ü "Erweiterungen anzeigen">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 Visual Studio Code-Befehlspalette zu öffnen.

2. Datei eingeben: Ordner öffnen....

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 Visual Studio Code-Befehlspalette zu öffnen.

2. Geben Sie Azure ein: Melden Sie sich an , und folgen Sie den Anweisungen zur Authentifizierung.

   Von Bedeutung

   Stellen Sie sicher, dass Sie sich mit demselben Konto bei Azure anmelden, das Sie zum Aktivieren der In-Browser-Sandbox verwendet haben. Durch die Nutzung desselben Kontos wird das Concierge-Abonnement verfügbar, das Ihnen während dieses Lernprogramms Zugriff auf kostenlose Azure-Ressourcen bietet.

Wählen Sie Ihr Abonnement aus.

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

2. Geben Sie Azure: Abonnements auswählen ein und deaktivieren Sie alle Auswahlen mit Ausnahme des Concierge-Abonnements.

   

Committen von Änderungen

Wenn Sie die Anwendungsabhängigkeiten installiert haben, wurden einige der Dateien in Ihrem Projekt im Prozess aktualisiert. Um fortzufahren, müssen Sie diese Änderungen in das Repository hochladen.

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

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

3. Geben Sie Initial Commit oben in die Datei ein.

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

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

Statische Web-App erstellen

Aktuelle Azure- und GitHub-authentifizierte Sitzungen sind erforderlich, um eine statische Web-App zu erstellen. Wenn Sie noch nicht bei beiden Anbietern angemeldet sind, werden Sie von der Erweiterung aufgefordert, sich während des Erstellungsprozesses anzumelden.

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

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-Aktionen anzeigen, indem Sie das Menü "Aktionen " erweitern.

   

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

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

   

   Ihre App sollte Laden von Daten ... anzeigen, da noch keine Daten oder API verfügbar sind. Sie fügen die API für Ihre Web-App später in diesem Modul hinzu.

Glückwunsch! Ihre App wird in Azure Static Web Apps bereitgestellt!

Pullen der Änderungen aus GitHub

Rufen Sie die neuesten Änderungen von GitHub ab, um die Workflowdatei, die vom Azure Static Web Apps-Dienst erstellt wurde, herunterzurufen.

1. Öffnen Sie die Befehlspalette, indem Sie STRG+UMSCHALT+P drücken.

2. Geben Sie Git ein, und wählen Sie "Git: Pull" aus.

3. Drücken Sie die EINGABETASTE.

Nächste Schritte

Als Nächstes erfahren Sie, wie Sie Ihre API mit einem Azure Functions-Projekt erstellen und ausführen.