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.
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.
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.
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.
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
Wählen Sie Mit GitHub anmelden aus, und authentifizieren Sie sich bei GitHub.
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.
Wählen Sie im Abschnitt Builddetails in der Dropdownliste Buildvoreinstellungen die Option Benutzerdefiniert aus, und übernehmen Sie die Standardwerte.
Geben Sie im Feld API-Speicherort/ ein.
Geben Sie als API-Speicherort den Wert .output/server in das Feld ein.
Geben Sie als Ausgabespeicherort den Wert .output/public in das Feld ein.
Überprüfen und Erstellen
Wählen Sie Überprüfen und erstellen aus, um sicherzustellen, dass alle Details stimmen.
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.
Wählen Sie nach Abschluss der Bereitstellung die Option Zu Ressource wechseln aus.
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:
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.
Veröffentlichen Sie eine Angular-, React-, Svelte- oder Vue-JavaScript-App mit Azure Static Web Apps. Verwenden Sie Visual Studio Code zum lokalen Erstellen und Ausführen der Web-App.
Erstellen von End-to-End-Lösungen in Microsoft Azure zum Erstellen von Azure Functions-Lösungen, Implementieren und Verwalten von Web-Apps, Entwickeln von Lösungen mit Azure Storage u. v. m.