Distribuire un'app Blazor in App Web statiche di Azure

App Web statiche di Azure pubblica un sito Web in un ambiente di produzione compilando le app a partire da un repository GitHub con il supporto di un back-end serverless. L'esercitazione seguente illustra come distribuire l'app WebAssembly Blazor C# che visualizza i dati meteo restituiti da un'API serverless.

Nota

Prerequisiti

• Account GitHub
• Account Azure. Se non si ha una sottoscrizione di Azure, creare un account per una versione di prova gratuita.

1. Creare un repository

In questo articolo si usa un repository di modelli GitHub per semplificare le operazioni. Il modello include un'app iniziale che è possibile distribuire in App Web statiche di Azure.

1. Assicurarsi di aver eseguito l'accesso a GitHub e passare al percorso seguente per creare un nuovo repository: https://github.com/staticwebdev/blazor-starter/generate
2. Assegna al repository il nome my-first-static-blazor-app.

2. Creare un'app Web statica

Dopo aver creato il repository, è possibile creare un'app Web statica dal portale di Azure.

1. Vai al portale di Azure.

2. Selezionare Crea una risorsa.

3. Cerca App Web statiche.

4. Selezionare App Web statiche.

5. Selezionare Crea.

6. Nella scheda Informazioni di base immettere i valori seguenti.

   Proprietà	Valore
   Abbonamento	Il nome della sottoscrizione di Azure.
   Gruppo di risorse	my-blazor-group
   Nome	my-first-static-blazor-app
   Tipo di piano	Gratuito
   Area geografica per l'API di Funzioni di Azure e gli ambienti di staging	Selezionare un'area vicina.
   Origine	GitHub

7. Selezionare Accedi con GitHub ed eseguire l'autenticazione con GitHub, se richiesto.

8. Immettere i valori di GitHub seguenti.

   Proprietà	Valore
   Azienda	Selezionare l'organizzazione GitHub desiderata.
   Repository	Selezionare my-first-static-blazor-app.
   Branch	Selezionare main.

   Nota

   Se non è visualizzato alcun repository, potrebbe essere necessario autorizzare App Web statiche di Azure in GitHub. Passare quindi al repository GitHub e selezionare Impostazioni > Applicazioni > App OAuth autorizzate, selezionare App Web statiche di Azure e quindi Concedi. Per concedere le autorizzazioni per i repository dell'organizzazione, è necessario essere un proprietario dell'organizzazione.

9. Nella sezione Dettagli compilazione, selezionare Blazor dall'elenco a discesa Set di impostazioni compilazione e i seguenti valori vengono popolati.

   Proprietà	Valore	Descrizione
   Percorso app	Client	Cartella contenente l'app Blazor WebAssembly
   Posizione dell'API	Api	Cartella contenente l'app Funzioni di Azure
   Percorso di output	wwwroot	Cartella nell'output di compilazione contenente l'applicazione WebAssembly Blazor pubblicata

10. Selezionare Rivedi e crea per verificare che i dettagli siano tutti corretti.

11. Selezionare Crea per avviare la creazione dell'app Web statica ed effettuare il provisioning di GitHub Actions per la distribuzione.

12. Al termine della distribuzione, selezionare Vai alla risorsa.

13. Selezionare Vai alla risorsa.

3. Visualizzare il sito Web

La distribuzione di un'app statica è un processo in due passaggi. La prima esegue il provisioning delle risorse Azure sottostanti che compongono l'app. Il secondo è un flusso di lavoro di GitHub Actions che compila e pubblica l'applicazione.

Prima di poter accedere alla tua nuova app Web statica, il build di distribuzione deve prima completarsi.

La finestra della panoramica di App Web statiche visualizza una serie di collegamenti che consentono di interagire con l'app Web.

1. Seleziona il banner con la dicitura Fai clic qui per controllare lo stato delle esecuzioni di GitHub Actions per visualizzare le esecuzioni di GitHub Actions per il tuo repository. Dopo aver verificato il completamento del processo di distribuzione, è possibile andare al sito Web tramite l'URL generato.

   

2. Una volta completato il flusso di lavoro di GitHub Actions, è possibile selezionare il collegamento URL per aprire il sito Web nella nuova scheda.

   

4. Comprendere la panoramica dell'applicazione

Insieme, i progetti seguenti costituiscono le parti necessarie per creare un'applicazione WebAssembly Blazor in esecuzione nel browser supportato da un back-end dell'API Funzioni di Azure.

Progetto Visual Studio	Descrizione
Api	L'applicazione C# Funzioni di Azure implementa l'endpoint API che fornisce informazioni meteo all'app WebAssembly Blazor. WeatherForecastFunction restituisce una matrice di oggetti WeatherForecast.
Cliente	Il progetto front-end Blazor WebAssembly. Viene implementata una route di fallback per garantire che il routing lato client sia funzionale.
Condiviso	Contiene classi comuni a cui fanno riferimento i progetti Api e Client, che consentono il flusso dei dati dall'endpoint API all'app Web front-end. La classe WeatherForecast è condivisa da entrambe le app.

App Web statica di Blazor

Percorso di riserva

L'app espone URL come /counter e /fetchdata, che corrispondono a percorsi specifici dell'app. Poiché questa app viene implementata come singola pagina, ogni route viene gestita dal index.html file. Per assicurarsi che le richieste per qualsiasi percorso restituiscano index.html, una route di fallback viene implementata nel staticwebapp.config.json file presente nella cartella radice del progetto client.

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

La configurazione JSON garantisce che le richieste a qualsiasi percorso nell'app restituiscano la pagina index.html.

Distribuire da Visual Studio

In alternativa alla distribuzione tramite GitHub Actions, è possibile eseguire la distribuzione in App Web statiche di Azure direttamente da Visual Studio. Creare un profilo di pubblicazione per App Web statiche di Azure:

1. Nell'interfaccia utente di pubblicazione di Visual Studio, selezionare DestinazioneAzureDestinazione specificaApp Web statiche di Azure per creare un profilo di pubblicazione.

2. Nella configurazione del profilo di pubblicazione specificare il nome della sottoscrizione. Selezionare un'istanza esistente o selezionare Crea una nuova istanza. Quando si crea una nuova istanza nell'interfaccia utente Crea app web statica del portale di Azure, impostare i Dettagli di distribuzione>Origine su Altro. Attendere il completamento della distribuzione nel portale di Azure prima di procedere.

3. Nella configurazione del profilo di pubblicazione selezionare l'istanza App Web statiche di Azure dal gruppo di risorse dell'istanza. Selezionare Fine per creare il profilo di pubblicazione. Se Visual Studio ti chiede di installare la CLI delle App Web statiche (SWA), installa la CLI seguendo le istruzioni. L'interfaccia della riga di comando di SWA richiede npm/Node.js (documentazione di Visual Studio).

Dopo aver creato il profilo di pubblicazione, distribuire l'app nell'istanza di App Web statiche di Azure usando il profilo di pubblicazione selezionando il pulsante Pubblica.

Pulire le risorse

Se non si intende usare questa applicazione, è possibile eliminare l'istanza di App Web statiche di Azure seguendo questa procedura:

1. Apri il portale di Azure.
2. Cerca my-blazor-group nella barra di ricerca in alto.
3. Selezionare il nome del gruppo.
4. Selezionare Elimina.
5. Selezionare Sì per confermare l'azione di eliminazione.

Passaggi successivi

Autenticare e autorizzare

Articoli correlati

• Configurare l'autenticazione e autorizzazione
• Configurare le impostazioni dell'app
• Abilitare il monitoraggio
• Interfaccia della riga di comando di Azure