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, le prime preoccupazioni sono che l'app e l'API sono ospitate in modo sicuro, sono disponibili a livello globale e vengono pubblicate automaticamente. Invece di configurare e configurare un server Web per gestire questi problemi, si decide di usare una soluzione di hosting che gestisce facilmente gli asset e l'API, senza alcuna configurazione 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 tradizionale del server Web, questi file vengono gestiti da un singolo 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 rende i file più veloci man mano che 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ù.

Diagram 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 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 di GitHub e Azure DevOps di prima classe che attiva le compilazioni e le distribuzioni con 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 creati, modificati e distribuiti 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, si esplora e si avvia l'applicazione.

A set of four screenshots illustrating the four sample applications.

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.