Distribuera statiskt renderade Next.js webbplatser på Azure Static Web Apps

  • Artikel
  • 2 minuter för att läsa

I den här självstudien lär du dig att distribuera enNext.js statisk webbplats till Azure Static Web Apps. Mer information om Next.js finns i readme för startmallen.

Förutsättningar

Konfigurera en Next.js app

I stället för att använda Next.js CLI för att skapa din app kan du använda en startdatabas. Startdatabasen innehåller ett befintligt Next.js som stöder dynamiska vägar.

Börja med att skapa en ny lagringsplats under ditt GitHub konto från en malldatabas.

  1. Gå till https://github.com/staticwebdev/nextjs-starter/generate

  2. Ge lagringsplatsen namnet nextjs-starter

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

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

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

    cd nextjs-starter

  5. Installera beroenden:

    npm install

  6. Börja Next.js app under utveckling:

    npm run dev

Gå till http://localhost:3000 för att öppna appen, där du bör se att följande webbplats är öppen i önskad webbläsare:

Starta Next.js appen

När du väljer ett ramverk eller bibliotek visas en informationssida om det valda objektet:

Sidan Details (Detaljer)

Distribuera din statiska webbplats

Följande steg visar hur du länkar din app till Azure Static Web Apps. I Azure kan du distribuera programmet till en produktionsmiljö.

Skapa en statisk app

  1. Gå till Azure Portal.

  2. Välj Skapa en resurs.

  3. Sök efter Static Web Apps.

  4. Välj Static Web Apps.

  5. Välj Skapa.

  6. Ange följande värden på fliken Grundläggande inställningar.

    Egenskap Värde
    Prenumeration Ditt Azure-prenumerationsnamn.
    Resursgrupp my-nextjs-group
    Namn my-nextjs-app
    Plantyp Kostnadsfri
    Region för Azure Functions API och mellanlagringsmiljöer Välj den 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 lämplig GitHub organisation.
    Lagringsplats Välj nextjs-starter.
    Gren Välj main.

  9. I avsnittet Build Details (Bygginformation) väljer du Custom (Anpassad) från Build Presets (Skapa förinställningar). Lägg till följande värden som för byggkonfigurationen.

    Egenskap Värde
    Applats Ange / i rutan.
    API-plats Lämna den här rutan tom.
    Utdataplats Ange i rutan.

Granska och skapa

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

  2. Välj Skapa för att börja skapa App Service Static Web App och etablera en GitHub åtgärd 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 omedelbart körs bygget fortfarande. När arbetsflödet är klart kan du uppdatera webbläsaren för att visa webbappen.

Om du vill kontrollera statusen för arbetsflödet Åtgärder går du till instrumentpanelen Åtgärder för din lagringsplats:

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

Nu startar eventuella ändringar i main -grenen en ny version och distribution av din webbplats.

Synkronisera ändringar

När du skapade appen skapade Azure Static Web Apps en åtgärdsfil GitHub på lagringsplatsen. Synkronisera med servern genom att hämta den senaste till din lokala lagringsplats.

Gå tillbaka till terminalen och kör följande kommando git pull origin main .

Rensa resurser

Om du inte tänker fortsätta att använda det här programmet kan du ta bort Azure Static Web Apps-instansen med följande steg:

  1. Öppna Azure-portalen.
  2. Sök efter my-nextjs-group från det översta sökfältet.
  3. Välj gruppnamnet.
  4. Välj knappen Ta bort.
  5. Välj Ja för att bekräfta borttagningsåtgärden.

Konfigurera en anpassad domän