Bereitstellen von per Server gerenderten Nuxt.js-Websites in Azure Static Web Apps

In diesem Tutorial erfahren Sie, wie Sie eine mit Nuxt.js generierte statische Website für Azure Static Web Apps bereitstellen. Zunächst wird beschrieben, wie Sie eine Nuxt.js-App einrichten, konfigurieren und bereitstellen. Im Rahmen dieses Prozesses erfahren Sie auch, wie Sie häufige Schwierigkeiten überwinden, die beim Generieren von statischen Seiten mit Nuxt.js auftreten können.

Voraussetzungen

Einrichten einer Nuxt.js-App

Sie können ein neues Nuxt.js-Projekt einrichten, indem Sie create-nuxt-app verwenden. In diesem Tutorial beginnen Sie nicht mit einem neuen Projekt, sondern Sie klonen ein vorhandenes Repository. Mit diesem Repository wird veranschaulicht, wie Sie eine dynamische Nuxt.js-App als statische Website bereitstellen.

  1. Erstellen Sie aus einem Vorlagenrepository unter Ihrem GitHub-Konto ein neues Repository.

  2. Navigieren Sie zu http://github.com/staticwebdev/nuxtjs-starter/generate.

  3. Geben Sie dem Repository den Namen nuxtjs-starter.

  4. Klonen Sie das neue Repository anschließend auf Ihrem Computer. Ersetzen Sie „<YOUR_GITHUB_ACCOUNT_NAME>“ durch den Namen Ihres Kontos.

    git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxtjs-starter
    
  5. Navigieren Sie zur neu geklonten Nuxt.js-App:

    cd nuxtjs-starter
    
  6. Installieren von Abhängigkeiten:

    npm install
    
  7. Starten Sie die Nuxt.js-App in der Entwicklung:

    npm run dev
    

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

Start Nuxt.js app

Wenn Sie auf ein Framework bzw. eine Bibliothek klicken, sollte eine Detailseite zum ausgewählten Element angezeigt werden:

Details page

Generieren einer statischen Website aus dem Nuxt.js-Build

Beim Erstellen einer Nuxt.js-Website mit npm run build wird die App als herkömmliche Web-App und nicht als statische Website erstellt. Verwenden Sie die unten angegebene Anwendungskonfiguration, um eine statische Website zu generieren.

  1. Aktualisieren Sie das Buildskript der Datei package.json, um mit dem Befehl nur eine statische Website zu generieren:

    "scripts": {
      "dev": "nuxt dev",
      "build": "nuxt generate"
    },
    

    Nach der Ausführung dieses Befehls wird das Skript build von Azure Static Web Apps jedes Mal ausgeführt, wenn Sie einen Commit pushen.

  2. Generieren einer statischen Website:

    npm run build
    

    Nuxt.js generiert die statische Website und kopiert sie in den Ordner dist im Stammverzeichnis Ihres Arbeitsverzeichnisses.

    Hinweis

    Dieser Ordner ist in der GITIGNORE-Datei aufgeführt, damit er während des CI/CD-Vorgangs generiert werden kann, wenn Sie die Bereitstellung durchführen.

Pushen Ihrer statischen Website zu GitHub

Bei Azure Static Web Apps wird Ihre App aus einem GitHub-Repository bereitgestellt. Dies wird dann für jedes Pushen eines Commits zu einem entsprechend angegebenen Branch durchgeführt. Verwenden Sie die folgenden Befehle, um Ihre Änderungen mit GitHub zu synchronisieren.

  1. Stellen Sie alle geänderten Dateien bereit:

    git add .
    
  2. Führen Sie einen Commit für alle Änderungen aus.

    git commit -m "Update build config"
    
  3. Pushen Sie Ihre Änderungen zu GitHub.

    git push origin main
    

Bereitstellen Ihrer statischen Website

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

Erstellen einer Azure Static Web Apps-Ressource

  1. Navigieren Sie zum Azure-Portal.

  2. Klicken Sie auf Ressource erstellen.

  3. Suchen Sie nach Static Web Apps.

  4. Klicken Sie auf statische Web-Apps.

  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-nuxtjs-group
    Name my-nuxtjs-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 das zuvor erstellte Repository aus.
    Branch Wählen Sie main aus.
  9. Wählen Sie im Abschnitt Builddetails in der Dropdownliste Buildvoreinstellungen die Option Benutzerdefiniert aus, und übernehmen Sie die Standardwerte.

  10. Geben Sie im Feld API-Speicherort./ ein.

  11. Lassen Sie das Feld API-Speicherort leer.

  12. Geben Sie im Feld Ausgabespeicherortout ein.

Überprüfen und Erstellen

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

  2. Wählen Sie Erstellen aus, um mit der Erstellung der statischen App Service-Web-App zu beginnen und einen GitHub Action-Vorgang für die Bereitstellung anzugeben.

  3. Wenn die Bereitstellung abgeschlossen ist, klicken Sie auf Zu Ressource wechseln.

  4. Klicken Sie im Fenster Übersicht auf den Link URL, um Ihre bereitgestellte Anwendung zu öffnen.

Falls die Website nicht sofort geladen wird, ist der Workflow für GitHub Actions im Hintergrund noch aktiv. Nach Abschluss des Workflows können Sie auf die Schaltfläche zum Aktualisieren des Browsers klicken, um Ihre Web-App anzuzeigen.

Sie können den Status der GitHub Actions-Workflows überprüfen, indem Sie zu den Aktionen für Ihr Repository navigieren:

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

Synchronisieren von Änderungen

Als Sie die App erstellt haben, wurde von Azure Static Web Apps in Ihrem Repository eine GitHub Actions-Workflowdatei erstellt. Sie müssen diese Datei in Ihr lokales Repository einfügen, damit Ihr Git-Verlauf synchronisiert wird.

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

Konfigurieren dynamischer Routen

Navigieren Sie zur neu bereitgestellten Website, und klicken Sie auf eines der Logos für ein Framework oder eine Bibliothek. Anstelle der Detailseite wird eine Seite mit dem Fehler 404 angezeigt.

404 on dynamic routes

Der Grund ist, dass Nuxt.js die statische Website nur für die Startseite generiert hat. Nuxt.js kann gleichwertige statische .html-Dateien für jede .vue-Seitendatei generieren, aber es gibt eine Ausnahme.

Wenn es sich bei der Seite um eine dynamische Seite handelt, z. B. _id.vue, sind nicht genügend Informationen zum Generieren einer statischen HTML-Datei aus dieser dynamischen Seite vorhanden. Sie müssen die möglichen Pfade für die dynamischen Routen explizit angeben.

Generieren von statischen Seiten aus dynamischen Routen

  1. Aktualisieren Sie die Datei nuxt.config.js, damit von Nuxt.js eine Liste mit allen verfügbaren Daten verwendet wird, um statische Seiten für jedes Framework bzw. jede Bibliothek zu generieren:

      import { projects } from "./utils/projectsData";
    
      export default {
        mode: "universal",
    
        //...truncated
    
        generate: {
          async routes() {
            const paths = [];
    
            projects.forEach(project => {
              paths.push(`/project/${project.slug}`);
            });
    
            return paths;
          }
        }
      };
    

    Hinweis

    Da routes eine asynchrone Funktion ist, können Sie darin eine Anforderung an eine API senden und die zurückgegebene Liste verwenden, um die Pfade zu generieren.

  2. Pushen Sie die neuen Änderungen in Ihr GitHub-Repository, und warten Sie einige Minuten, während Ihre Website von GitHub Actions neu erstellt wird. Nach Abschluss des Buildvorgangs wird der Fehler 404 nicht mehr angezeigt.

    404 on dynamic routes fixed