Dela via

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

  • Artikel

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 startmallens readme.

Förutsättningar

1. 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 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. Ge lagringsplatsen namnet nextjs-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>/nextjs-starter

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

    cd nextjs-starter

  5. Installera beroenden.

    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 bör se följande webbplats öppna i önskad webbläsare:

Starta Next.js app

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

Sidan Details (Detaljer)

2. Skapa en statisk app

Följande steg visar hur du länkar din app till Azure Static Web Apps. När du är 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. Ange följande värden på fliken Grundläggande inställningar.

    Egenskap Värde
    Prenumeration Namnet på din Azure-prenumeration.
    Resursgrupp my-nextjs-group
    Namn my-nextjs-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 om du uppmanas till det.

  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 huvud.

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

    Egenskap Värde
    Applats Ange / i rutan.
    API-plats Lämna rutan tom.
    Utdataplats Skriv ut 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 börja skapa App Service Static Web App 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 omedelbart körs bygget fortfarande. Om du vill kontrollera status för arbetsflödet Åtgärder går du till instrumentpanelen Åtgärder för lagringsplatsen:

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 rendering

Som standard behandlas programmet som en hybrid renderad Next.js program, men för att fortsätta använda det som en generator för statisk plats måste du uppdatera distributionsuppgiften.

  1. Öppna lagringsplatsen i Visual Studio Code.

  2. Gå till den GitHub Actions fil som Azure Static Web Apps lagts till på lagringsplatsen på.github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Uppdatera build - och deploy-jobbet så att miljövariabeln 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 push-överför dem till GitHub.

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

När bygget har slutförts renderas webbplatsen statiskt.

Rensa resurser

Om du inte kommer att fortsätta använda den här appen kan du ta bort Azure Static Web Apps-instansen med hjälp av följande steg.

  1. Öppna Azure-portalen.
  2. Sök efter my-nextjs-group i 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