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

In diesem Lernprogramm lernen Sie, eine Nuxt 3-Anwendung in Azure Static Web Apps bereitzustellen. Nuxt 3 unterstützt universelles Rendering (clientseitiges und serverseitiges), einschließlich Server- und API-Routen. Ohne zusätzliche Konfiguration können Sie Nuxt 3-Apps mit universellem Rendering in Azure Static Web Apps bereitstellen. Wenn die App in der Aufgabe "GitHub Action" oder "Azure Pipelines" integriert ist, konvertiert Nuxt 3 sie automatisch in statische Objekte und eine Azure Functions-App, die mit Azure Static Web Apps kompatibel ist.

Voraussetzungen

• Ein Azure-Konto mit einem aktiven Abonnement. Kostenlos ein Konto erstellen.
• Ein GitHub-Konto. Kostenlos ein Konto erstellen.
• Node.js 16 oder höher installiert.

Einrichten einer Nuxt 3-App

Sie können mit npx nuxi init nuxt-app ein neues Nuxt-Projekt einrichten. Anstatt ein neues Projekt zu verwenden, verwendet dieses Lernprogramm ein vorhandenes Repository, um zu veranschaulichen, 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. Benennen Sie das Repository nuxt-3-starter.

3. Als Nächstes klonen Sie das neue Repository auf Ihrem Computer. <Ersetzen Sie YOUR_GITHUB_ACCOUNT_NAME> unbedingt durch Ihren Kontonamen.

   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 im Entwicklungsmodus.

   npm run dev -- -o
   

Navigieren Sie zu http://localhost:3000, um die App zu öffnen. Dort sollten Sie die folgende Website in Ihrem bevorzugten Browser sehen. Wählen Sie die Schaltflächen aus, um Server- und API-Routen aufzurufen.

Bereitstellen Ihrer Nuxt 3-Website

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. Wählen Sie "Ressource erstellen" aus.

3. Suchen Sie nach statischen Web-Apps.

4. Wählen Sie statische Web-Apps 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-nuxtjs-group
   Name	my-nuxt3-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.

8. Geben Sie die folgenden GitHub-Werte ein.

   Eigentum	Wert
   Organisation	Wählen Sie Ihre gewünschte GitHub-Organisation aus.
   Repository	Wählen Sie das zuvor erstellte Repository aus.
   Filiale	Wählen Sie main aus.

9. Wählen Sie im Abschnitt " Builddetails " die Option "Benutzerdefiniert" aus der Dropdownliste " Buildvoreinstellungen " aus, und behalten Sie die Standardwerte bei.

10. Im App-Bereich geben Sie / in das Feld 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 die Erstellung der statischen Web-App zu starten und eine GitHub-Aktionen 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 URL-Link aus, um Die bereitgestellte Anwendung zu öffnen.

Wenn die Website nicht sofort geladen wird, wird der GitHub-Aktionsworkflow im Hintergrund weiterhin ausgeführt. Sobald der Workflow abgeschlossen ist, können Sie den Browser aktualisieren, um Ihre Web-App anzuzeigen.

Sie können den Status der Aktionen-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

Wenn Sie die App erstellt haben, hat Azure Static Web Apps eine GitHub Actions-Workflowdatei in Ihrem Repository erstellt. Kehren Sie zum Terminal zurück, und führen Sie den folgenden Befehl aus, um den Commit mit der neuen Datei abzurufen.

git pull

Nehmen Sie Änderungen an der App vor, indem Sie den Code aktualisieren und auf GitHub pushen. GitHub-Aktionen erstellt und stellt die App automatisch bereit.

Weitere Informationen finden Sie in der voreingestellten Bereitstellungsdokumentation zu Azure Static Web Apps Nuxt 3.

Einrichten einer benutzerdefinierten Domäne