Dela via

Distribuera statiska Next.js webbplatser i Azure Static Web Apps

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

Förutsättningar

1. Konfigurera en Next.js-applikation

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

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

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

  2. Namnge lagringsplatsen nextjs-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>/nextjs-starter

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

    cd nextjs-starter

  5. Installera nödvändiga filer.

    npm install

  6. Starta Next.js app under utveckling.

    npm run dev

  7. Gå till http://localhost:3000 för att öppna appen, där du ska se följande webbplats öppen i din önskade webbläsare.

Starta Next.js app

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

Informationssida

2. Skapa en statisk app

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

  1. Gå till Azure-portalen.

  2. Välj Skapa en resurs.

  3. Sök efter Static Web Apps.

  4. Välj Statisk webbapp.

  5. Välj Skapa.

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

    Fastighet Värde
    Subscription Ditt Azure-prenumerationsnamn.
    resursgrupp my-nextjs-group
    Namn my-nextjs-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 om du uppmanas att göra det.

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

    Fastighet Värde
    Organisation Välj lämplig GitHub-organisation.
    Lagringsplats Välj nextjs-starter.
    Filial Välj huvud.

  9. I avsnittet Byggdetaljer väljer du Anpassad från Byggförinställningar. Lägg till följande värden som för byggkonfigurationen.

    Fastighet Värde
    Appplats Ange / i rutan.
    Api-plats Lämna rutan tom.
    Utdataplats Ange out i rutan.

3. 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 apptjänstens statiska webbapp 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 hemsidan inte laddas in omedelbart, körs byggprocessen fortfarande. För att kontrollera statusen för åtgärdsarbetsflödet, navigera till åtgärdsinstrumentpanelen för ditt arkiv:

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

När arbetsflödet är klart kan du uppdatera webbläsaren för att visa webbappen.

Nu startar alla ändringar som gjorts i grenen main en ny version och distribution av webbplatsen.

4. Synkronisera ändringar

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

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

Konfigurera statisk återgivning

Som standard behandlas applikationen som en hybridåtergivande Next.js-applikation, men för att fortsätta använda den som en statisk webbplatsgenerator måste du uppdatera driftsättningsuppgiften.

  1. Öppna lagringsplatsen i Visual Studio Code.

  2. Navigera till GitHub Actions-filen som Azure Static Web Apps lade till i ditt förvar på .github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Uppdatera bygg- och distributionsjobbet så att en miljövariabel IS_STATIC_EXPORT anges till true:

        - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

  4. Checka in ändringarna i git och skicka dem till GitHub.

    git commit -am "Configuring static site generation" && git push

När bygget har slutförts återges webbplatsen statiskt.

Rensa resurser

Om du inte fortsätter att använda den här appen kan du ta bort Azure Static Web Apps-instansen genom följande steg.

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

Nästa steg

Konfigurera en anpassad domän