Condividi tramite

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

Questa esercitazione illustra come distribuire un sito Web statico generato Next.js in App Web statiche di Azure. Per ulteriori informazioni sulle specificità di Next.js, vedere il file leggimi del template di avvio.

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 di avvio. Il repository starter contiene un'app Next.js esistente che supporta le route dinamiche.

Per iniziare, crea un nuovo repository nel tuo account GitHub a partire da un repository modello.

  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 per aprire l'app, in cui dovrebbe essere visualizzato il sito Web seguente aperto nel browser preferito:

Avviare Next.js'app

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

Pagina Dettagli

2. Creare un'app statica

I passaggi seguenti illustrano come collegare l'app ad App Web statiche di Azure. Una volta in Azure, è possibile distribuire l'applicazione in un ambiente di produzione.

  1. Vai al portale di Azure .

  2. Selezionare Crea una risorsa.

  3. Cercare App Web statiche.

  4. Selezionare App Web statica.

  5. Fare clic su Crea.

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

    Proprietà Value
    Subscription Il nome della sottoscrizione di Azure.
    Gruppo di risorse my-nextjs-group
    Nome my-nextjs-app
    Tipo di piano Gratuito
    Area per API Funzioni di Azure ambienti di staging Selezionare un'area vicina.
    Fonte GitHub

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

  8. Immettere i valori di GitHub seguenti.

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

  9. Nella sezione Dettagli di compilazione, selezionare Personalizzato dai Predefiniti di compilazione. Aggiungere i valori seguenti come per la configurazione di compilazione.

    Proprietà Value
    Percorso dell'app Immettere / nella casella.
    Percorso API Lasciare vuota questa casella.
    Percorso di output Immettere "out" nella casella.

3. Rivedere e creare

  1. Selezionare Rivedi + Crea per verificare che i dettagli siano tutti corretti.

  2. Selezionare Crea per avviare la creazione del servizio del'app Web statica del servizio app ed eseguire il provisioning di GitHub Actions per la distribuzione.

  3. Al termine della distribuzione, selezionare Vai 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 delle Azioni, accedi al dashboard delle Azioni del tuo 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. Sincronizzare le modifiche

Quando hai creato l'app, Azure App Web Statiche ha creato un file GitHub Actions nel tuo repository. Sincronizza con il server scaricando gli ultimi aggiornamenti nel tuo repository locale.

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

Configurazione del rendering statico

Per impostazione predefinita, l'applicazione viene considerata come un'applicazione ibrida sottoposta a 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. Vai al file GitHub Actions aggiunto da Azure Static Web Apps al tuo repository alla posizione .github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Aggiornare il processo di compilazione e distribuzione per avere una variabile di IS_STATIC_EXPORT ambiente impostata 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 ed eseguirne il push in GitHub.

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

Al termine della compilazione, il sito verrà renderizzato staticamente.

Pulire le risorse

Se non si intende continuare a usare questa app, è possibile eliminare l'istanza di App Web statiche di Azure seguendo questa procedura.

  1. Apri 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 dominio personalizzato

  • Last updated on