Delen via

Statische weergegeven Next.js websites implementeren in Azure Static Web Apps

In deze zelfstudie leert u hoe u een Next.js gegenereerde statische website implementeert in Azure Static Web Apps. Zie de readme van de startersjabloon voor meer informatie over de Next.js specificaties.

Vereiste voorwaarden

1. Een Next.js-app instellen

In plaats van de Next.js CLI te gebruiken om uw app te maken, kunt u een startersopslagplaats gebruiken. De startersopslagplaats bevat een bestaande Next.js-app die dynamische routes ondersteunt.

Maak eerst een nieuwe opslagplaats onder uw GitHub-account vanuit een sjabloonopslagplaats.

  1. Ga naar https://github.com/staticwebdev/nextjs-starter/generate

  2. Geef de opslagplaats de naam nextjs-starter

  3. Kloon vervolgens de nieuwe repository naar je computer. Zorg ervoor dat u <YOUR_GITHUB_ACCOUNT_NAME> vervangt met uw accountnaam.

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

  4. Ga naar de zojuist gekloonde Next.js-app.

    cd nextjs-starter

  5. Installeer afhankelijkheden.

    npm install

  6. Start de Next.js app in ontwikkelmodus.

    npm run dev

  7. Ga naar de http://localhost:3000 app om de app te openen, waar u de volgende website moet openen in de browser van uw voorkeur:

Next.js-app starten

Wanneer u een framework of bibliotheek selecteert, ziet u een detailpagina over het geselecteerde item:

Pagina Details

2. Een statische app maken

In de volgende stappen ziet u hoe u uw app koppelt aan Azure Static Web Apps. Eenmaal in Azure kunt u de toepassing implementeren in een productieomgeving.

  1. Ga naar Azure Portal.

  2. Selecteer Een resource maken.

  3. Zoek naar Static Web Apps.

  4. Kies Static Web App.

  5. Klik op Creëren.

  6. Voer op het tabblad Basisinformatie de volgende waarden in.

    Vastgoed Waarde
    Subscription Uw Azure-abonnementnaam.
    Resourcegroep my-nextjs-group
    Naam my-nextjs-app
    Plantype Gratis
    Regio voor Azure Functions-API en faseringsomgevingen Selecteer een regio die het dichtst bij u in de buurt ligt.
    bron GitHub

  7. Selecteer Aanmelden met GitHub en verifieer met GitHub als u hierom wordt gevraagd.

  8. Voer de volgende GitHub-waarden in.

    Vastgoed Waarde
    Organisatie Selecteer de juiste GitHub-organisatie.
    Opslagplaats Selecteer nextjs-starter.
    Filiaal Selecteer hoofd.

  9. In de sectie Builddetails, selecteer Aangepast in de Build-voorinstellingen. Voeg de volgende waarden toe voor de buildconfiguratie.

    Vastgoed Waarde
    App-locatie Voer / in het vak in.
    Api-locatie Laat dit vak leeg.
    Uitvoerlocatie Voer in het vak in.

3. Beoordelen en maken

  1. Selecteer Controleren + Maken om te controleren of de details juist zijn.

  2. Selecteer Maken om het maken van de statische App Service-web-app te starten en een GitHub Actions in te richten voor implementatie.

  3. Zodra de implementatie is voltooid, selecteer Ga naar resource.

  4. Selecteer in het venster Overzicht de URL-koppeling om uw geïmplementeerde toepassing te openen.

Als de website niet onmiddellijk wordt geladen, wordt de build nog steeds uitgevoerd. Als u de status van de werkstroom Acties wilt controleren, gaat u naar het dashboard Acties voor uw opslagplaats:

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

Zodra de workflow is voltooid, kunt u de browser vernieuwen om uw webapp weer te geven.

Elke wijziging die in de main branch is aangebracht, start nu een nieuwe build en implementatie van uw website.

4. Synchronisatiewijzigingen

Wanneer u de app hebt gemaakt, heeft Azure Static Web Apps een GitHub Actions-bestand in uw opslagplaats gemaakt. Synchroniseer met de server door de meest recente gegevens op te halen naar uw lokale opslagplaats.

Ga terug naar de terminal en voer de volgende opdracht git pull origin mainuit.

Statische rendering configureren

De toepassing wordt standaard behandeld als een hybride weergegeven Next.js toepassing, maar als u deze wilt blijven gebruiken als een statische sitegenerator, moet u de implementatietaak bijwerken.

  1. Open de opslagplaats in Visual Studio Code.

  2. Navigeer naar het GitHub Actions-bestand dat Azure Static Web Apps heeft toegevoegd aan uw opslagplaats op .github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Werk de Build and Deploy job bij om een omgevingsvariabele van IS_STATIC_EXPORT in te stellen op 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. Voer de wijzigingen door naar Git en push ze naar GitHub.

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

Zodra de build is voltooid, wordt de site statisch weergegeven.

De hulpbronnen opschonen

Als u deze app niet meer gaat gebruiken, kunt u het Azure Static Web Apps-exemplaar verwijderen door de volgende stappen uit te voeren.

  1. Open het Azure-portaal.
  2. Zoek in de bovenste zoekbalk naar my-nextjs-group .
  3. Selecteer de groepsnaam.
  4. Selecteer Verwijderen.
  5. Selecteer Ja om de verwijderactie te bevestigen.

Volgende stappen

Een aangepast domein instellen

  • Last updated on