Guida introduttiva: Distribuire un'app Web ASP.NET

Se Visual Studio 2022 è già stato installato:

1. Installare gli aggiornamenti più recenti in Visual Studio selezionando Guida>Per verificare la disponibilità di aggiornamenti.
2. Aggiungere il carico di lavoro selezionando Strumenti. >Ottieni strumenti e funzionalità.

• Un account Azure con una sottoscrizione attiva. Creare gratuitamente un account.
• Visual Studio Code.
• Estensione Strumenti di Azure .
• Versione più recente di .NET 8.0 SDK.
• (Facoltativo) Per provare GitHub Copilot, un account GitHub Copilot. È disponibile una versione di valutazione gratuita di 30 giorni.

• Un account Azure con una sottoscrizione attiva. Creare gratuitamente un account.
• Interfaccia della riga di comando di Azure.
• Versione più recente di .NET 8.0 SDK.
• (Facoltativo) Per provare GitHub Copilot, un account GitHub Copilot. È disponibile una versione di valutazione gratuita di 30 giorni.

• Un account Azure con una sottoscrizione attiva. Creare gratuitamente un account.
• Azure PowerShell.
• Versione più recente di .NET 8.0 SDK.

• Un account Azure con una sottoscrizione attiva. Creare gratuitamente un account.
• Un account GitHub Creare gratuitamente un account.

Passare alla fine

È possibile distribuire rapidamente l'app di esempio ASP.NET Core in questa esercitazione usando l'interfaccia della riga di comando per sviluppatori di Azure e visualizzarla in esecuzione in Azure. È sufficiente eseguire i comandi seguenti in Azure Cloud Shell e seguire il prompt:

mkdir dotnetcore-quickstart
cd dotnetcore-quickstart
azd init --template https://github.com/Azure-Samples/quickstart-deploy-aspnet-core-app-service.git
azd up

E per eliminare le risorse:

azd down

Creare un'app Web ASP.NET

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

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

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

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

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

   Nella pagina verrà visualizzato il modello di app Web ASP.NET Core 8.0.

   

In questo passaggio si effettua un fork di un progetto demo per il deployment.

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.

   

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

   Importante

   Quando si esegue il targeting su ASP.NET Framework 4.8, utilizzare il 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.

   

5. A destra delle istanze del servizio App, selezionare +.

   

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

7. In Gruppo di risorse selezionare Nuovo. In Nome nuovo gruppo di risorse immettere myResourceGroup e selezionare 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 suggerito	Descrizione
   Piano di hosting	MyFirstAzureWebAppPlan	Nome del piano di servizio app.
   Ubicazione	Europa occidentale	Data center in cui è ospitata l'app Web.
   Dimensione	Scegliere il livello più basso.	I piani tariffari definiscono le funzionalità di hosting.

10. In Nome immettere un nome di app univoco. Includere solo i caratteri a-z, A-Z, 0-9e -. È possibile accettare il nome univoco generato automaticamente.

11. Selezionare Crea per creare le risorse di Azure.

    

    Al termine del processo, le risorse di Azure vengono create automaticamente. Sei pronto a pubblicare il tuo progetto ASP.NET Core.

12. Nella finestra di dialogo Pubblica, verificare che la nuova app del servizio app sia selezionata, quindi selezionare Fine e quindi selezionare Chiudi. Visual Studio crea automaticamente un profilo di pubblicazione per l'app del 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.

    • .NET 8.0
    • .NET Framework 4.8

    Nella pagina viene visualizzata l'app Web ASP.NET Core 8.0.

    

1. Aprire Visual Studio Code dalla directory radice del progetto.

   code .
   

2. Se richiesto, selezionare Sì, considerare attendibili gli autori.

   Suggerimento

   Se si ha un account GitHub Copilot, provare a ottenere le funzionalità di GitHub Copilot per Visual Studio Code.

3. In Visual Studio Code selezionare Visualizza>riquadro comandi per aprire il riquadro comandi.

4. Cercare e selezionare Servizio app di Azure: Crea nuova app Web (avanzate).

5. Rispondere alle richieste come segue:

   1. Se richiesto, accedere all'account di Azure.
   2. Selezionare la sottoscrizione.
   3. Selezionare Crea nuova app Web... Avanzate.
   4. Per Immettere un nome univoco globale per la nuova app Web, usare un nome univoco in tutto 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.
   5. Selezionare Crea nuovo gruppo di risorse e specificare un nome come myResourceGroup.
   6. Quando viene richiesto di selezionare uno stack di runtime, selezionare .NET 8 (LTS).
   7. Selezionare un sistema operativo (Windows o Linux).
   8. Selezionare una località nelle vicinanze.
   9. Selezionare Crea nuovo piano di servizio app, specificare un nome e selezionare il piano tariffarioGratuito (F1).
   10. Per la risorsa di Application Insights selezionare Ignora per il momento.
   11. Quando richiesto, selezionare Distribuisci.
   12. Selezionare MyFirstAzureWebApp come cartella da distribuire.
   13. Selezionare Aggiungi configurazione quando richiesto.

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

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

   Nella pagina viene visualizzata l'app Web ASP.NET Core 8.0.

   

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

   az login
   

   • Se il az comando non viene riconosciuto, assicurarsi di avere installato l'interfaccia della riga di comando di Azure come descritto in Prerequisiti.

2. Usare az webapp up per distribuire il codice nella directory MyFirstAzureWebApp locale:

   az webapp up --sku F1 --name <app-name> --os-type <os>
   

   • Sostituire <app-name> con un nome univoco in tutto 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.
   • Facoltativamente, è possibile includere l'argomento --location <location-name>, dove <location-name> è un'area di Azure disponibile. Per ottenere un elenco di aree consentite per l'account Azure, eseguire il comando az account list-locations .

   Il completamento del comando potrebbe richiedere alcuni minuti. Durante l'esecuzione, il comando fornisce messaggi sulla creazione del gruppo di risorse, del piano di servizio dell'app e dell'hosting dell'app, sulla configurazione del logging 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 viene visualizzata l'app Web ASP.NET Core 8.0.

   

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

   Connect-AzAccount
   

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

   New-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -Location westeurope
   

   • Sostituire <app-name> con un nome univoco in tutto Azure. I caratteri validi sono a-z, 0-9e - Una combinazione del nome della società e di un identificatore dell'app è un modello valido.
   • Facoltativamente, è possibile includere il parametro -Location <location-name>, dove <location-name> è un'area di Azure disponibile. Per ottenere un elenco di aree consentite per l'account Azure, eseguire il comando Get-AzLocation .

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

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

   dotnet publish --configuration Release
   

4. Passare alla directory di rilascio e creare un file ZIP dai contenuti:

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

5. 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.

6. Aprire un Web browser e passare all'URL. Nella pagina viene visualizzata l'app Web ASP.NET Core 8.0.

   

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

   

2. Nella pagina Servizi app selezionare Crea>app Web.

3. Nella scheda Informazioni di base :

   • .NET 8.0
   • .NET Framework 4.8

   • In Gruppo di risorse selezionare Crea nuovo. Immettere myResourceGroup come nome.
   • In Nome immettere un nome univoco globale per l'app Web.
   • In Pubblica selezionare Codice.
   • In Stack di runtime selezionare .NET 8 (LTS).
   • In Sistema operativo selezionare Windows. Se si seleziona Linux, non è possibile configurare la distribuzione di GitHub nel passaggio successivo, ma è comunque possibile farlo dopo aver creato l'app nella pagina Centro distribuzione .
   • Selezionare un'area da cui si vuole gestire l'app.
   • In Piano di servizio app selezionare Crea nuovo e digitare myAppServicePlan come nome.
   • In Piano tariffario selezionare F1 gratuito.

   

4. Selezionare la scheda Distribuzione nella parte superiore della pagina

5. In Impostazioni di GitHub Actions impostare Distribuzione continua su Abilita.

6. In Dettagli di GitHub Actions eseguire l'autenticazione con l'account GitHub e selezionare le opzioni seguenti:

   • .NET 8.0
   • .NET Framework 4.8

   • In 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 main.

   

7. Selezionare Rivedi e crea nella parte inferiore della pagina.

8. Dopo l'esecuzione della convalida, selezionare Crea nella parte inferiore della pagina.

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

   

10. Per passare all'app creata, selezionare il dominio predefinito nella pagina Panoramica . Se viene visualizzato il messaggio L'app Web è in esecuzione e in attesa del contenuto, la distribuzione di GitHub è ancora in esecuzione. Attendere un paio di minuti e aggiornare la pagina.

    • .NET 8.0
    • .NET Framework 4.8

    

1. In Esplora soluzioni fare doppio clic su Pages>Index.cshtml nel progetto per aprire.

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

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

   Suggerimento

   Con GitHub Copilot abilitato in Visual Studio, seguire questa procedura:

   1. Selezionare l'elemento <div> e digitare +.
   2. Chiedi a Copilot: "Passa a una scheda Bootstrap che recita .NET 💜 Azure".

   Salva 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 Riepilogo di pubblicazione selezionare Pubblica.

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

   • .NET 8.0
   • .NET Framework 4.8

   Nella pagina viene visualizzata l'app Web ASP.NET Core 8.0 aggiornata.

   

1. Aprire Pages/Index.cshtml.

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

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

   Suggerimento

   Provare questo approccio con GitHub Copilot:

   1. Selezionare l'intero <div> elemento e selezionare .
   2. Chiedi a Copilot: "Passa a una scheda Bootstrap che recita .NET 💜 Azure".

   Salva le modifiche.

3. In Visual Studio Code, aprire il pannello dei comandi: Ctrl+Shift+P.

4. Cerca e seleziona Azure App Service: Distribuisci su App Web.

5. Selezionare la sottoscrizione e l'app Web usata in precedenza.

6. Quando richiesto, selezionare Distribuisci.

7. Al termine della pubblicazione, selezionare Sfoglia sito Web nella notifica.

   Nella pagina viene visualizzata l'app Web ASP.NET Core 8.0 aggiornata.

   

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

<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 e sostituire <os> 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 Sfoglia all'app e aggiornare.

Nella pagina viene visualizzata l'app Web ASP.NET Core 8.0 aggiornata.

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

   <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 comando dotnet publish :

   dotnet publish --configuration Release
   

3. Passare alla directory di rilascio e creare un file ZIP dai contenuti:

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

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 Sfoglia all'app e aggiornare.

   Nella pagina viene visualizzata l'app Web ASP.NET Core 8.0 aggiornata.

   

1. Accedere al fork su GitHub del codice di esempio.

2. Nella pagina del repository, crea uno spazio di codice selezionando Code>Crea spazio di codice sul ramo principale.

   • .NET 8.0
   • .NET Framework 4.8

   

3. Aprire Index.cshtml.

   • .NET 8.0
   • .NET Framework 4.8

   Index.cshtml si trova nella cartella Pages .

   

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

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

   Le modifiche vengono salvate automaticamente.

   Suggerimento

   Provare questo approccio con GitHub Copilot:

   1. Selezionare l'intero <div> elemento e selezionare .
   2. Chiedi a Copilot: "Passa a una scheda Bootstrap che recita .NET 💜 Azure".

5. Dal menu Controllo del codice sorgente immettere un messaggio di commit, Modify homepagead esempio . Selezionare quindi Commit e confermare la gestione temporanea delle modifiche selezionando Sì.

   • .NET 8.0
   • .NET Framework 4.8

   

6. Selezionare Sincronizza modifiche 1, quindi confermare selezionando OK.

7. L'esecuzione della distribuzione richiede alcuni minuti. Per visualizzare lo stato di avanzamento, passare a https://github.com/<your-github-alias>/dotnetcore-docs-hello-world/actions.

8. Torna alla finestra del browser aperta durante il passaggio Vai all'app e aggiorna la pagina.

   • .NET 8.0
   • .NET Framework 4.8

   Nella pagina viene visualizzata l'app Web ASP.NET Core 8.0 aggiornata.

   

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. Nella 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 gruppo di risorse, digitare myResourceGroup nella casella di testo e quindi selezionare Elimina.
4. Confermare di nuovo selezionando 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. Nella 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 gruppo di risorse, digitare myResourceGroup nella casella di testo e quindi selezionare Elimina.
4. Confermare di nuovo selezionando Elimina.

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

Per praticità, il comando az webapp up eseguito in precedenza in questo progetto salva il nome del gruppo di risorse come valore predefinito ogni volta che si eseguono az comandi da questo progetto.

Pulire le risorse

Nei passaggi precedenti sono state create risorse di Azure in un gruppo di risorse. Se non si prevede di usare queste risorse in futuro, eliminare i gruppi di risorse eseguendo questo comando PowerShell:

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. Nella 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 gruppo di risorse, digitare myResourceGroup nella casella di testo e quindi selezionare Elimina.
4. Confermare di nuovo selezionando Elimina.