Dela via

Distribuera Nuxt 3-webbplatser med universell rendering i Azure Static Web Apps

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 GitHub-åtgärden för Static Web Apps 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 hjälp av 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 som konfigurerats för att demonstrera hur du distribuerar en Nuxt 3-webbplats med universell rendering i Azure Static Web Apps.

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

  2. Ge lagringsplatsen namnet nuxt-3-starter.

  3. Klona sedan det nya arkivet till din dator. 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 öppen i önskad webbläsare. Välj knapparna för att anropa server- och API-vägar.

Starta Nuxt.js-appen

Distribuera din Nuxt 3-webbsida

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. Gå till Azure-portalen.

  2. Välj Skapa en resurs.

  3. Sök efter Static Web Apps.

  4. Välj Statiska webbappar.

  5. Välj Skapa.

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

    Fastighet Värde
    Subscription Ditt Azure-prenumerationsnamn.
    resursgrupp my-nuxtjs-group
    Namn my-nuxt3-app
    Typ av plan Gratis
    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.

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

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

  10. I applikationsplatsen anger du / i rutan.

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

  12. På utdataläge 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 ditt distribuerade program.

Om webbplatsen inte läses in omedelbart, körs fortfarande GitHub Actions-arbetsflödet i bakgrunden. 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 lagringsplatsen:

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 den commit 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 för distributionsförinställningen för Azure Static Web Apps Nuxt 3.

Konfigurera en anpassad domän