Distribuire siti Web Next.js con rendering statico in App Web statiche di Azure
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.
- Un account Azure con una sottoscrizione attiva. Creare un account gratuitamente.
- Un account GitHub. Creare un account gratuitamente.
- Node.js installato.
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.
Passare a https://github.com/staticwebdev/nextjs-starter/generate
Assegnare al repository il nome nextjs-starter
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
Passare all'app Next.js appena clonata.
cd nextjs-starter
Installare le dipendenze.
npm install
Avviare Next.js'app in fase di sviluppo.
npm run dev
Passare a
http://localhost:3000
aprire l'app, dove si dovrebbe visualizzare il sito Web seguente aperto nel browser preferito:
Quando si seleziona un framework o una libreria, viene visualizzata una pagina dei dettagli sull'elemento selezionato:
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.
Accedere al portale di Azure.
Selezionare Crea una risorsa.
Cercare App Web statiche.
Selezionare App Web statiche.
Selezionare Crea.
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 Selezionare Accedi con GitHub ed eseguire l'autenticazione con GitHub, se richiesto.
Immettere i valori GitHub seguenti.
Proprietà Valore Organizzazione Selezionare l'organizzazione GitHub appropriata. Repository Selezionare nextjs-starter. Ramo Selezionare main. 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.
Selezionare Rivedi e crea per verificare che i dettagli siano tutti corretti.
Selezionare Crea per avviare la creazione dell'app Web statica servizio app e effettuare il provisioning di un GitHub Actions per la distribuzione.
Al termine della distribuzione, passare alla risorsa.
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.
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
.
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.
Aprire il repository in Visual Studio Code.
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
Aggiornare il processo Build and Deploy per avere una variabile di ambiente impostata
IS_STATIC_EXPORT
sutrue
:- 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
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.
Se non si continuerà a usare questa app, è possibile eliminare l'istanza di App Web statiche di Azure tramite la procedura seguente.
- Aprire il portale di Azure.
- Cercare my-nextjs-group dalla barra di ricerca superiore.
- Selezionare il nome del gruppo.
- Selezionare Elimina.
- Selezionare Sì per confermare l'azione di eliminazione.