Condividi tramite

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

Questa esercitazione illustra come distribuire un'applicazione Nuxt 3 in App Web statiche di Azure. Nuxt 3 supporta il rendering universale (lato client e lato server), incluse le route server e API. Senza una configurazione aggiuntiva, è possibile distribuire app Nuxt 3 con rendering universale in App Web statiche di Azure. Quando l'app viene creata tramite il GitHub Action per le Azure Static Web Apps o tramite l'attività di Azure Pipelines, Nuxt 3 la trasforma automaticamente in asset statici e in un'applicazione Azure Functions, entrambe compatibili con Azure Static Web Apps.

Prerequisiti

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. Navigare verso http://github.com/staticwebdev/nuxt-3-starter/generate.

  2. Assegnare al repository il nome 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 Nuxt.js'app in fase di sviluppo:

    npm run dev -- -o

Navighi a http://localhost:3000 per aprire l'app, dove dovrebbe essere visibile il sito Web seguente nel browser prescelto. Selezionare i pulsanti per richiamare le route del server e dell'API.

Avviare l'app Nuxt.js

Distribuire il sito Nuxt 3

I passaggi seguenti illustrano come creare una risorsa di App Web statiche di Azure e configurarla per distribuire l'app da GitHub.

Creare una risorsa Azure Static Web Apps

  1. Passare al portale di Azure.

  2. Selezionare Crea una risorsa.

  3. Cercare App Web statiche.

  4. Selezionare App Web statiche.

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

  8. Immettere i valori di GitHub seguenti.

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

  9. Nella sezione Dettagli di compilazione, selezionare Personalizzato dal menu a discesa delle Preimpostazioni di compilazione e mantenere i valori predefiniti.

  10. Nella posizione dell'applicazione, digitare / nella casella.

  11. Nel percorso dell'API immettere .output/server nella casella.

  12. Nel percorso di output immettere .output/public nella casella.

Rivedi e crea

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

  2. Selezionare Crea per avviare la creazione dell'app Web statica ed effettuare 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, il flusso di lavoro di GitHub Actions in background è ancora in esecuzione. Una volta completato il flusso di lavoro, è possibile aggiornare il browser per visualizzare l'app Web.

È possibile controllare lo stato dei flussi di lavoro di Azioni navigando su Azioni per il tuo repository:

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

Sincronizzare le modifiche

Dopo aver creato l'app, Azure Static Web Apps ha creato un file del flusso di lavoro 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 ed eseguendo il push in GitHub. GitHub Actions compila e distribuisce automaticamente l'app.

Per ulteriori informazioni, consultare la documentazione del preset di distribuzione Nuxt 3 di Azure Static Web Apps.

Configurare un dominio personalizzato

  • Last updated on