Introduzione

  • 4 minuti

Scenario

L'azienda sta lanciando un'app Web per la lista della spesa. Tramite il sito, i clienti possono aggiungere, modificare, visualizzare e rimuovere articoli, ad esempio alimenti e articoli per la casa, dall'elenco.

Il sito e le API devono essere sicure per garantire la privacy dei clienti. Gli utenti saranno distribuiti in tutto il mondo e si vuole che tutti possano ottenere ottime prestazioni. Si preferisce una soluzione che rimuova la maggior parte del lavoro di infrastruttura, tra cui la compilazione e la pubblicazione, in modo da potersi concentrare sulle funzionalità e sull'esperienza utente.

Era possibile distribuire gli asset Web nell'archiviazione nel cloud, creare e assegnare un certificato SSL personalizzato, creare l'API in un server cloud, definire un proxy inverso che consenta all'app di effettuare chiamate all'API, distribuire l'app a livello globale e configurare un processo CI/CD.

Con App Web statiche di Azure queste operazioni possono essere eseguite immediatamente.

Che cos'è App Web statiche di Azure?

App Web statiche di Azure risolve i problemi più complessi dell'intero processo, dal codice sorgente alla disponibilità globale.

Permettendo allo sviluppatore di concentrarsi sul proprio lavoro, App Web statiche di Azure compila e ospita automaticamente l'app da GitHub o Azure DevOps.

Le app Web statiche vengono in genere create tramite librerie e framework come Angular, React, Svelte o Vue. Queste app includono asset HTML, CSS, JavaScript e immagine che costituiscono l'applicazione. In un'architettura di server Web tradizionale questi file vengono resi disponibili da un unico server insieme a tutti gli endpoint API necessari.

Con App Web statiche di Azure, gli asset statici sono separati da un server Web tradizionale e vengono invece resi disponibili da punti distribuiti a livello globale in tutto il mondo. Con questa distribuzione i file vengono resi disponibili molto più velocemente, perché sono fisicamente più vicini agli utenti finali. Gli endpoint API, che sono facoltativi, vengono ospitati usando un'architettura serverless che evita del tutto la necessità di un server back-end completo.

Il modello per App Web statiche di Azure permette di ottenere esattamente il necessario, niente di meno o di più.

Screenshot showing the Static Apps overview.

Quando si crea una risorsa di App Web statiche di Azure, Azure configura un flusso di lavoro di GitHub Actions o di Azure DevOps nel repository del codice sorgente dell'app. Il flusso di lavoro monitora un ramo a scelta. Ogni volta che si esegue il push di commit o si creano richieste pull nel ramo monitorato, il flusso di lavoro compila e distribuisce automaticamente l'app e la relativa API in Azure.

Azure ospita e serve l'app Web. Funzioni di Azure abilita la funzionalità API back-end che offre aumento e riduzione automatici in base alla richiesta.

API facoltative

App Web statiche di Azure è ideale per servire contenuto puramente statico, ma offre anche un ottimo supporto per le app Web statiche che necessitano di API. È quindi possibile ospitare l'app Web statica con o senza un'API.

Negli esercizi di questo modulo si distribuirà un'app usando il framework Web preferito.

Nota

In questo modulo si distribuirà un'app senza un'API. Vedere la sezione Passaggi successivi nell'unità finale per informazioni sul modulo successivo in cui verrà distribuita un'API insieme all'app.

Funzionalità chiave

  • Hosting Web distribuito a livello globale, che avvicina contenuto statico come HTML, CSS, JavaScript e immagini agli utenti
  • Supporto per API integrate, fornito da Funzioni di Azure
  • Integrazione di prima classe di GitHub e Azure DevOps in cui le modifiche del repository attivano compilazioni e distribuzioni.
  • Certificati SSL gratuiti, che vengono rinnovati automaticamente
  • URL di anteprima univoci per la visualizzazione in anteprima delle richieste pull

Obiettivi di apprendimento

In questo modulo viene creata, modificata e distribuita un'app Web in App Web statiche di Azure.

Scegliere il percorso desiderato

Questo modulo illustra quattro varianti dell'applicazione di esempio tra cui scegliere: Angular, React, Svelte e Vue. Il vantaggio di App Web statiche di Azure consiste nel fatto di supportare tutti questi framework.

Il codice di avvio include le quattro app che verranno usate.

├ angular-app  👈 The Angular client app
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

Operazioni necessarie

Dopo aver scelto l'applicazione client, sarà necessario:

  • Compilare ed eseguire l'applicazione front-end.
  • Compilare e distribuire automaticamente l'app Web in Azure da un repository GitHub con GitHub Actions.
  • Infine, sarà necessario esplorare e avviare l'applicazione, come mostrato di seguito.

A screenshot illustrating the angular sample application.

A screenshot illustrating the react sample application.

A screenshot illustrating the svelte sample application.

A screenshot illustrating the Vue sample application.

Passaggi successivi

A questo punto si potrebbe pensare di dover creare prima di tutto le risorse di Azure, ma App Web statiche di Azure ha già identificato il flusso di lavoro giornaliero. Un approccio più naturale consiste nell'iniziare con il codice in GitHub, prima di creare le risorse in Azure.