Guida introduttiva: Distribuire un'app Web ASP.NET

  • Articolo
  • 18 minuti per la lettura

In questa guida introduttiva si apprenderà come creare e distribuire la prima app Web ASP.NET in Servizio app di Azure. servizio app supporta diverse versioni di app .NET e offre un servizio di hosting Web auto-patch scalabile e altamente scalabile. ASP.NET le app Web sono multipiattaforma e possono essere ospitate in Linux o Windows. Al termine, si avrà un gruppo di risorse di Azure costituito da un piano di hosting del servizio app e un servizio app con un'applicazione Web distribuita.

In alternativa, è possibile distribuire un'app Web ASP.NET come parte di un contenitore Windows o Linux in servizio app.

Prerequisiti

Se Visual Studio 2022 è già stato installato:

  1. Installare gli aggiornamenti più recenti in Visual Studio selezionando ?>Controlla aggiornamenti.
  2. Aggiungere il carico di lavoro selezionando Strumenti>Ottieni strumenti e funzionalità.
Installare l'SDK .NET 6.0 più recente.
Installare l'SDK .NET 6.0 più recente.
Installare l'SDK .NET 6.0 più recente.

Creare un'app Web ASP.NET

  1. Aprire Visual Studio e selezionare Crea un nuovo progetto.

  2. In Crea un nuovo progetto trovare e selezionare ASP.NET Core App Web, quindi selezionare Avanti.

  3. In Configura il nuovo progetto assegnare un nome all'applicazione MyFirstAzureWebApp e quindi selezionare Avanti.

    Screenshot di Visual Studio - Configurare ASP.NET app Web 6.0.

  4. Selezionare .NET 6.0 (supporto a lungo termine) .

  5. Assicurarsi che il tipo di autenticazione sia impostato su Nessuno. Selezionare Crea.

    Screenshot di Visual Studio - Informazioni aggiuntive quando si seleziona .NET 6.0.

  6. Nel menu di Visual Studio selezionare Debug>Avvia senza eseguire debug per eseguire l'app Web in locale.

    Screenshot di Visual Studio : ASP.NET Core 6.0 in esecuzione in locale.

  1. Nella finestra del terminale creare una nuova cartella denominata MyFirstAzureWebApp e aprirla in Visual Studio Code.

    mkdir MyFirstAzureWebApp
code MyFirstAzureWebApp

  2. In Visual Studio Code aprire la finestra Terminale digitando Ctrl + `.

  3. Nel terminale di Visual Studio Code creare una nuova app Web .NET usando il dotnet new webapp comando .

    dotnet new webapp -f net6.0

  4. Dal terminale in Visual Studio Code eseguire l'applicazione in locale usando il dotnet run comando .

    dotnet run --urls=https://localhost:5001/

  5. Aprire un Web browser e passare all'app all'indirizzo https://localhost:5001.

    Verrà visualizzato il modello ASP.NET Core 6.0 app Web visualizzata nella pagina.

    Screenshot di Visual Studio Code: eseguire .NET 6.0 nel browser in locale.

  1. Aprire una finestra del terminale nel computer in una directory di lavoro. Creare una nuova app Web .NET usando il dotnet new webapp comando e quindi modificare le directory nell'app appena creata.

    dotnet new webapp -n MyFirstAzureWebApp --framework net6.0
cd MyFirstAzureWebApp

  2. Dalla stessa sessione del terminale eseguire l'applicazione in locale usando il dotnet run comando .

    dotnet run --urls=https://localhost:5001/

  3. Aprire un Web browser e passare all'app all'indirizzo https://localhost:5001.

    Verrà visualizzato il modello ASP.NET Core 6.0 app Web visualizzata nella pagina.

    Screenshot di Visual Studio Code : ASP.NET Core 6.0 nel browser locale.

In questo passaggio verrà creato un fork di un progetto demo da distribuire.

  • Passare all'app di esempio .NET 6.0.
  • Selezionare il pulsante Fork in alto a destra nella pagina GitHub.
  • Selezionare il proprietario e lasciare il nome del repository predefinito.
  • Selezionare Crea fork.

Pubblicare l'app Web

Per pubblicare l'app Web, è necessario prima creare e configurare un nuovo servizio app in cui pubblicarla.

Come parte della configurazione del servizio app, si creeranno:

  • Un nuovo gruppo di risorse che conterrà tutte le risorse di Azure per il servizio.
  • Un nuovo piano di hosting che specifica la località, le dimensioni e le funzionalità della server farm Web che ospita l'app.

Seguire questa procedura per creare le risorse servizio app e pubblicare il progetto:

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto MyFirstAzureWebApp e scegliere Pubblica.

  2. In Pubblica selezionare Azure e quindi Avanti.

    Screenshot di Visual Studio : pubblicare l'app Web e destinazione azure.

  3. Scegliere la destinazione specifica, Servizio app di Azure (Linux) o Servizio app di Azure (Windows). Quindi selezionare Avanti.

    Importante

    Quando si punta ASP.NET Framework 4.8, usare Servizio app di Azure (Windows).

  4. Le opzioni disponibili variano a seconda che sia già stato eseguito l'accesso ad Azure e che si abbia un account di Visual Studio collegato a un account di Azure. Selezionare Aggiungi un account o Accedi per accedere alla sottoscrizione di Azure. Se è già stato effettuato l'accesso, selezionare l'account da usare.

    Screenshot di Visual Studio - Selezionare l'accesso alla finestra di dialogo di Azure.

  5. A destra delle istanze di servizio app selezionare +.

    Screenshot della finestra di dialogo Nuova app di Visual Studio - Nuova servizio app.

  6. Per Sottoscrizione, accettare la sottoscrizione elencata o sceglierne una nuova nell'elenco a discesa.

  7. Per Gruppo di risorse selezionare Nuovo. In Nome nuovo gruppo di risorse immettere myResourceGroup e scegliere OK.

  8. Per Piano di hosting selezionare Nuovo.

  9. Nella finestra di dialogo Piano di hosting: Crea nuovo immettere i valori specificati nella tabella seguente:

    Impostazione Valore consigliato Descrizione
    Piano di hosting MyFirstAzureWebAppPlan Nome del piano di servizio app.
    Posizione Europa occidentale Data center in cui è ospitata l'app Web.
    Dimensione Free Piano tariffario che determina le funzionalità di hosting.

    Screenshot della schermata Crea nuovo piano di hosting nella portale di Azure.

  10. In Nome immettere un nome univoco per l'app che includa solo i caratteri validi, ossia a-z, A-Z, 0-9 e -. È possibile accettare il nome univoco generato automaticamente. L'URL dell'app Web è http://<app-name>.azurewebsites.net, dove <app-name> è il nome dell'app.

  11. Selezionare Crea per creare le risorse di Azure.

    Screenshot della finestra di dialogo Crea risorse dell'app.

    Al termine della procedura guidata, le risorse di Azure vengono create per l'utente e si è pronti per pubblicare il progetto ASP.NET Core.

  12. Nella finestra di dialogo Pubblica verificare che la nuova app servizio app sia selezionata in servizio app istanza e quindi selezionare Fine. Visual Studio crea un profilo di pubblicazione per l'app servizio app selezionata.

  13. Nella pagina Pubblica selezionare Pubblica. Se viene visualizzato un messaggio di avviso, selezionare Continua.

    Visual Studio compila, crea il pacchetto e pubblica l'app in Azure, quindi la avvia nel browser predefinito.

    Verrà visualizzata l'app Web ASP.NET Core 6.0 visualizzata nella pagina.

    Screenshot di Visual Studio : ASP.NET Core 6.0 app Web in Azure.

  1. In Visual Studio Code aprire il riquadro comandi, CTRL+MAIUSC+P.

  2. Cercare e selezionare "Servizio app di Azure: Distribuire in App Web".

  3. Rispondere alle richieste come segue:

    1. Selezionare MyFirstAzureWebApp come cartella da distribuire.
    2. Selezionare Aggiungi configurazione quando richiesto.
    3. Se richiesto, accedere all'account di Azure.
    4. Selezionare la sottoscrizione.
    5. Selezionare Crea nuova app Web... Avanzate.
    6. Per Immettere un nome univoco globale, usare un nome univoco in tutti i tipi di Azure (i caratteri validi sono a-z, 0-9e -). Un criterio valido consiste nell'usare una combinazione del nome della società e di un identificatore dell'app.
    7. Selezionare Crea nuovo gruppo di risorse e specificare un nome, ad esempio myResourceGroup.
    8. Quando richiesto di selezionare uno stack di runtime:
    • Per .NET 6.0 selezionare .NET 6
    • Per .NET Framework 4.8 selezionare ASP.NET V4.8
    1. Selezionare un sistema operativo (Windows o Linux).
      • Per .NET Framework 4.8, Windows verrà selezionato in modo implicito.
    2. Selezionare una località nelle vicinanze.
    3. Selezionare Crea un nuovo piano servizio app, specificare un nome e selezionare il piano tariffarioF1 Gratuito.
    4. Per la risorsa di Application Insight, selezionare Ignora per adesso.

  4. Nella finestra popup Distribuire sempre l'area di lavoro "MyFirstAzureWebApp" in <app-name>", selezionare Sì in modo che Visual Studio Code venga distribuito nella stessa app servizio app ogni volta che ci si trova nell'area di lavoro.

  5. Al termine della pubblicazione, selezionare Sfoglia sito Web nella notifica e selezionare Apri quando richiesto.

    Nella pagina verrà visualizzata l'app Web ASP.NET Core 6.0.

    Screenshot di Visual Studio Code - ASP.NET Core'app Web 6.0 in Azure.

  1. Accedere all'account Azure usando il az login comando e seguendo il prompt:

    az login

  2. Distribuire il codice nella directory MyFirstAzureWebApp locale usando il az webapp up comando :

    az webapp up --sku F1 --name <app-name> --os-type <os>
    • Se il az comando non viene riconosciuto, assicurarsi di avere installato l'interfaccia della riga di comando di Azure come descritto in Prerequisiti.
    • Sostituire <app-name> con un nome univoco nell'ambito di Azure (i caratteri validi sono a-z, 0-9 e - ). Un criterio valido consiste nell'usare una combinazione del nome della società e di un identificatore dell'app.
    • L'argomento --sku F1 crea l'app Web nel piano tariffarioGratuito. Omettere questo argomento per usare un livello Premium più rapido, che però comporta un costo orario.
    • Sostituire <os> con linux o windows. È necessario usare windows quando la destinazione è ASP.NET Framework 4.8.
    • Facoltativamente, è possibile includere l'argomento --location <location-name>, dove <location-name> è un'area di Azure disponibile. Per recuperare un elenco di aree consentite per l'account Azure, è possibile eseguire il comando az account list-locations.

    Il completamento del comando potrebbe richiedere alcuni minuti. Durante l'esecuzione, fornisce messaggi sulla creazione del gruppo di risorse, sul piano di servizio app e sull'hosting dell'app, sulla configurazione della registrazione e sull'esecuzione della distribuzione ZIP. Viene quindi visualizzato un messaggio con l'URL dell'app:

    You can launch the app at http://<app-name>.azurewebsites.net

  3. Aprire un Web browser e passare all'URL:

    Nella pagina verrà visualizzata l'app Web ASP.NET Core 6.0.

    Screenshot dell'interfaccia della riga di comando : ASP.NET Core 6.0 app Web in Azure.

Nota

Azure PowerShell è consigliabile creare app nella piattaforma di hosting di Windows. Per creare app in Linux, usare uno strumento diverso, ad esempio l'interfaccia della riga di comando di Azure.

  1. Accedere all'account Azure usando il Connect-AzAccount comando e seguendo il prompt:

    Connect-AzAccount

  1. Creare una nuova app usando il comando New-AzWebApp :

    New-AzWebApp -Name <app-name> -Location westeurope
    • Sostituire <app-name> con un nome univoco nell'ambito di Azure (i caratteri validi sono a-z, 0-9 e - ). Una combinazione del nome della società e di un identificatore di app è un modello valido.
    • Facoltativamente, è possibile includere il parametro -Location <location-name> in cui <location-name> è disponibile un'area di Azure. Per recuperare un elenco di aree consentite per l'account Azure, è possibile eseguire il comando Get-AzLocation.

    Il completamento del comando potrebbe richiedere alcuni minuti. Durante l'esecuzione, crea un gruppo di risorse, un piano servizio app e la risorsa servizio app.

  2. Dalla cartella radice dell'applicazione preparare l'applicazione MyFirstAzureWebApp locale per la distribuzione usando il dotnet publish comando :

    dotnet publish --configuration Release

  3. Passare alla directory di rilascio e creare un file ZIP dal contenuto:

    cd bin\Release\net6.0\publish
Compress-Archive -Path * -DestinationPath deploy.zip

  4. Pubblicare il file ZIP nell'app di Azure usando il comando Publish-AzWebApp :

    Publish-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -ArchivePath (Get-Item .\deploy.zip).FullName -Force

    Nota

    -ArchivePath richiede il percorso completo del file ZIP.

  5. Aprire un Web browser e passare all'URL:

    Nella pagina verrà visualizzata l'app Web ASP.NET Core 6.0.

    Screenshot dell'interfaccia della riga di comando : ASP.NET Core 6.0 app Web in Azure.

  1. Digitare i servizi app nella ricerca. In Servizi selezionare Servizi app.

    Screenshot della ricerca nel portale nel portale di Azure.

  2. Nella pagina Servizi app selezionare + Crea.

  3. Nella scheda Informazioni di base , in Dettagli progetto verificare che sia selezionata la sottoscrizione corretta e quindi selezionare Crea nuovo gruppo di risorse. Immettere myResourceGroup come nome.

    Screenshot della sezione Dettagli progetto che mostra dove si seleziona la sottoscrizione di Azure e il gruppo di risorse per l'app Web.

  4. In Dettagli istanza:

    • In Nome digitare un nome univoco globale per l'app Web.
    • In Pubblica selezionare Codice.
    • In Stack di runtime selezionare .NET 6 (LTS).
    • Selezionare un sistema operativoe un'area da cui si vuole gestire l'app.

    Screenshot del servizio app Dettagli istanza con un runtime .NET 6.

  5. In servizio app Piano selezionare Crea nuovo piano servizio app. Digitare myAppServicePlan come nome. Per passare al livello gratuito, selezionare Cambia dimensione, selezionare La scheda Sviluppo/Test , selezionare F1 e selezionare il pulsante Applica nella parte inferiore della pagina.

    Screenshot della sezione Account amministratore in cui si specificano il nome utente e la password dell'amministratore.

  6. Selezionare il pulsante Avanti: Distribuzione > nella parte inferiore della pagina.

  7. Nella scheda Distribuzione, in GitHub Actions impostazioni assicurarsi che la distribuzione continua sia Abilita.

  8. In GitHub Actions dettagli eseguire l'autenticazione con l'account GitHub e selezionare le opzioni seguenti:

    • Per Organizzazione selezionare l'organizzazione in cui è stato creato il fork del progetto demo.
    • Per Repository selezionare il progetto dotnetcore-docs-hello-world .
    • Per Ramo selezionare master.

    Screenshot delle opzioni di distribuzione per un'app che usa il runtime di .NET 6.

  9. Selezionare il pulsante Rivedi e crea nella parte inferiore della pagina.

    Screenshot del pulsante Rivedi e crea nella parte inferiore della pagina.

  10. Dopo l'esecuzione della convalida, selezionare il pulsante Crea nella parte inferiore della pagina.

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

    Screenshot del passaggio successivo per passare alla risorsa.

  12. Passare all'applicazione distribuita nel Web browser all'URL http://<app-name>.azurewebsites.net.

Aggiornare e ridistribuire l'app

Seguire questa procedura per aggiornare e ridistribuire l'app Web:

  1. In Esplora soluzioni, sotto il progetto, aprire Index.cshtml.

  2. Sostituire il primo <div> elemento con il codice seguente:

    <div class="jumbotron">
    <h1>.NET 💜 Azure</h1>
    <p class="lead">Example .NET app to Azure App Service.</p>
</div>

    Salvare le modifiche.

  3. Per ridistribuire in Azure, fare clic con il pulsante destro del mouse sul progetto MyFirstAzureWebApp in Esplora soluzioni e scegliere Pubblica.

  4. Nella pagina di riepilogo Pubblica selezionare Pubblica.

    Al termine del processo di pubblicazione, Visual Studio avvia un browser sull'URL dell'app Web.

    Nella pagina verrà visualizzata l'app Web aggiornata ASP.NET Core 6.0.

    Screenshot di Visual Studio - Aggiornamento ASP.NET Core'app Web 6.0 in Azure.

  1. Aprire Index.cshtml.

  2. Sostituire il primo <div> elemento con il codice seguente:

    <div class="jumbotron">
    <h1>.NET 💜 Azure</h1>
    <p class="lead">Example .NET app to Azure App Service.</p>
</div>

    Salvare le modifiche.

  3. In Visual Studio Code aprire il riquadro comandiCTRL+MAIUSC+P.

  4. Cercare e selezionare "Servizio app di Azure: Deploy to Web App".

  5. Selezionare Distribuisci quando richiesto.

  6. Al termine della pubblicazione, selezionare Sfoglia sito Web nella notifica e selezionare Apri quando richiesto.

    Nella pagina verrà visualizzata l'app Web aggiornata ASP.NET Core 6.0.

    Screenshot di Visual Studio Code - Aggiornato ASP.NET Core'app Web 6.0 in Azure.

Nella directory locale aprire il file Index.cshtml . Sostituire il primo <div> elemento:

<div class="jumbotron">
    <h1>.NET 💜 Azure</h1>
    <p class="lead">Example .NET app to Azure App Service.</p>
</div>

Salvare le modifiche, quindi ridistribuire l'app usando di nuovo il comando az webapp up:

ASP.NET Core 6.0 è multipiattaforma, in base alla sostituzione <os> della distribuzione precedente con linux o windows.

az webapp up --os-type <os>

Questo comando usa i valori memorizzati nella cache in locale nel file .azure/config, inclusi il nome dell'app, il gruppo di risorse e il piano di servizio app.

Al termine della distribuzione, tornare alla finestra del browser aperta nel passaggio Passare all'app e fare clic su Aggiorna.

Nella pagina verrà visualizzata l'app Web aggiornata ASP.NET Core 6.0.

Screenshot dell'interfaccia della riga di comando : aggiornato ASP.NET Core'app Web 6.0 in Azure.

  1. Nella directory locale aprire il file Index.cshtml . Sostituire il primo <div> elemento:

    <div class="jumbotron">
    <h1>.NET 💜 Azure</h1>
    <p class="lead">Example .NET app to Azure App Service.</p>
</div>

  2. Dalla cartella radice dell'applicazione preparare l'applicazione MyFirstAzureWebApp locale per la distribuzione usando il dotnet publish comando :

    dotnet publish --configuration Release

  3. Passare alla directory di rilascio e creare un file ZIP dal contenuto:

    cd bin\Release\net6.0\publish
Compress-Archive -Path * -DestinationPath deploy.zip

  4. Pubblicare il file ZIP nell'app di Azure usando il comando Publish-AzWebApp :

    Publish-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -ArchivePath (Get-Item .\deploy.zip).FullName -Force

    Nota

    -ArchivePath richiede il percorso completo del file ZIP.

  5. Al termine della distribuzione, tornare alla finestra del browser aperta nel passaggio Passare all'app e fare clic su Aggiorna.

    Nella pagina verrà visualizzata l'app Web aggiornata ASP.NET Core 6.0.

    Screenshot dell'interfaccia della riga di comando : aggiornato ASP.NET Core'app Web 6.0 in Azure.

  1. Passare al fork GitHub del codice di esempio.

  2. Nella pagina del repository premere . per avviare Visual Studio Code all'interno del browser.

    Nota

    L'URL passerà da GitHub.com a GitHub.dev. Questa funzionalità funziona solo con i repository con file. Questa operazione non funziona su repository vuoti.

  3. Aprire Index.cshtml.

    Index.cshtml si trova nella Pages cartella .

    Screenshot della finestra Di esplorazione di Visual Studio Code nel browser, evidenziando Index.cshtml nel repository dotnetcore-docs-hello-world.

  4. Sostituire il primo <div> elemento con il codice seguente:

    <div class="jumbotron">
    <h1>.NET 💜 Azure</h1>
    <p class="lead">Example .NET app to Azure App Service.</p>
</div>

    Salvare le modifiche.

  5. Dal menu Controllo del codice sorgente selezionare il pulsante Modifica fase per preparare la modifica.

  6. Immettere un messaggio di commit, We love Azuread esempio . Selezionare quindi Commit e push.

  7. Al termine della distribuzione, tornare alla finestra del browser aperta nel passaggio Passare all'app e aggiornare la pagina.

    Nella pagina verrà visualizzata l'app Web aggiornata ASP.NET Core 6.0.

    Screenshot dell'interfaccia della riga di comando : aggiornato ASP.NET Core'app Web 6.0 in Azure.

Gestire l'app Azure

Per gestire l'app Web, passare al portale di Azure, quindi cercare e selezionare Servizi app.

Screenshot dell'opzione portale di Azure - Selezionare Servizi app.

Nella pagina Servizi app selezionare il nome dell'app Web.

Screenshot della pagina portale di Azure - Servizi app con un'app Web di esempio selezionata.

La pagina Panoramica per l'app Web contiene le opzioni per la gestione di base, ad esempio Sfoglia, Arresta, Avvia, Riavvia ed Elimina. Il menu a sinistra include ulteriori pagine per la configurazione dell'app.

Screenshot della pagina panoramica portale di Azure - servizio app.

Pulire le risorse

Nei passaggi precedenti sono state create risorse di Azure in un gruppo di risorse. Se non si prevede di aver bisogno di queste risorse in futuro, è possibile eliminarle eliminando il gruppo di risorse.

  1. Dalla pagina Panoramica dell'app Web nel portale di Azure selezionare il collegamento myResourceGroup in Gruppo di risorse.
  2. Nella pagina del gruppo di risorse assicurarsi che le risorse elencate siano quelle da eliminare.
  3. Selezionare Elimina, digitare myResourceGroup nella casella di testo e quindi selezionare Elimina.

Pulire le risorse

Nei passaggi precedenti sono state create risorse di Azure in un gruppo di risorse. Se non si prevede di aver bisogno di queste risorse in futuro, è possibile eliminarle eliminando il gruppo di risorse.

  1. Dalla pagina Panoramica dell'app Web nel portale di Azure selezionare il collegamento myResourceGroup in Gruppo di risorse.
  2. Nella pagina del gruppo di risorse assicurarsi che le risorse elencate siano quelle da eliminare.
  3. Selezionare Elimina, digitare myResourceGroup nella casella di testo e quindi selezionare Elimina.

Pulire le risorse

Nei passaggi precedenti sono state create risorse di Azure in un gruppo di risorse. Se si ritiene che queste risorse non saranno necessarie in futuro, eliminare il gruppo di risorse eseguendo questo comando in Cloud Shell:

az group delete --name myResourceGroup

L'esecuzione del comando può richiedere un minuto.

Pulire le risorse

Nei passaggi precedenti sono state create risorse di Azure in un gruppo di risorse. Se non si prevede che queste risorse siano necessarie in futuro, eliminare il gruppo di risorse eseguendo il comando powerShell seguente:

Remove-AzResourceGroup -Name myResourceGroup

L'esecuzione del comando può richiedere un minuto.

Pulire le risorse

Nei passaggi precedenti sono state create risorse di Azure in un gruppo di risorse. Se non si prevede di aver bisogno di queste risorse in futuro, è possibile eliminarle eliminando il gruppo di risorse.

  1. Dalla pagina Panoramica dell'app Web nel portale di Azure selezionare il collegamento myResourceGroup in Gruppo di risorse.
  2. Nella pagina del gruppo di risorse assicurarsi che le risorse elencate siano quelle da eliminare.
  3. Selezionare Elimina, digitare myResourceGroup nella casella di testo e quindi selezionare Elimina.

Passaggi successivi

In questa guida introduttiva è stata creata e distribuita un'app Web ASP.NET per Servizio app di Azure.

Procedere con l'articolo successivo per informazioni su come creare un'app .NET Core e connetterla a un database SQL:

Esercitazione: ASP.NET Core'app con il database SQL

Modello di app: ASP.NET Core app con il database SQL e App Insights distribuiti tramite ci/CD GitHub Actions

Configurare l'app ASP.NET Core