Introduzione

Completato

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

Quando si compila l'app, è importante fare in modo che l'app e l'API siano ospitate in un ambiente sicuro, siano disponibili a livello globale e vengano pubblicate automaticamente. Anziché creare un server Web per gestire tutti questi aspetti prioritari, è possibile decidere di usare una soluzione di hosting che gestisca facilmente gli asset e l'API, senza troppe attività di installazione o configurazione.

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.

La creazione di App Web statiche avviene in genere tramite framework WebAssembly come Blazor e con framework e librerie JavaScript. Queste app includono asset HTML, CSS, JavaScript e immagine che costituiscono l'applicazione. In un'architettura server Web tradizionale questi file sono gestiti 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. Questa distribuzione accelera la disponibilità dei file, perché i file sono fisicamente più vicini agli utenti finali. Gli endpoint API 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ù.

Diagramma che mostra una panoramica delle app statiche.

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 rende disponibile l'app Web, mentre Funzioni di Azure è alla base della funzionalità API back-end, che fornisce scalabilità orizzontale e ridimensionamento automatici su richiesta all'API.

Funzionalità chiave

  • Hosting Web distribuito a livello globale, che avvicina contenuto statico come HTML, CSS, JavaScript e immagini agli utenti.
  • Supporto di API integrato fornito da Funzioni di Azure.
  • Integrazione eccellente tra GitHub e Azure DevOps per generare le build e le distribuzioni a ogni modifica del repository.
  • 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 vengono create, modificate e distribuite un'app Web e un'API in App Web statiche di Azure.

Questo modulo illustra un'applicazione Blazor di esempio e un'API scritta in C#.

Operazioni necessarie

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

  1. Compilare ed eseguire l'applicazione Blazor.
  2. Creare l'API con Funzioni di Azure.
  3. Modificare l'app Web per effettuare richieste HTTP all'API.
  4. Compilare e distribuire automaticamente l'app Web in Azure da un repository GitHub con GitHub Actions.
  5. Infine, esplorare e avviare l'applicazione.

Set di quattro screenshot che mostrano le quattro applicazioni di esempio.

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.