Übung: Erstellen und Bereitstellen in Azure Static Web Apps

  • 5 Minuten

In Azure Static Web Apps werden statische Anwendungen wie diejenigen gehostet, die mithilfe von Gatsby erstellt werden. Dazu werden die statischen Ressourcen der Anwendungen erstellt und in der Cloud bereitgestellt.

In dieser Übung werden Sie die statischen Ressourcen Ihrer App erstellen, um zu überprüfen, wie diese aussehen werden, und um diese lokal zu hosten und auszuprobieren. Anschließend pushen Sie Ihren Code zu GitHub und erstellen eine Azure Static Web Apps-Instanz, mit der Ihre App im Web gehostet wird.

Erstellen Ihrer Website

Beim Erstellen Ihrer Website und der Vorbereitung der Bereitstellung nimmt Gatsby Ihnen die komplizierten Aufgaben ab.

Führen Sie den folgenden Befehl im Projektverzeichnis aus:

gatsby build

Durch diesen Befehl wird ein Produktionsbuild erstellt. Alle Ihre Dateien werden nun in einem Unterverzeichnis namens public/ gespeichert.

Nachdem der Buildvorgang abgeschlossen ist, können Sie das Verzeichnis public/ aufrufen und die Dateien in einem Browser öffnen. Sie können Ihren Build untersuchen, da dieser mit http-server im Web gehostet wird. Dies ist ein Befehlszeilentool, das lokale Dateien über HTTP ausliefert, damit Sie sie in einem Browser anzeigen können.

Nun hosten Sie die gesamte Anwendung über einen lokalen Webserver. Ändern Sie das Arbeitsverzeichnis im Terminal mit cd in das Verzeichnis public/, und geben Sie den folgenden Befehl ein:

npx http-server -p 5000

Navigieren Sie zu http://localhost:5000.

Jetzt sollte der folgende Inhalt gerendert werden:

Screenshot showing your built app.

Sie haben Ihre Website erstellt und aus einer Gatsby-App eine Reihe von statischen Seiten gemacht, die nichts als HTML, CSS und JavaScript enthalten.

Navigieren Sie in VS Code zu Ihrem public/-Verzeichnis, und suchen Sie Ihre gerenderte about-Komponente unter public/about/index.html. Aufgrund des Optimierungsprozesses wurden alle Leerzeichen entfernt, und die Seite wird als eine einzelne lange Zeile dargestellt. Sie sollten jedoch den gerenderten Titel und die gerenderte Beschreibung finden können. Diese sollten in etwa so aussehen:

// excerpt from about/index.html

<h2>Gatsby Default Starter</h2><div>Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.</div>

Pushen von Code zu GitHub

Sie müssen die folgenden Schritte ausführen, um die App für die Bereitstellung vorzubereiten:

  1. Initialisieren eines Git-Repositorys
  2. Erstellen eines GitHub-Repositorys und Pushen des lokalen Git-Repositorys zu GitHub

Hinzufügen der „Info“-Seite

Navigieren Sie im Terminal zum Stammverzeichnis des Projekts, fügen Sie den Code dem Repository-Index hinzu, und committen Sie ihn.

git add .
git commit -m "adding About page to site"

Erstellen eines GitHub-Repositorys und Pushen des Codes

  1. Navigieren Sie zu GitHub, und melden Sie sich an.

  2. Navigieren Sie zur Seite Repositorys.

    Screenshot of the repository button in GitHub.

  3. Klicken Sie nun wir im folgenden Screenshot gezeigt auf die Schaltfläche Neu:

    Screenshot of the create a new GitHub repo button.

  4. Nennen Sie Ihr Repository gatsby-app, und klicken Sie wie unten gezeigt auf das Repository:

    Screenshot showing how to name GitHub repository.

  5. Fügen Sie Ihr GitHub-Repository zuletzt als Remoterepository hinzu, und pushen Sie den Code dorthin. Geben Sie dazu die folgenden Befehle ein (ersetzen Sie <user> durch Ihren GitHub-Benutzernamen):

    git remote add origin https://github.com/<user>/gatsby-app.git
git push -u origin master

Jetzt können Sie Apps in Azure Static Web Apps bereitstellen!

Erstellen einer statischen Web-App

Nachdem Sie Ihr GitHub-Repository erstellt haben, können Sie eine Static Web Apps-Instanz aus dem Azure-Portal erstellen.

In diesem Tutorial 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.

  1. Melden Sie sich beim Azure-Portal an. Achten Sie darauf, sich mit dem Konto anzumelden, mit dem Sie auch die Sandbox aktiviert haben.
  2. Suchen Sie in der oberen Leiste nach statische Web-Apps.
  3. Klicken Sie auf statische Web-Apps.
  4. Klicken Sie auf Erstellen.

Grundeinstellungen

Konfigurieren Sie als Nächstes die neue App, und verknüpfen Sie sie mit Ihrem GitHub-Repository.

  1. Geben Sie die Projektdetails ein.

    Einstellung Wert
    Abonnement Concierge-Abonnement
    Ressourcengruppe [Sandbox-Ressourcengruppenname]

  2. Geben Sie die Details für Static Web Apps ein.

    Einstellung Wert
    Name Geben Sie Ihrer App einen Namen. Gültige Zeichen sind a-z (keine Beachtung von Groß-/Kleinschreibung), 0-9 und _.
    Region Wählen Sie die nächstgelegene Region aus.
    SKU Free

  3. Klicken Sie, wenn Sie dazu aufgefordert werden, auf die Schaltfläche Mit GitHub anmelden, und authentifizieren Sie sich bei GitHub.

  4. Geben Sie die Bereitstellungsdetails ein.

    Einstellung Wert
    Organisation Wählen Sie hier die Organisation aus, in der Sie das Repository erstellt haben.
    Repository gatsby-app
    Branch main oder master

    Hinweis

    Wenn Sie keine Repositories sehen, müssen Sie möglicherweise Azure Static Web Apps auf GitHub autorisieren. Navigieren Sie dann zu Ihrem GitHub-Repository, wechseln Sie zu Einstellungen > Anwendungen > Autorisierte OAuth-Apps, und wählen Sie Azure Static Web Apps und dann Zuweisen aus. Bei Organisationsrepositorys müssen Sie Besitzer der Organisation sein, um die Berechtigungen erteilen zu können.

  5. Verwenden Sie die Dropdownliste Builddetails, und wählen Sie Gatsby aus, um die Buildinformationen einzufüllen.

    Einstellung Wert
    App location (App-Speicherort) Standardeinstellung beibehalten
    API-Speicherort Standardeinstellung beibehalten
    Ausgabespeicherort Public

  6. Klicken Sie auf Überprüfen + erstellen.

    Screenshot showing the review and create button.

Überprüfen + erstellen

Fahren Sie mit dem Erstellen der Anwendung fort.

  1. Klicken Sie auf die Schaltfläche Erstellen.

    Screenshot showing the click create button.

  2. Klicken Sie nach Abschluss der Bereitstellung auf die Schaltfläche Zu Ressource wechseln.

    Screenshot showing the Go to resource button.

Überprüfen der GitHub Actions-Aktion

In dieser Phase wird Ihre Static Web Apps-Instanz in Azure erstellt, Ihre App wird jedoch noch nicht bereitgestellt. Die von Azure in Ihrem Repository erstellte GitHub Actions-Aktion wird automatisch ausgeführt. Sie führt den ersten Build und die erste Bereitstellung Ihrer App aus. Dieser Vorgang dauert jedoch einige Minuten.

Sie können den Status Ihrer Build- und Bereitstellungsaktion überprüfen, indem Sie auf den unten angezeigten Link klicken:

Screenshot showing how to browse to see the progress of the GitHub Action.

Anzeigen der Website

Sobald die GitHub-Aktion das Erstellen und Veröffentlichen der Web-App abgeschlossen hat, können Sie die ausgeführte App überprüfen.

Klicken Sie im Azure-Portal auf den Link URL, um die App im Browser aufzurufen.

Screenshot that shows the Azure portal with a link to the URL for the app.

Hinweis

Machen Sie sich keine Sorgen, wenn eine Webseite angezeigt wird, die besagt, dass die App noch nicht erstellt und bereitgestellt wurde. Aktualisieren Sie die Anzeige des Browsers nach einer Minute. Die GitHub-Aktion wird automatisch ausgeführt, wenn die Azure Static Web Apps-Instanz erstellt wird. Bei Anzeige der Begrüßungsseite wird die Bereitstellung der App noch ausgeführt.

Herzlichen Glückwunsch! Sie haben Ihre erste Gatsby-App mithilfe von Azure Static Web Apps in der Cloud bereitgestellt.