Esercizio - Creare un'app Web statica di Azure

  • 5 minuti

In questo esercizio viene creata un'istanza di App Web statiche di Azure che include un flusso di lavoro di GitHub Actions per la compilazione e la pubblicazione automatiche dell'applicazione.

Creare un'app Web statica

Ora che è stato creato il repository GitHub, è possibile creare un'istanza di App Web statiche di Azure dal portale di Azure.

Questo modulo usa la sandbox di Azure per offrire una sottoscrizione di Azure temporanea gratuita da usare per completare l'esercizio. Prima di procedere, verificare di aver attivato la sandbox nella parte superiore di questa pagina.

  1. Accedere al portale di Azure con lo stesso account usato per attivare la sandbox.

  2. Nella home page di Azure, in Servizi di Azure selezionare Crea una risorsa. Viene visualizzato il riquadro Crea una risorsa.

  3. Nella casella di ricerca del marketplace cercare e selezionare App Web statica. Verrà visualizzato il riquadro App Web statica.

  4. Seleziona Crea. Verrà visualizzato il riquadro Crea app Web statica. Configurare la nuova app e collegarla al repository GitHub.

  5. Nella scheda Informazioni di base immettere i valori indicati di seguito per ogni impostazione.

    Impostazione Valore
    Dettagli del progetto
    Subscription Concierge Subscription
    Gruppo di risorse [Nome gruppo di risorse sandbox]
    Dettagli app Web statica
    Nome Assegnare un nome all'app. I caratteri validi sono a-z (senza distinzione tra maiuscole e minuscole), 0-9 e -.
    Piano di hosting
    Piano tariffario per l'applicazione Selezionare Gratuito
    Dettagli di Funzioni di Azure e della gestione temporanea
    Region for Azure Functions API and staging environments (Area per l'API Funzioni di Azure e gli ambienti di gestione temporanea) Selezionare l'area più vicina
    Dettagli della distribuzione
    Origine Selezionare GitHub
    Account GitHub Selezionare Accedi con GitHub. Verrà visualizzato il riquadro Authorize Azure Static Web Apps (Autorizza App Web statiche di Azure). Selezionare Autorizza Azure-App-Service-Static-Web-Apps. Immettere la password.
    Organizzazione Selezionare l'organizzazione in cui è stato creato il repository
    Repository my-static-blazor-app
    Filiale main
    Dettagli di compilazione
    Build Presets (Set di impostazioni di compilazione) Blazor
    App location (Percorso app) Client
    Percorso API Api
    Percorso di output wwwroot

  6. Selezionare Rivedi e crea>Crea.

  7. Al completamento della distribuzione, selezionare Vai alla risorsa. Verrà visualizzato il riquadro App Web statica.

Testare il flusso di lavoro di GitHub Actions

A questo punto, l'istanza di App Web statiche è stata creata in Azure, ma l'app non è ancora stata distribuita. Il flusso di lavoro di GitHub Actions creato da Azure nel repository viene eseguito automaticamente per attivare la prima compilazione e la prima distribuzione dell'app, ma per il completamento sono necessari alcuni minuti.

È possibile controllare lo stato della compilazione e della distribuzione selezionando il collegamento seguente per passare pagina Actions del repository GitHub:

Screenshot che mostra come visualizzare lo stato di avanzamento del flusso di lavoro di GitHub Actions.

Nella pagina:

  1. Selezionare Azure Static Web Apps CI/CD (CI/CD App Web statiche di Azure).

  2. Selezionare il commit con titolo ci: add Azure Static Web Apps workflow file.

  3. Selezionare il collegamento Build and Deploy Job (Compila e distribuisci processo)

Da qui è possibile osservare lo stato dell'app durante la compilazione.

Visualizzazione del sito Web

Al termine della compilazione e della pubblicazione dell'app Web tramite GitHub Actions, è possibile visualizzare l'app in esecuzione.

Selezionare il collegamento URL nel portale di Azure per visitare l'app nel browser.

L'app è ora disponibile a livello globale, ma è ancora mostra Caricamento dei dati in corso perché non sono ancora disponibili dati o API. Nella prossima sezione verrà aggiunta l'API per l'app Web.

Complimenti. È stata distribuita la prima app in App Web statiche di Azure.

Nota

Se viene visualizzata una pagina Web che indica che l'app non è stata ancora compilata e distribuita, nessun problema. Provare ad aggiornare il browser dopo un minuto. GitHub Actions viene eseguito automaticamente quando viene creata l'istanza di App Web statiche di Azure. Di conseguenza, se viene visualizzata la pagina iniziale, l'app è ancora in fase di distribuzione.

Passaggi successivi

L'app è priva di un'API per la lista della spesa. Verrà descritto ora come aggiungere un'API di Funzioni di Azure all'app che viene pubblicata in Azure insieme agli asset statici.