Creare un'app ASP.NET in Azure con un database SQL

Le app Web di Azure forniscono un servizio di hosting Web ad alta scalabilità e con funzioni di auto-correzione. Questa esercitazione illustra come distribuire un'app Web ASP.NET basata sui dati in Azure e connetterla al database SQL di Azure. Al termine sarà disponibile un'applicazione ASP.NET in esecuzione nel Servizio app di Azure e connessa al database SQL.

Applicazione ASP.NET pubblicata nell'app Web di Azure

In questa esercitazione si apprenderà come:

  • Creare un database SQL in Azure
  • Connettere un'app ASP.NET al database SQL
  • Distribuire l'app in Azure
  • Aggiornare il modello di dati e ridistribuire l'app
  • Eseguire lo streaming dei log da Azure al terminale
  • Gestire l'app nel portale di Azure

Prerequisiti

Per completare questa esercitazione:

  • Installare Visual Studio 2017 con i carichi di lavoro seguenti:

    • Sviluppo Web e ASP.NET
    • Sviluppo di Azure

    Sviluppo Web e ASP.NET e sviluppo di Azure (in Web e Cloud)

Se non si ha una sottoscrizione di Azure, creare un account gratuito prima di iniziare.

Scaricare l'esempio

Scaricare il progetto di esempio.

Estrarre (decomprimere) il file dotnet-sqldb-tutorial-master.zip.

Il progetto di esempio contiene un'app CRUD (create-read-update-delete) ASP.NET MVC di base che usa Code First di Entity Framework.

Esecuzione dell'app

Aprire il file dotnet-sqldb-tutorial-master/DotNetAppSqlDb.sln in Visual Studio.

Digitare Ctrl+F5 per eseguire l'app senza debug. L'app viene visualizzata nel browser predefinito. Selezionare il collegamento Crea nuovo e creare due elementi Attività.

Finestra di dialogo Nuovo progetto ASP.NET

Testare i collegamenti Modifica, Dettagli ed Elimina.

L'app usa un contesto di database per connettersi al database. Nell'esempio il contesto di database usa una stringa di connessione denominata MyDbConnection. La stringa di connessione è impostata nel file Web.config e il file Models\MyDatabaseContext.cs include un riferimento alla stringa. Il nome della stringa di connessione è usato più avanti nell'esercitazione per connettere l'app Web di Azure a un database SQL di Azure.

Pubblicare in Azure con il database SQL

In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto DotNetAppSqlDb e selezionare Pubblica.

Pubblicare da Esplora soluzioni

Verificare che Servizio app di Microsoft Azure sia selezionato e fare clic su Pubblica.

Pubblicare dalla pagina di panoramica progetto

La pubblicazione apre la finestra di dialogo Crea servizio app che consente di creare tutte le risorse di Azure necessarie per eseguire l'app Web ASP.NET in Azure.

Accedere ad Azure

Nella finestra di dialogo Crea servizio App fare clic su Aggiungi un account e quindi accedere alla sottoscrizione di Azure. Se si è già connessi a un account Microsoft, verificare che l'account contenga la sottoscrizione di Azure. Se l'account Microsoft a cui si è connessi non include la sottoscrizione di Azure, fare clic su di esso per aggiungere l'account corretto.

Accedere ad Azure

Dopo avere eseguito l'accesso, è possibile creare tutte le risorse necessarie per l'app Web di Azure in questa finestra di dialogo.

Configurare il nome dell'app Web

È possibile mantenere il nome dell'app Web generato o modificarlo in un altro nome univoco (i caratteri validi sono a-z, 0-9 e -). Il nome dell'app Web viene usato come parte dell'URL predefinito per l'app (<app_name>.azurewebsites.net, dove <app_name> è il nome dell'app Web). Il nome dell'app Web deve essere univoco in tutte le app di Azure.

Finestra di dialogo Crea servizio app

Creare un gruppo di risorse

Un gruppo di risorse è un contenitore logico in cui vengono distribuite e gestite risorse di Azure come app Web, database e account di archiviazione.

Accanto a Gruppo di risorse fare clic su Nuovo.

Accanto a Gruppo di risorse fare clic su Nuovo.

Assegnare al gruppo di risorse il nome myResourceGroup.

Nota

Non fare clic su Crea. È prima necessario configurare un database SQL in un passaggio successivo.

Creare un piano di servizio app

Un piano di servizio app specifica la località, le dimensioni e le funzionalità della server farm Web che ospita l'app. Quando si ospitano più app, è possibile limitare i costi configurando le app Web in modo che condividano un singolo piano di servizio app.

I piani di servizio app definiscono:

  • Area (ad esempio Europa settentrionale, Stati Uniti orientali o Asia sud-orientale)
  • Dimensione dell'istanza (Small, Medium o Large)
  • Numero di scala (da 1 a 20 istanze)
  • SKU (Gratuito, Condiviso, Basic, Standard o Premium)

Accanto a Piano di servizio app fare clic su Nuovo.

Nella finestra di dialogo Configura piano di servizio app configurare il nuovo piano di servizio app con le impostazioni seguenti:

Creare un piano di servizio app

Impostazione Valore consigliato Per altre informazioni
Piano di servizio app myAppServicePlan Piani del servizio app
Posizione Europa occidentale Aree di Azure
Dimensione Free Piani tariffari

Creare un'istanza di SQL Server

Prima di creare un database è necessario un server logico di database SQL di Azure. Un server logico contiene un gruppo di database gestiti come gruppo.

Selezionare Esplora altri servizi di Azure.

Configurare il nome dell'app Web

Nella scheda Servizi fare clic sull'icona + accanto a Database SQL.

Nella scheda Servizi fare clic sull'icona + accanto a Database SQL.

nella finestra di dialogo Configura database SQL fare clic su Nuovo accanto a SQL Server.

Viene generato un nome di server univoco. Questo nome viene usato come parte dell'URL predefinito per il server logico <server_name>.database.windows.net. Deve essere univoco in tutte le istanze di server logico in Azure. Sebbene sia possibile modificare il nome del server, per questa esercitazione mantenere il valore generato.

Aggiungere un nome utente e una password di amministratore e quindi selezionare OK. Per i requisiti di complessità delle password, vedere Criteri password.

Prendere nota del nome utente e della password. Saranno necessari per gestire l'istanza del server logico in seguito.

Creare un'istanza di SQL Server

Creare un database SQL

Nella finestra di dialogo Configura database SQL:

  • Mantenere il Nome database generato predefinito.
  • In Nome stringa di connessione digitare MyDbConnection. Questo nome deve corrispondere alla stringa di connessione cui viene fatto riferimento in Models\MyDatabaseContext.cs.
  • Selezionare OK.

Configurare il database SQL

La finestra di dialogo Crea servizio app mostra le risorse create. Fare clic su Crea.

Risorse create

Dopo aver creato le risorse di Azure, la procedura guidata pubblica l'app ASP.NET in Azure. Il browser predefinito viene avviato con l'URL dell'app distribuita.

Aggiungere alcune attività.

Applicazione ASP.NET pubblicata nell'app Web di Azure

Congratulazioni. L'applicazione ASP.NET basata sui dati è in esecuzione nel Servizio app di Azure.

Accedere al database SQL locale

Visual Studio consente di esplorare e gestire facilmente il nuovo database SQL in Esplora oggetti di SQL Server.

Creare una connessione al database

Dal menu Visualizza selezionare Esplora oggetti di SQL Server.

Nella parte superiore di Esplora oggetti di SQL Server fare clic sul pulsante Aggiungi istanza di SQL Server.

Configurare la connessione al database

Nella finestra di dialogo Connetti espandere il nodo Azure. Vengono visualizzate tutte le istanze del database SQL di Azure.

Selezionare il database SQL DotNetAppSqlDb. La connessione creata in precedenza viene inserita automaticamente nella parte inferiore.

Digitare la password di amministratore di database creata in precedenza e fare clic su Connetti.

Configurare la connessione al database da Visual Studio

Consentire la connessione client dal computer

Viene visualizzata la finestra di dialogo Crea nuova regola del firewall. Per impostazione predefinita, l'istanza del database SQL consente solo le connessioni da servizi di Azure, ad esempio dall'app Web di Azure. Per connettersi al database, creare una regola del firewall nell'istanza del database SQL. La regola del firewall autorizza l'indirizzo IP pubblico del computer locale.

Nella finestra di dialogo è già specificato l'indirizzo IP pubblico del computer.

Assicurarsi che l'opzione Aggiungi IP client sia selezionata e fare clic su OK.

Impostare il firewall per l'istanza del database SQL

Dopo che Visual Studio ha completato la creazione dell'impostazione del firewall per l'istanza del database SQL, la connessione viene visualizzata in Esplora oggetti di SQL Server.

In questa posizione è possibile eseguire le operazioni di database più comuni, ad esempio eseguire query, creare visualizzazioni e stored procedure e così via.

Fare clic con il pulsante destro del mouse sulla tabella Todoes e selezionare Visualizza dati.

Esplorare gli oggetti del database SQL

Aggiornare l'app con Migrazioni Code First

Per aggiornare il database e l'app Web in Azure è possibile usare gli strumenti noti di Visual Studio. In questo passaggio si usa Migrazioni Code First di Entity Framework per apportare una modifica allo schema del database e pubblicarlo in Azure.

Per altre informazioni sull'uso di Migrazioni Code First di Entity Framework, vedere Getting Started with Entity Framework 6 Code First using MVC 5 (Introduzione a Code First di Entity Framework 6 con MVC 5).

Aggiornare il modello di dati

Aprire Models\Todo.cs nell'editor di codice. Aggiungere la proprietà seguente alla classe ToDo:

public bool Done { get; set; }

Eseguire Migrazioni Code First in locale

Eseguire alcuni comandi per eseguire gli aggiornamenti del database locale.

Nel menu Strumenti fare clic su Gestione pacchetti NuGet > Console di Gestione pacchetti.

Nella finestra Console di Gestione pacchetti abilitare le migrazioni Code First:

Enable-Migrations

Aggiungere una migrazione:

Add-Migration AddProperty

Aggiornare il database locale:

Update-Database

Digitare Ctrl+F5 per eseguire l'app. Testare i collegamenti Modifica, Dettagli e Crea.

Se l'applicazione viene caricata senza errori, l'esecuzione di Migrazioni Code First è stata completata. La pagina tuttavia può apparire sempre uguale perché la logica dell'applicazione non usa ancora la nuova proprietà.

Usare la nuova proprietà

Apportare alcune modifiche al codice per usare la proprietà Done. Per motivi di semplicità in questa esercitazione vengono modificate solo le visualizzazioni Index e Create per visualizzare la proprietà.

Aprire Controllers\TodosController.cs.

Trovare il metodo Create() e aggiungere Done all'elenco delle proprietà nell'attributo Bind. Al termine, la firma del metodo Create() è simile al codice seguente:

public ActionResult Create([Bind(Include = "id,Description,CreatedDate,Done")] Todo todo)

Aprire Views\Todos\Create.cshtml.

Nel codice Razor viene visualizzato un elemento <div class="form-group"> che usa model.Description e quindi un altro elemento <div class="form-group"> che usa model.CreatedDate. Immediatamente dopo questi due elementi, aggiungere un altro elemento <div class="form-group"> che usa model.Done:

<div class="form-group">
    @Html.LabelFor(model => model.Done, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <div class="checkbox">
            @Html.EditorFor(model => model.Done)
            @Html.ValidationMessageFor(model => model.Done, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

Aprire Views\Todos\Index.cshtml.

cercare l'elemento <th></th> vuoto. Immediatamente sopra l'elemento, aggiungere il codice Razor seguente:

<th>
    @Html.DisplayNameFor(model => model.Done)
</th>

Trovare l'elemento <td> che contiene i metodi helper Html.ActionLink(). Immediatamente sopra l'elemento, aggiungere il codice Razor seguente:

<td>
    @Html.DisplayFor(modelItem => item.Done)
</td>

Le modifiche verranno visualizzate nelle visualizzazioni Index e Create.

Digitare Ctrl+F5 per eseguire l'app.

È ora possibile aggiungere un'attività e selezionare Fine. L'attività viene visualizzata come completata nella home page. Tenere presente che la visualizzazione Edit non mostra il campo Done poiché non è stata modificata la visualizzazione Edit.

Abilitare Migrazioni Code First in Azure

Dopo aver completato la modifica al codice, inclusa la migrazione del database, la modifica viene pubblicata nell'app Web di Azure e viene eseguito l'aggiornamento del database SQL con Migrazioni Code First.

Fare di nuovo clic con il pulsante destro del mouse sul progetto e selezionare Pubblica.

Fare clic su Impostazioni per aprire la procedura guidata di pubblicazione.

Aprire le impostazioni di pubblicazione

Nella procedura guidata fare clic su Avanti.

Assicurarsi che la stringa di connessione per il database SQL sia popolata in MyDatabaseContext (MyDbConnection). Potrebbe essere necessario selezionare il database myToDoAppDb dall'elenco a discesa.

Selezionare Esegui migrazione primo codice (inizia all'avvio dell'applicazione), quindi fare clic su Salva.

Abilitare Migrazioni Code First nell'app Web di Azure

Pubblicare le modifiche

Dopo aver abilitato Migrazioni Code First nell'app Web di Azure pubblicare le modifiche al codice.

Nella pagina di pubblicazione fare clic su Pubblica.

Provare di nuovo ad aggiungere attività e selezionare Fine. Le attività verranno visualizzate nella home page come completate.

App Web di Azure dopo la migrazione Code First

Tutte le attività esistenti rimangono visualizzate. Quando si pubblica nuovamente l'applicazione ASP.NET, i dati esistenti nel database SQL non vengono persi. Inoltre, solo Migrazioni Code First modifica lo schema dei dati lasciando intatti i dati esistenti.

Eseguire lo streaming dei log delle applicazioni

È possibile eseguire lo streaming dei messaggi di traccia direttamente dall'app Web di Azure in Visual Studio.

Aprire Controllers\TodosController.cs.

Ogni azione inizia con un metodo Trace.WriteLine(). Questo codice viene aggiunto per illustrare come aggiungere messaggi di traccia all'app Web di Azure.

Aprire Esplora server

Dal menu Visualizza selezionare Esplora server. È possibile configurare la registrazione per l'app Web di Azure in Esplora server.

Abilitare lo streaming dei log

In Esplora server espandere Azure > Servizio app.

Espandere il gruppo di risorse myResourceGroup creato al momento della creazione dell'app Web di Azure.

Fare clic con il pulsante destro del mouse sull'app Web di Azure e scegliere Visualizza log in streaming.

Abilitare lo streaming dei log

Lo streaming dei log viene eseguito nella finestra Output.

Streaming dei log nella finestra Output

I messaggi di traccia tuttavia non sono ancora visibili. Ciò avviene perché la prima volta che si seleziona Visualizza log in streaming l'app Web di Azure imposta il livello di traccia su Error che comporta soltanto la registrazione degli eventi di errore (con il metodo Trace.TraceError()).

Modificare i livelli di traccia

Per modificare i livelli di traccia per generare altri messaggi di traccia, tornare a Esplora server.

Fare di nuovo clic con il pulsante destro del mouse sull'app Web di Azure e selezionare Impostazioni.

Nell'elenco a discesa Registrazione applicazioni (file system) selezionare Dettagli. Fare clic su Salva.

Modificare il livello di traccia in Dettagli

Suggerimento

È possibile provare i diversi livelli di traccia per verificare i tipi di messaggi visualizzati per ogni livello. Ad esempio, il livello Informazioni include tutti i log creati da Trace.TraceInformation(), Trace.TraceWarning() e Trace.TraceError(), ma non i log creati da Trace.WriteLine().

Nel browser provare a fare clic all'interno dell'applicazione dell'elenco attività in Azure. Viene eseguito lo streaming dei messaggi di traccia nella finestra Output in Visual Studio.

Application: 2017-04-06T23:30:41  PID[8132] Verbose     GET /Todos/Index
Application: 2017-04-06T23:30:43  PID[8132] Verbose     GET /Todos/Create
Application: 2017-04-06T23:30:53  PID[8132] Verbose     POST /Todos/Create
Application: 2017-04-06T23:30:54  PID[8132] Verbose     GET /Todos/Index

Arrestare lo streaming dei log

Per arrestare il servizio di streaming dei log, fare clic sul pulsante Interrompi monitoraggio nella finestra Output.

Arrestare lo streaming dei log

Gestire l'app Web di Azure

Accedere al portale di Azure per visualizzare l'app Web creata.

Nel menu a sinistra fare clic su Servizi app e quindi sul nome dell'app Web di Azure.

Passare all'app Web di Azure nel portale

Viene visualizzata la pagina dell'app Web.

Per impostazione predefinita, il portale visualizza la pagina Panoramica. che offre una visualizzazione dello stato dell'app. In questa pagina è anche possibile eseguire attività di gestione di base come esplorare, arrestare, avviare, riavviare ed eliminare. Le schede sul lato sinistro della pagina mostrano le diverse pagine di configurazione che è possibile aprire.

Pagina del servizio app nel portale di Azure

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 esercitazione si è appreso come:

  • Creare un database SQL in Azure
  • Connettere un'app ASP.NET al database SQL
  • Distribuire l'app in Azure
  • Aggiornare il modello di dati e ridistribuire l'app
  • Eseguire lo streaming dei log da Azure al terminale
  • Gestire l'app nel portale di Azure

Passare all'esercitazione successiva per apprendere come eseguire il mapping di un nome DNS personalizzato all'app Web.