Distribuire siti Web Next.js con rendering statico in App Web statiche di Azure

  • Articolo

Questa esercitazione descrive come distribuire un sito Web statico generatoNext.jsin App Web statiche di Azure. Per altre informazioni sulle Next.js specifiche, vedere il modello di avvio readme.

Prerequisiti

1. Configurare un'app Next.js

Anziché usare l'interfaccia della riga di comando di Next.js per creare l'app, è possibile usare un repository iniziale. Il repository starter contiene un'app Next.js esistente che supporta le route dinamiche.

Per iniziare, creare un nuovo repository da un repository di modelli nell'account GitHub.

  1. Passare a https://github.com/staticwebdev/nextjs-starter/generate

  2. Assegnare al repository il nome nextjs-starter

  3. Clonare quindi il nuovo repository nel computer. Assicurarsi di sostituire <YOUR_GITHUB_ACCOUNT_NAME> con il nome dell'account.

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

  4. Passare all'app Next.js appena clonata.

    cd nextjs-starter

  5. Installare le dipendenze.

    npm install

  6. Avviare Next.js'app in fase di sviluppo.

    npm run dev

  7. Passare a http://localhost:3000 aprire l'app, dove si dovrebbe visualizzare il sito Web seguente aperto nel browser preferito:

Avviare l'app Next.js

Quando si seleziona un framework o una libreria, viene visualizzata una pagina dei dettagli sull'elemento selezionato:

Pagina dei dettagli

2. Creare un'app statica

La procedura seguente illustra come collegare l'app a App Web statiche di Azure. Una volta in Azure, è possibile distribuire l'applicazione in un ambiente di produzione.

  1. Accedere al portale di Azure.

  2. Selezionare Crea una risorsa.

  3. Cercare App Web statiche.

  4. Selezionare App Web statiche.

  5. Selezionare Crea.

  6. Nella scheda Informazioni di base immettere i valori seguenti.

    Proprietà Valore
    Sottoscrizione Il nome della sottoscrizione di Azure.
    Gruppo di risorse my-nextjs-group
    Nome my-nextjs-app
    Tipo di piano Gratuito
    Region for Azure Functions API and staging environments (Area per l'API Funzioni di Azure e gli ambienti di gestione temporanea) Selezionare un'area più vicina all'utente.
    Origine GitHub

  7. Selezionare Accedi con GitHub ed eseguire l'autenticazione con GitHub, se richiesto.

  8. Immettere i valori GitHub seguenti.

    Proprietà Valore
    Organizzazione Selezionare l'organizzazione GitHub appropriata.
    Repository Selezionare nextjs-starter.
    Ramo Selezionare main.

  9. Nella sezione Dettagli compilazione selezionare Personalizzato nei set di impostazioni di compilazione. Aggiungere i valori seguenti come per la configurazione di compilazione.

    Proprietà Valore
    Percorso app Immettere / nella casella.
    Percorso API Lasciare vuota questa casella.
    Percorso di output Immettere nella casella.

3. Esaminare e creare

  1. Selezionare Rivedi e crea per verificare che i dettagli siano tutti corretti.

  2. Selezionare Crea per avviare la creazione dell'app Web statica servizio app e effettuare il provisioning di un GitHub Actions per la distribuzione.

  3. Al termine della distribuzione, passare alla risorsa.

  4. Nella finestra Panoramica selezionare il collegamento URL per aprire l'applicazione distribuita.

Se il sito Web non viene caricato immediatamente, la compilazione è ancora in esecuzione. Per controllare lo stato del flusso di lavoro Azioni, passare al dashboard Azioni per il repository:

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

Al termine del flusso di lavoro, è possibile aggiornare il browser per visualizzare l'app Web.

Ora tutte le modifiche apportate al main ramo avviano una nuova compilazione e distribuzione del sito Web.

4. Modifiche di sincronizzazione

Quando è stata creata l'app, App Web statiche di Azure creato un file GitHub Actions nel repository. Sincronizzare con il server eseguendo il pull dell'ultima versione nel repository locale.

Tornare al terminale ed eseguire il comando git pull origin main.

Configurazione del rendering statico

Per impostazione predefinita, l'applicazione viene considerata come un'applicazione ibrida di rendering Next.js, ma per continuare a usarla come generatore di siti statici, è necessario aggiornare l'attività di distribuzione.

  1. Aprire il repository in Visual Studio Code.

  2. Passare al file GitHub Actions che App Web statiche di Azure aggiunto al repository in.github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Aggiornare il processo Build and Deploy per avere una variabile di ambiente impostata IS_STATIC_EXPORT su 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. Eseguire il commit delle modifiche in Git e eseguirne il push in GitHub.

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

Al termine della compilazione, il sito verrà eseguito in modo statico.

Pulire le risorse

Se non si continuerà a usare questa app, è possibile eliminare l'istanza di App Web statiche di Azure tramite la procedura seguente.

  1. Aprire il portale di Azure.
  2. Cercare my-nextjs-group dalla barra di ricerca superiore.
  3. Selezionare il nome del gruppo.
  4. Selezionare Elimina.
  5. Selezionare Sì per confermare l'azione di eliminazione.

Passaggi successivi

Configurare un nome di dominio