Statisch gerenderde websites Next.js websites op Azure Static Web Apps

  • Artikel
  • 2 minuten om te lezen

In deze zelfstudie leert u hoe u een met Next.js gegenereerde statische website implementeert in Azure Static Web Apps. Zie het leesmijNext.js van de startersjabloonvoor meer informatie over specifieke informatie.

Vereisten

Een Next.js-app instellen

In plaats van de Next.js CLI te gebruiken om uw app te maken, kunt u een starter-opslagplaats gebruiken. De starteropslagplaats bevat een bestaande Next.js toepassing 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 de Next.js-app in de ontwikkelomgeving:

    npm run dev

Ga naar http://localhost:3000 om de app te openen. Hier ziet u de volgende website geopend in uw voorkeursbrowser:

Next.js-app starten

Wanneer u een framework of bibliotheek selecteert, ziet u een pagina met details over het geselecteerde item:

Pagina Details

Uw statische website implementeren

De volgende stappen laten zien hoe u uw app aan uw Azure Static Web Apps. Eenmaal in Azure kunt u de toepassing implementeren in een productieomgeving.

Een statische app maken

  1. Navigeer naar Azure Portal.

  2. Selecteer Een resource maken.

  3. Zoek Static Web Apps.

  4. Selecteer Statische web-apps.

  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 het dichtst bij u in de buurt is.
    Bron GitHub

  7. Selecteer Aanmelden met GitHub en verifieren met GitHub.

  8. Voer de volgende GitHub in.

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

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

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

Controleren en maken

  1. Selecteer de knop Beoordelen en maken om te controleren of de details juist zijn.

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

  3. Zodra de implementatie is voltooid, selecteert u Ga naar resource.

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

Als de website niet onmiddellijk wordt geladen, wordt de build nog steeds uitgevoerd. Zodra de werkstroom is voltooid, kunt u de browser vernieuwen om uw web-app weer te geeft.

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

Als er wijzigingen zijn aangebracht in de main -vertakking, start u een nieuwe build en implementatie van uw website.

Wijzigingen synchroniseren

Toen u de app hebt gemaakt, Azure Static Web Apps u 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.

Resources opschonen

Als u deze toepassing verder niet gaat gebruiken, kunt u het Azure Static Web Apps-exemplaar verwijderen door de volgende stappen te volgen:

  1. Open de Azure Portal.
  2. Zoek in de bovenste zoekbalk naar my-nextjs-group.
  3. Selecteer de naam van de groep.
  4. Selecteer op de knop Verwijderen.
  5. Selecteer Ja om de verwijderactie te bevestigen.

Een aangepast domein instellen