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

• Ein Azure-Konto mit einem aktiven Abonnement. Falls Sie über keins verfügen, können Sie ein kostenloses Konto erstellen.
• Ein GitHub-Konto. Falls Sie über keins verfügen, können Sie ein kostenloses Konto erstellen.
• Ein Git-Setup installiert. Falls Sie keines haben, können Sie Git installieren.
• Installation von Node.js

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.

   

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

Hinzufügen einer benutzerdefinierten Domäne