Distribuire i siti Nuxt 3 con rendering universale in App Web statiche di Azure

Questa esercitazione descrive come distribuire un'applicazione Nuxt 3 in App Web statiche di Azure. Nuxt 3 supporta il rendering universale (lato client e lato server), tra cui route server e API. Senza configurazione aggiuntiva, è possibile distribuire app Nuxt 3 con rendering universale in App Web statiche di Azure. Quando l'app è incorporata nell'attività GitHub Action o Azure Pipelines App Web statiche, Nuxt 3 lo converte automaticamente in asset statici e un'app Funzioni di Azure compatibile con App Web statiche di Azure.

Prerequisiti

• Un account Azure con una sottoscrizione attiva. Creare un account gratuitamente.
• Un account GitHub. Creare un account gratuitamente.
• Node.js 16 o versioni successive installate.

Configurare un'app Nuxt 3

È possibile configurare un nuovo progetto Nuxt usando npx nuxi init nuxt-app. Invece di usare un nuovo progetto, questa esercitazione usa un repository esistente configurato per illustrare come distribuire un sito Nuxt 3 con rendering universale in App Web statiche di Azure.

1. Accedere a http://github.com/staticwebdev/nuxt-3-starter/generate.

2. Assegnare un nome al repository nuxt-3-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>/nuxt-3-starter
   

4. Passare all'app Nuxt.js appena clonata:

   cd nuxt-3-starter
   

5. Installare le dipendenze:

   npm install
   

6. Avviare l'app Nuxt.js in sviluppo:

   npm run dev -- -o
   

Passare a http://localhost:3000 aprire l'app, dove dovrebbe essere visualizzato il sito Web seguente aperto nel browser preferito. Selezionare i pulsanti per richiamare route server e API.

Distribuire il sito Nuxt 3

La procedura seguente illustra come creare una risorsa App Web statiche di Azure e configurarla per distribuire l'app da GitHub.

Creare una risorsa App Web statiche di Azure

1. Passare 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-nuxtjs-group
   Nome	my-nuxt3-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.

8. Immettere i valori GitHub seguenti.

   Proprietà	Valore
   Organizzazione	Selezionare l'organizzazione GitHub desiderata.
   Repository	Selezionare il repository creato in precedenza.
   Ramo	Selezionare main.

9. Nella sezione Dettagli compilazione selezionare Personalizzato nell'elenco a discesa Impostazioni di compilazione e mantenere i valori predefiniti.

10. Nella posizione dell'app immettere / nella casella.

11. Nel percorso api immettere .output/server nella casella.

12. Nella posizione dioutput immettere .output/public nella casella.

Rivedi e crea

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

2. Selezionare Crea per avviare la creazione dell'app Web statica e effettuare il provisioning di un 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, lo sfondo GitHub Actions flusso di lavoro è ancora in esecuzione. Al termine del flusso di lavoro, è quindi possibile aggiornare il browser per visualizzare l'app Web.

Per controllare lo stato dei flussi di lavoro di Actions, passare alle azioni disponibili per il repository:

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

Sincronizzare le modifiche

Durante la creazione dell'app, App Web statiche di Azure ha creato un file del flusso di lavoro di GitHub Actions nel repository. Tornare al terminale ed eseguire il comando seguente per eseguire il pull del commit contenente il nuovo file.

git pull

Apportare modifiche all'app aggiornando il codice e eseguendo il push in GitHub. GitHub Actions compila automaticamente e distribuisce l'app.

Per altre informazioni, vedere la documentazione App Web statiche di Azure set di impostazioni di distribuzione nuxt 3.