Bereitstellen von Nuxt 3-Websites mit universellem Rendering auf Azure Static Web Apps

  • Artikel

In diesem Tutorial erfahren Sie, wie Sie eine Nuxt 3-Anwendung für Azure Static Web Apps bereitstellen. Nuxt 3 unterstützt universelles (client- und serverseitiges) Rendering, einschließlich Server- und API-Routen. Ohne zusätzliche Konfiguration können Sie Nuxt 3-Apps mit universellem Rendering auf Azure Static Web Apps bereitstellen. Wenn die App in der Static Web Apps GitHub-Aktion oder Azure Pipelines-Aufgabe erstellt wird, konvertiert Nuxt 3 diese automatisch in statische Ressourcen und eine Azure Functions-App, die mit Azure Static Web Apps kompatibel sind.

Voraussetzungen

Einrichten einer Nuxt 3-App

Sie können ein neues Nuxt-Projekt einrichten, indem Sie npx nuxi init nuxt-app verwenden. Anstatt ein neues Projekt zu verwenden, wird in diesem Tutorial eine vorhandene Repositoryeinrichtung verwendet, um zu demonstrieren, wie eine Nuxt 3-Website mit universellem Rendering in Azure Static Web Apps bereitgestellt wird.

  1. Navigiere zu http://github.com/staticwebdev/nuxt-3-starter/generate.

  2. Geben Sie dem Repository den Namen nuxt-3-starter.

  3. 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>/nuxt-3-starter

  4. Navigieren Sie zur neu geklonten Nuxt.js-App:

    cd nuxt-3-starter

  5. Installieren von Abhängigkeiten:

    npm install

  6. Starten Sie die Nuxt.js-App in der Entwicklung:

    npm run dev -- -o

Navigieren Sie zu http://localhost:3000, um die App zu öffnen. In Ihrem bevorzugten Browser sollte die folgende Website geöffnet werden: Wählen Sie die Schaltflächen aus, um Server- und API-Routen aufzurufen.

Starten der Nuxt.js-App

Bereitstellen Ihres Nuxt 3-Standorts

Die folgenden Schritte zeigen, wie Sie eine Azure Static Web Apps-Ressource erstellen und konfigurieren, um Ihre App über GitHub bereitzustellen.

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-nuxt3-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. Geben Sie als API-Speicherort den Wert .output/server in das Feld ein.

  12. Geben Sie als Ausgabespeicherort den Wert .output/public in das Feld ein.

Überprüfen und Erstellen

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

  2. Wählen Sie Erstellen aus, um mit dem Erstellen der statischen Web-App zu beginnen und einen GitHub Actions-Vorgang für die Bereitstellung bereitzustellen.

  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.

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 den Browser aktualisieren, 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>/nuxt-3-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. Kehren Sie zum Terminal zurück, und führen Sie den folgenden Befehl aus, um den Commit, der die neue Datei enthält, zu pullen.

git pull

Nehmen Sie Änderungen an der App vor, indem Sie den Code aktualisieren und in GitHub pushen. GitHub Actions erstellt die App automatisch und stellt sie bereit.

Weitere Informationen finden Sie in der Dokumentation zur Azure Static Web Apps Nuxt 3-Bereitstellungsvoreinstellung.

Einrichten einer benutzerdefinierten Domäne