Freigeben über

Bereitstellen statisch gerenderter Next.js Websites in Azure Static Web Apps

In diesem Lernprogramm erfahren Sie, wie Sie eine Next.js generierte statische Website in Azure Static Web Apps bereitstellen. Weitere Informationen zu Next.js-spezifischen Informationen finden Sie in der Readme-Datei der Startvorlage.

Voraussetzungen

1. Einrichten einer Next.js-App

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

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

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

  2. Benennen des Repositorys nextjs-starter

  3. Als Nächstes klonen Sie das neue Repository auf Ihrem Computer. Stellen Sie sicher, dass Sie <YOUR_GITHUB_ACCOUNT_NAME> durch den Namen Ihres Kontos ersetzen.

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

  4. Wechseln Sie zur neu geklonten Next.js App.

    cd nextjs-starter

  5. Installieren Sie Abhängigkeiten.

    npm install

  6. Starten Sie die Next.js-App im Entwicklungsmodus.

    npm run dev

  7. Gehen Sie zu http://localhost:3000, um die App zu öffnen, wo Sie die folgende Website in Ihrem bevorzugten Browser geöffnet sehen sollten:

Starte 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 zeigen, wie Sie Ihre App mit Azure Static Web Apps verknüpfen. Einmal in Azure können Sie die Anwendung in einer Produktionsumgebung bereitstellen.

  1. Wechseln Sie zum Azure-Portal.

  2. Wählen Sie "Ressource erstellen" aus.

  3. Suchen Sie nach statischen Web-Apps.

  4. Wählen Sie "Static Web App" aus.

  5. Wählen Sie "Erstellen" aus.

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

    Eigentum Wert
    Subscription Den Namen Ihres Azure-Abonnements
    Ressourcengruppe my-nextjs-group
    Name my-nextjs-app
    Plantyp Kostenlos
    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.

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

  9. Wählen Sie im Abschnitt " Builddetails " die Option "Benutzerdefiniert " aus den Buildvoreinstellungen aus. Fügen Sie die folgenden Werte für die Build-Konfiguration hinzu.

    Eigentum Wert
    App-Speicherort Geben Sie das Feld / ein.
    API-Standort Lassen Sie dieses Feld leer.
    Ausgabeort 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. Sobald die Bereitstellung abgeschlossen ist, wählen Sie "Zur Ressource navigieren".

  4. Wählen Sie im Fenster "Übersicht " den URL-Link aus, um Die bereitgestellte Anwendung zu öffnen.

Wenn die Website nicht sofort geladen wird, wird der Build noch ausgeführt. Um den Status des Aktionsworkflows zu überprüfen, navigieren Sie zum Dashboard "Aktionen" für Ihr Repository:

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

Sobald der Workflow abgeschlossen ist, 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

Wenn Sie die App erstellt haben, hat Azure Static Web Apps eine GitHub Actions-Datei in Ihrem Repository erstellt. Synchronisieren Sie mit dem Server, indem Sie die neueste Version in Ihr lokales Repository abrufen.

Kehren Sie zum Terminal zurück, 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 weiterhin als statischen Websitegenerator zu verwenden, müssen Sie die Bereitstellungsaufgabe aktualisieren.

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

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

  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. Übernehmen Sie die Änderungen an Git, und übertragen Sie sie an GitHub.

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

Sobald der Build abgeschlossen ist, wird die Website statisch gerendert.

Bereinigen von Ressourcen

Wenn Sie diese App nicht weiterhin verwenden werden, können Sie die Azure Static Web Apps-Instanz mithilfe der folgenden Schritte löschen.

  1. Öffnen Sie das Azure-Portal.
  2. Suchen Sie in der oberen Suchleiste nach "my-nextjs-group" .
  3. Wählen Sie den Gruppennamen aus.
  4. Klicken Sie auf Löschen.
  5. Wählen Sie "Ja " aus, um die Löschaktion zu bestätigen.

Nächste Schritte

Einrichten einer benutzerdefinierten Domäne

  • Last updated on