Bereitstellen von statisch gerenderten Next.js-Websites in Azure Static Web Apps

  • Artikel

In diesem Tutorial erfahren Sie, wie Sie eine mit Next.js generierte statische Website für Azure Static Web Apps bereitstellen. Weitere Informationen zu den Besonderheiten von Next.js finden Sie in der Infodatei der Startvorlage.

Voraussetzungen

1. Einrichten einer Next.js-App

Anstatt die Next.js-CLI zum Erstellen einer App zu verwenden, können Sie auch ein Startrepository nutzen. Das Startrepository enthält eine vorhandene Next.js-App, die dynamische Routen unterstützt.

Erstellen Sie zunächst aus einem Vorlagenrepository unter Ihrem GitHub-Konto ein neues Repository.

  1. Besuchen Sie https://github.com/staticwebdev/nextjs-starter/generate.

  2. Geben Sie dem Repository den Namen nextjs-starter.

  3. Klonen Sie das neue Repository anschließend auf Ihrem Computer. Ersetzen Sie <YOUR_GITHUB_ACCOUNT_NAME> durch Ihren Kontonamen.

    git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nextjs-starter

  4. Navigieren Sie zur neu geklonten Next.js-App.

    cd nextjs-starter

  5. Installieren Sie Abhängigkeiten.

    npm install

  6. Starten Sie die Next.js-App in der Entwicklung.

    npm run dev

  7. Wechseln Sie zu http://localhost:3000, um die App zu öffnen. Die folgende Website sollte in Ihrem bevorzugten Browser geöffnet werden:

Starten der Next.js-App

Wenn Sie ein Framework oder eine Bibliothek auswählen, wird eine Detailseite zum ausgewählten Element angezeigt:

Detailseite

2. Erstellen einer statischen App

Die folgenden Schritte veranschaulichen, wie Sie Ihre App mit Azure Static Web Apps verknüpfen. Wenn sich die Anwendung in Azure befindet, können Sie sie in einer Produktionsumgebung bereitstellen.

  1. Öffnen Sie das Azure-Portal.

  2. Klicken Sie auf Ressource erstellen.

  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-nextjs-group
    Name my-nextjs-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, wenn Sie dazu aufgefordert werden.

  8. Geben Sie die folgenden GitHub-Werte ein.

    Eigenschaft Wert
    Organisation Wählen Sie die entsprechende GitHub-Organisation aus.
    Repository Wählen Sie nextjs-starter aus.
    Branch Wählen Sie main aus.

  9. Wählen Sie im Abschnitt Builddetails unter Buildvoreinstellungen die Option Benutzerdefiniert aus. Fügen Sie die folgenden Werte für die Buildkonfiguration hinzu:

    Eigenschaft Wert
    App location (App-Speicherort) Geben Sie / in das Feld ein.
    API-Speicherort Lassen Sie dieses Feld leer.
    Ausgabespeicherort Geben Sie out in das Feld ein.

3. Ü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 im Fenster Übersicht den Link URL aus, um Ihre bereitgestellte Anwendung zu öffnen.

Wenn die Website nicht sofort geladen wird, wird der Build noch ausgeführt. Wenn Sie den Status des Actions-Workflows überprüfen möchten, navigieren Sie zum Actions-Dashboard für Ihr Repository:

https://github.com/<YOUR_GITHUB_USERNAME>/nextjs-starter/actions

Nach Abschluss des Workflows können Sie den Browser aktualisieren, um Ihre Web-App anzuzeigen.

Alle am main-Branch vorgenommenen Änderungen starten nun eine neue Erstellung und Bereitstellung Ihrer Website.

4. Synchronisieren von Änderungen

Als Sie die App erstellt haben, wurde von Azure Static Web Apps in Ihrem Repository eine GitHub Actions-Datei erstellt. Führen Sie die Synchronisierung mit dem Server aus, indem Sie die neueste Version in Ihr lokales Repository pullen.

Wechseln Sie zurück zum Terminal, und führen Sie den folgenden Befehl aus: git pull origin main.

Konfigurieren des statischen Renderings

Standardmäßig wird die Anwendung als hybrid gerenderte Next.js-Anwendung behandelt, aber um sie weiter als Generator für statische Sites zu verwenden, müssen Sie die Bereitstellungsaufgabe aktualisieren.

  1. Öffnen Sie das Repository in Visual Studio Code.

  2. Navigieren Sie zur GitHub Actions-Datei, die Azure Static Web Apps Ihrem Repository unter .github/workflows/azure-static-web-apps-<your site ID>.yml hinzugefügt hat.

  3. Aktualisieren Sie den Auftrag zum Erstellen und Bereitstellen, damit eine Umgebungsvariable IS_STATIC_EXPORT auf true gesetzt wird:

        - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

  4. Committen Sie die Änderungen an Git, und pushen Sie sie zu GitHub.

    git commit -am "Configuring static site generation" && git push

Nachdem der Build abgeschlossen wurde, wird die Site statisch gerendert.

Bereinigen von Ressourcen

Falls Sie diese App nicht weiter nutzen möchten, können Sie die Azure Static Web Apps-Instanz mithilfe der folgenden Schritte löschen.

  1. Öffnen Sie das Azure-Portal.
  2. Suchen Sie über die obere Suchleiste nach my-nextjs-group.
  3. Wählen Sie den Gruppennamen aus.
  4. Klicken Sie auf Löschen.
  5. Klicken Sie zum Bestätigen des Löschvorgangs auf Ja.

Nächste Schritte

Einrichten einer benutzerdefinierten Domäne