Esercizio - Creare un'app Web statica di Azure

  • 5 minuti

In questo esercizio si creerà 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.

La sandbox di Azure attivata consente di usare i servizi di Azure senza incorrere in alcun costo.

Installare l'estensione App Web statiche di Azure per Visual Studio Code

  1. Passare a Visual Studio Marketplace e installare l'estensione App Web statiche di Azure per Visual Studio Code.

  2. Quando la scheda dell’estensione viene caricata in Visual Studio Code, selezionare Installa.

  3. Al termine dell'installazione, selezionare Riavvia per aggiornare qualora necessario.

Accedere ad Azure in Visual Studio Code

  1. In Visual Studio Code accedere ad Azure selezionando Visualizza>riquadro comandi e immettendo Azure: Accedi.

    Importante

    Accedere ad Azure con lo stesso account usato per creare la sandbox. La sandbox consente di accedere a una sottoscrizione Concierge.

  2. Seguire le istruzioni per copiare e incollare il codice fornito nel Web browser, che autentica la sessione di Visual Studio Code.

Selezionare la sottoscrizione

  1. Aprire Visual Studio Code, selezionare File > Apri e aprire il repository clonato nel computer nell'editor.

  2. Verificare di avere filtrato le sottoscrizioni di Azure per includere la sottoscrizione Concierge Subscription aprendo il riquadro comandi, immettendo Azure: Select Subscriptions e premendo INVIO.

  3. Selezionare Concierge Subscription e premere INVIO.

    Screenshot of VS Code showing how to filter by subscription.

Creare un'app Web statica

  1. Aprire Visual Studio Code e selezionare File > Apri per aprire il repository clonato nel computer nell'editor.

  2. In Visual Studio Code selezionare il logo di Azure sulla barra delle attività per aprire la finestra delle estensioni di Azure.

    Screenshot of the Azure Logo in VS Code.

    Nota

    È necessario accedere ad Azure e GitHub. Se non è già stato effettuato l'accesso ad Azure e GitHub da Visual Studio Code, l'estensione richiederà di accedere a entrambi durante il processo di creazione.

  3. Posizionare il mouse sull'intestazione App Web statiche, fare clic con il pulsante destro del mouse e selezionare Crea app Web statica.

    Screenshot showing where to go to create a web app.

  4. Immettere my-first-static-web-app e premere INVIO.

    Screenshot showing how to create a Static Web App.

  5. Selezionare la posizione e premere INVIO.

    Screenshot showing how to select a subscription.

  6. Selezionare l'opzione Personalizzata e premere INVIO

    Screenshot showing the custom option selected.

  1. Selezionare angular-app come percorso del codice dell'applicazione e premere INVIO.

    Screenshot showing the code location entered as Angular app.

  2. Immettere dist/angular-app come percorso di output di compilazione in cui vengono compilati i file per la produzione nell'app e premere INVIO.

    Screenshot showing how to enter the build output location for Angular.

  1. Selezionare react-app come percorso del codice dell'applicazione e premere INVIO.

    Screenshot showing the code location entered as react app.

  2. Immettere build come percorso di output di compilazione in cui vengono compilati i file per la produzione nell'app e premere INVIO.

    Screenshot showing how to enter the build output location for React.

  1. Selezionare svelte-app come percorso del codice dell'applicazione e premere INVIO.

    Screenshot showing the code location entered as Svelte app.

  2. Immettere public come percorso di output di compilazione in cui vengono compilati i file per la produzione nell'app e premere INVIO.

    Screenshot showing how to enter the build output location for Svelte.

  1. Selezionare vue-app come percorso del codice dell'applicazione e premere INVIO.

    Screenshot showing the code location entered as Vue app.

  2. Immettere dist come percorso di output di compilazione in cui vengono compilati i file per la produzione nell'app e premere INVIO.

    Screenshot showing how to enter the build output location for Vue

Nota

Il repository potrebbe essere leggermente diverso da quelli usati in precedenza. Contiene quattro diverse app in quattro cartelle diverse. Ogni cartella contiene un'app creata in un framework JavaScript diverso. In genere, è presente un'app nella radice del repository ed è necessario specificare / per il percorso dell'app. Questo è un ottimo esempio del motivo per cui App Web statiche di Azure permette innanzitutto di configurare i percorsi: per assicurare il controllo completo sulla compilazione dell'app.

  1. Al termine della creazione dell'app, in Visual Studio Code verrà visualizzata una notifica di conferma.

    Screenshot of the confirmation code asking the user to open actions in GitHub or View/Edit Configure.

    Quando la distribuzione è in corso, l'estensione di Visual Studio Code segnala lo stato della compilazione.

    Screenshot of the VS Code UI showing waiting for deployment.

  2. È possibile visualizzare lo stato della distribuzione con GitHub Actions espandendo il menu Azioni.

    Screenshot showing how to check progress via GitHub Actions.

    Dopo aver completato la distribuzione, è possibile passare direttamente al proprio sito Web.

  3. Per visualizzare il sito Web nel browser, fare clic con il pulsante destro del mouse sul progetto nell'estensione App Web statiche e scegliere Sfoglia sito.

    Screenshot showing how to browse to your static web app site.

Si è così È 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. Aggiornare il browser dopo un minuto. GitHub Actions viene eseguito automaticamente quando viene creata l'istanza di App Web statiche di Azure. Se viene visualizzata la pagina iniziale, l'app è ancora in fase di distribuzione.