Pianificare l'app Web statica di Azure

Completato

L'obiettivo finale è ospitare l'app in Azure. App Web statiche di Azure si occupa automaticamente del provisioning di tutte le risorse di Azure necessarie.

Tuttavia, prima che l'app possa essere ospitata, è necessario qualcosa per la compilazione dell'app man mano che si apportano modifiche. Queste modifiche possono essere apportate tramite commit o pull request al tuo repository. Una caratteristica principale di App Web statiche di Azure consiste nel configurare un flusso di lavoro di GitHub Actions per compilare e pubblicare l'applicazione.

Quando si crea la risorsa di App Web statiche di Azure, viene creato il flusso di lavoro di GitHub Actions. Il flusso di lavoro viene attivato immediatamente e si occupa della compilazione e della pubblicazione dell'app. Il flusso di lavoro viene attivato anche ogni volta che si apporta una modifica al ramo monitorato nel repository.

App Web statiche di Azure

La distribuzione di un'app Web include due aspetti automatizzati. Il primo configura le risorse di Azure sottostanti che costituiscono la tua app. Il secondo è un flusso di lavoro di GitHub Actions che compila e pubblica l'applicazione.

Pubblicando l'app nel Web con App Web statiche di Azure, si ottiene hosting rapido dell'app Web e API scalabili. Si ottiene anche un flusso di lavoro di compilazione e distribuzione unificato, fornito da GitHub Actions.

Connetti la tua istanza di App Web statica a GitHub

Azure Static Web Apps è progettato per ospitare applicazioni mentre il codice sorgente si trova su GitHub. Quando si crea un'istanza di App Web statiche è necessario accedere a GitHub e specificare il repository contenente il codice dell'app.

È anche necessario specificare tre percorsi di cartella nel repository, in modo che l'app possa essere automaticamente compilata e distribuita:

Posizione Esempio di posizione Descrizione Obbligatorio
Posizione dell'app Cliente Posizione del codice sorgente per la tua applicazione web
Percorso di output wwwroot Percorso degli artefatti della compilazione dell'app No
Posizione dell'API Api Posizione del codice sorgente dell'API No

Il percorso dell'output è un percorso relativo rispetto alla directory di pubblicazione dell'applicazione. Ad esempio, si supponga di avere un'app in Client che restituisce i propri asset di compilazione in una cartella bin/<build profile>/<framework>/publish/wwwroot. In questo caso, è sufficiente specificare wwwroot per questa posizione, poiché il sistema di pubblicazione si occuperà del resto del prefisso.

Dal codice sorgente agli asset statici con GitHub Actions

Il repository GitHub contiene il codice sorgente, non gli asset statici, e di conseguenza deve essere creato prima che possa essere pubblicato.

Quando si crea un'istanza di App Web statiche, Azure crea un flusso di lavoro di GitHub Actions nel repository. Il flusso di lavoro compila l'app ogni volta che si esegue il push delle modifiche o si crea una richiesta pull nel ramo di versione. Questo processo converte il codice sorgente in asset statici gestiti da Azure. Al termine della compilazione, l'azione distribuisce gli asset.

L'azione GitHub viene aggiunta al tuo repository nella cartella .github/workflows. È possibile esaminare o modificare questo file nel modo necessario. Le impostazioni immesse quando si crea la risorsa vengono archiviate nel file di GitHub Actions.

API integrata con Funzioni di Azure

Se l'app richiede un'API, è possibile implementarla come progetto di Funzioni di Azure nel repository affinché venga automaticamente distribuita e ospitata dall'istanza di App Web statiche. Il flusso di lavoro di GitHub Actions che compila e distribuisce l'app individua l'API nel repository attraverso il nome della cartella specificata nel percorso API.

Se non è disponibile un'API, Non preoccuparti. Se Azure Static Web Apps non riesce a trovare un'API nella cartella indicata, non pubblica un'API, ma pubblica comunque la tua app.

Passaggi successivi

Che cosa è necessario per poter pubblicare l'app Web in App Web statiche di Azure? Tutto quello che serve è l'app nel repository GitHub.