Bereitstellen einer Gatsby-Website in Azure Static Web-Apps

In diesem Artikel wird gezeigt, wie Sie eine Gatsby-Webanwendung erstellen und in Azure Static Web Apps bereitstellen. Das Ergebnis ist eine neue Static Web Apps-Website (mit der zugehörigen GitHub Actions-Instanz), mit der Sie steuern können, wie die App erstellt und veröffentlicht wird.

In diesem Tutorial lernen Sie Folgendes:

  • Erstellen einer Gatsby-App
  • Einrichten einer Azure Static Web Apps-Website
  • Bereitstellen der Gatsby-App in Azure

Wenn Sie kein Azure-Abonnement haben, erstellen Sie ein kostenloses Azure-Konto, bevor Sie beginnen.

Voraussetzungen

Erstellen einer Gatsby-App

Erstellen Sie mithilfe der Gatsby-Befehlszeilenschnittstelle (Command Line Interface, CLI) eine Gatsby-App:

  1. Öffnen Sie ein Terminal.

  2. Verwenden Sie das Tool npx zum Erstellen einer neuen App mit der Gatsby-Befehlszeilenschnittstelle. Dies kann einige Minuten dauern.

    npx gatsby new static-web-app
    
  3. Navigieren zur neu erstellten App

    cd static-web-app
    
  4. Initialisieren eines Git-Repositorys

    git init
    git add -A
    git commit -m "initial commit"
    

Hinweis

Wenn Sie die neueste Version von Gatsby verwenden, müssen Sie möglicherweise die Datei „package.json“ so ändern, dass sie Folgendes enthält: "engines": { "node": ">=18.0.0" }.

Übertragen Ihrer Anwendung auf GitHub

Sie benötigen ein Repository auf GitHub, um eine neue Azure Static Web Apps-Ressource erstellen zu können.

  1. Erstellen Sie über https://github.com/new ein leeres GitHub-Repository mit dem Namen gatsby-static-web-app. (Erstellen Sie keine README-Datei.)

  2. Fügen Sie als Nächstes das GitHub-Repository als Remoteressource zu Ihrem lokalen Repository hinzu. Fügen Sie unbedingt den GitHub-Benutzernamen anstelle des Platzhalters <YOUR_USER_NAME> im folgenden Befehl hinzu:

    git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app
    
  3. Übertragen Sie Ihr lokales Repository auf GitHub.

    git push --set-upstream origin main
    

Bereitstellen Ihrer Web-App

In den folgenden Schritten wird gezeigt, wie Sie eine neue statische Website-App erstellen und in einer Produktionsumgebung bereitstellen.

Erstellen der Anwendung

  1. Navigieren Sie zum Azure-Portal.

  2. Wählen Sie Ressource erstellen aus.

  3. Suchen Sie nach Static Web Apps.

  4. Wählen Sie Static Web Apps aus.

  5. Klicken Sie auf Erstellen

  6. Geben Sie auf der Registerkarte Grundlagen die folgenden Werte ein.

    Eigenschaft Wert
    Abonnement Den Namen Ihres Azure-Abonnements
    Ressourcengruppe my-gatsby-group
    Name my-gatsby-app
    Plantyp Free
    Region für Azure Functions-API und Stagingumgebungen Wählen Sie die Region aus, die Ihnen am nächsten ist.
    Quelle GitHub
  7. Wählen Sie Mit GitHub anmelden aus, und authentifizieren Sie sich bei GitHub.

  8. Geben Sie die folgenden GitHub-Werte ein.

    Eigenschaft Wert
    Organisation Wählen Sie Ihre gewünschte GitHub-Organisation aus.
    Repository Wählen Sie gatsby-static-web-app aus.
    Branch Wählen Sie main aus.

    Hinweis

    Wenn Sie keine Repositorys sehen, müssen Sie möglicherweise Azure Static Web Apps auf GitHub autorisieren. Navigieren Sie 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.

  9. Wählen Sie im Abschnitt Builddetails in der Dropdownliste Buildvoreinstellungen die Option Gatsby aus, und übernehmen Sie die Standardwerte.

Überprüfen und Erstellen

  1. Wählen Sie Überprüfen und erstellen aus, um sicherzustellen, dass alle Details stimmen.

  2. Klicken Sie auf Erstellen, um mit der Erstellung der statischen App Service-Web-App zu beginnen und einen GitHub Actions-Vorgang für die Bereitstellung anzugeben.

  3. Wählen Sie nach Abschluss der Bereitstellung die Option Zu Ressource wechseln aus.

  4. Wählen Sie auf dem Ressourcenbildschirm den Link URL aus, um Ihre bereitgestellte Anwendung zu öffnen. Sie müssen ggf. ein bis zwei Minuten warten, bis der GitHub Actions-Vorgang abgeschlossen ist.

    Deployed application

Bereinigen von Ressourcen

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

  1. Öffnen Sie das Azure-Portal.
  2. Suchen Sie über die obere Suchleiste anhand des zuvor angegebenen Namens nach Ihrer Anwendung.
  3. Klicken Sie auf die App.
  4. Klicken Sie auf die Schaltfläche Löschen.
  5. Klicken Sie zum Bestätigen des Löschvorgangs auf Ja.

Nächste Schritte