Statisch weergegeven Next.js websites implementeren op Azure Static Web Apps

  • Artikel

In deze zelfstudie leert u hoe u een Next.js gegenereerde statische website implementeert in Azure Static Web Apps. Zie de leesmij voor starterssjablonen voor meer informatie over Next.js details.

Vereisten

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 om te beginnen een nieuwe opslagplaats onder uw GitHub-account, met behulp van een opslagplaatssjabloon.

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

  2. Geef de opslagplaats de naam nextjs-starter

  3. Kloon de nieuwe opslagplaats vervolgens naar de computer. Zorg ervoor dat u <YOUR_GITHUB_ACCOUNT_NAME> vervangt door de naam van uw account.

    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 Next.js app in ontwikkeling.

    npm run dev

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

Next.js-app starten

Wanneer u een framework of bibliotheek selecteert, ziet u een pagina met details 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 de Azure Portal.

  2. Selecteer Een resource maken.

  3. Zoek Static Web Apps.

  4. Selecteer Statische web-app.

  5. Selecteer Maken.

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

    Eigenschap Waarde
    Abonnement Uw Azure-abonnementnaam.
    Resourcegroep my-nextjs-group
    Naam my-nextjs-app
    Plantype Gratis
    Regio voor Azure Functions-API en faseringsomgevingen Selecteer een regio die zich het dichtst bij u in de buurt bevindt.
    Bron GitHub

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

  8. Voer de volgende GitHub-waarden in.

    Eigenschap Waarde
    Organisatie Selecteer de juiste GitHub-organisatie.
    Opslagplaats Selecteer nextjs-starter.
    Vertakking Selecteer hoofd.

  9. Selecteer in de sectie Builddetailsde optie Aangepast in de build-voorinstellingen. Voeg de volgende waarden toe als voor de buildconfiguratie.

    Eigenschap Waarde
    App-locatie Geef / op in het vak.
    API-locatie Laat dit vak leeg.
    Uitvoerlocatie Voer in het vak in.

3. Controleren en maken

  1. Selecteer Controleren en maken om te controleren of de details correct zijn.

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

  3. Zodra de implementatie is voltooid, selecteert u 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 werkstroom is voltooid, kunt u de browser vernieuwen om uw web-app weer te geven.

Alle wijzigingen die in de main vertakking zijn aangebracht, beginnen nu met een nieuwe build en implementatie van uw website.

4. Wijzigingen synchroniseren

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

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

Statische rendering configureren

De toepassing wordt standaard behandeld als een hybride gegenereerde 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 toegevoegd aan uw opslagplaats op.github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Werk de taak Build and Deploy bij zodat een omgevingsvariabele wordt IS_STATIC_EXPORT ingesteld 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 in 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.

Resources opschonen

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

  1. Open de Azure Portal.
  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