Dela via

Distribuera Nuxt 3-platser med universell rendering på Azure Static Web Apps

  • Artikel

I den här självstudien lär du dig att distribuera ett Nuxt 3-program till Azure Static Web Apps. Nuxt 3 stöder universell återgivning (klientsidan och serversidan), inklusive server- och API-vägar. Utan extra konfiguration kan du distribuera Nuxt 3-appar med universell rendering till Azure Static Web Apps. När appen är inbyggd i uppgiften Static Web Apps GitHub Action eller Azure Pipelines konverterar Nuxt 3 den automatiskt till statiska tillgångar och en Azure Functions app som är kompatibel med Azure Static Web Apps.

Förutsättningar

Konfigurera en Nuxt 3-app

Du kan konfigurera ett nytt Nuxt-projekt med .npx nuxi init nuxt-app I stället för att använda ett nytt projekt använder den här självstudien en befintlig lagringsplats för att visa hur du distribuerar en Nuxt 3-plats med universell rendering på Azure Static Web Apps.

  1. Navigera till http://github.com/staticwebdev/nuxt-3-starter/generate.

  2. Ge lagringsplatsen namnet nuxt-3-starter.

  3. Klona sedan den nya lagringsplatsen till datorn. Ersätt <YOUR_GITHUB_ACCOUNT_NAME> med ditt kontonamn.

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

  4. Gå till den nyligen klonade Nuxt.js appen:

    cd nuxt-3-starter

  5. Installera beroenden:

    npm install

  6. Starta Nuxt.js app under utveckling:

    npm run dev -- -o

Gå till http://localhost:3000 för att öppna appen, där du bör se följande webbplats öppna i önskad webbläsare. Välj knapparna för att anropa server- och API-vägar.

Starta Nuxt.js app

Distribuera din Nuxt 3-webbplats

Följande steg visar hur du skapar en Azure Static Web Apps resurs och konfigurerar den för att distribuera din app från GitHub.

Skapa en Azure Static Web Apps resurs

  1. Navigera till Azure-portalen.

  2. Välj Skapa en resurs.

  3. Sök efter Static Web Apps.

  4. Välj Static Web Apps.

  5. Välj Skapa.

  6. På fliken Grundläggande anger du följande värden.

    Egenskap Värde
    Prenumeration Ditt Azure-prenumerationsnamn.
    Resursgrupp my-nuxtjs-group
    Namn my-nuxt3-app
    Plantyp Kostnadsfri
    Region för Azure Functions API och mellanlagringsmiljöer Välj en region som är närmast dig.
    Källa GitHub

  7. Välj Logga in med GitHub och autentisera med GitHub.

  8. Ange följande GitHub-värden.

    Egenskap Värde
    Organisation Välj önskad GitHub-organisation.
    Lagringsplats Välj den lagringsplats som du skapade tidigare.
    Gren Välj huvud.

  9. I avsnittet Bygginformation väljer du Anpassad i listrutan Build Presets (Skapa förinställningar ) och behåller standardvärdena.

  10. På appplatsen anger du / i rutan .

  11. På API-platsen anger du .output/server i rutan .

  12. På utdataplatsen anger du .output/public i rutan .

Granska och skapa

  1. Välj Granska + Skapa för att kontrollera att informationen är korrekt.

  2. Välj Skapa för att starta skapandet av den statiska webbappen och etablera en GitHub Actions för distribution.

  3. När distributionen är klar väljer du Gå till resurs.

  4. I fönstret Översikt väljer du URL-länken för att öppna det distribuerade programmet.

Om webbplatsen inte läses in direkt körs fortfarande bakgrunden GitHub Actions arbetsflöde. När arbetsflödet är klart kan du uppdatera webbläsaren för att visa webbappen.

Du kan kontrollera statusen för åtgärdsarbetsflödena genom att gå till åtgärder för din lagringsplats:

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

Synkronisera ändringar

När du skapade appen skapade Azure Static Web Apps en GitHub Actions arbetsflödesfil på lagringsplatsen. Gå tillbaka till terminalen och kör följande kommando för att hämta incheckningen som innehåller den nya filen.

git pull

Gör ändringar i appen genom att uppdatera koden och skicka den till GitHub. GitHub Actions skapar och distribuerar appen automatiskt.

Mer information finns i dokumentationen Azure Static Web Apps Nuxt 3-distributionsförinställning.

Konfigurera en anpassad domän