Zelfstudie: Een ASP.NET-app implementeren in Azure met Azure SQL Database

Azure App Service biedt een uiterst schaalbare webhostingservice met self-patchfunctie. In deze zelfstudie leert u hoe u een gegevensgestuurde ASP.NET-app implementeert in App Service en de app verbindt met Azure SQL Database. Wanneer u klaar bent, hebt u een ASP.NET-app die wordt uitgevoerd in Azure en is verbonden met SQL Database.

In deze zelfstudie leert u het volgende:

Als u geen Azure-abonnement hebt, kunt u een gratis Azure-account maken voordat u begint.

Vereisten

Vereisten om deze zelfstudie te voltooien:

Installeer Visual Studio 2022 met de ASP.NET- en webontwikkelingsworkloads en Azure-ontwikkelworkloads .

Als u Visual Studio al hebt geïnstalleerd, voegt u de workloads toe in Visual Studio door te klikken op Extra>Hulpprogramma's en functies ophalen.

Het voorbeeld downloaden

1. Download het voorbeeldproject.

2. Extraheer (uitpakken) het dotnet-sqldb-zelfstudie-master.zip-bestand.

Het voorbeeldproject bevat een eenvoudige ASP.NET MVC-CRUD-app (create-read-update-delete) die gebruikmaakt van Entity Framework Code First.

De app uitvoeren

1. Open het bestand dotnet-sqldb-tutorial-master/DotNetAppSqlDb.sln in Visual Studio.

2. Typ F5 om de app uit te voeren. De app wordt weergegeven in de standaardbrowser.

   Notitie

   Als u Visual Studio en de vereisten alleen hebt geïnstalleerd, moet u mogelijk ontbrekende pakketten installeren via NuGet.

3. Selecteer de koppeling Nieuwe maken en maak enkele taakitems.

   

4. Test de links Bewerken, Details en Verwijderen.

De app maakt gebruik van een databasecontext om met de database te verbinden. In dit voorbeeld gebruikt de databasecontext een verbindingsreeks met de naam MyDbConnection. De verbindingsreeks waarnaar wordt verwezen in het bestand Models/MyDatabaseContext.cs is ingesteld in het bestand Web.config. De naam van de tekenreeks wordt verderop in de zelfstudie gebruikt om de Azure-app te verbinden met een Azure SQL Database.

De ASP.NET-toepassing publiceren in Azure

1. Klik in de Solution Explorer met de rechtermuisknop op uw project DotNetAppSqlDb en selecteer Publiceren.

   

2. Selecteer Azure als doel en klik op Volgende.

3. Zorg ervoor dat Azure-app Service (Windows) is geselecteerd en klik op Volgende.

Aanmelden en een app toevoegen

1. Klik in het dialoogvenster Publiceren op Aanmelden.

2. Meld u aan bij uw Azure-abonnement. Als u al bent aangemeld bij een Microsoft-account, moet u ervoor zorgen dat dit account uw Azure-abonnement bevat. Als het aangemelde Microsoft-account niet uw Azure-abonnement bevat, klikt u erop om het juiste account toe te voegen.

3. Klik in het deelvenster App Service-exemplaren op +.

   

Naam van web-app configureren

U kunt de naam van de gegenereerde web-app houden of wijzigen in een andere unieke naam (geldige tekens zijn a-z, 0-9 en -). De naam van de web-app wordt gebruikt als onderdeel van de standaard-URL voor uw app (<app_name>.azurewebsites.net, waarbij <app_name> de naam is van uw web-app). De naam van de web-app moet uniek zijn in alle apps in Azure.

Een brongroep maken

Een resourcegroep is een logische container waarin Azure-resources, zoals web-apps, databases en opslagaccounts, worden geïmplementeerd en beheerd. U kunt bijvoorbeeld later de hele resourcegroep in één stap verwijderen.

1. Klik naast Resourcegroep op Nieuw.

   

2. Noem de resourcegroep myResourceGroup.

Een App Service-plan maken

Een App Service-plan geeft de locatie, de grootte en de functies van de webserverfarm aan die als host fungeert voor uw app. U kunt geld besparen bij het hosten van meerdere apps door de web-apps te configureren voor het delen van één App Service-plan.

In App Service-plannen wordt het volgende gedefinieerd:

• Regio (bijvoorbeeld: Europa - noord, VS - oost of Azië - zuidoost)
• Exemplaargrootte (klein, normaal of groot)
• Het schaalaanpassingsaantal (1 tot 20 exemplaren)
• SKU (Free, Shared, Basic, Standard of Premium)

1. Klik naast Hostingabonnement op Nieuw.

2. Configureer in het dialoogvenster App Service-plan configureren het nieuwe App Service-plan met de volgende instellingen en klik op OK:

   Instelling	Voorgestelde waarde	Voor meer informatie
   App Service-plan	myAppServicePlan	App Service-abonnementen
   Locatie	Europa -west	Azure-regio's
   Grootte	Beschikbaar	Prijscategorieën

   

3. Klik op Maken en wacht tot de Azure-resources zijn gemaakt.

4. In het dialoogvenster Publiceren ziet u de resources die u hebt geconfigureerd. Klik op Voltooien.

   

Een server en database maken

Voordat u een database maakt, hebt u een logische SQL-server nodig. Een logische SQL-server is een logische omgeving met een groep met databases die worden beheerd als groep.

1. Schuif in het dialoogvenster Publiceren omlaag naar de sectie Serviceafhankelijkheden . Klik naast SQL Server Database op Configureren.

   Notitie

   Zorg ervoor dat u de SQL Database configureert vanaf de pagina Publiceren in plaats van de pagina Verbinding maken ed Services.

   

2. Selecteer Azure SQL Database en klik op Volgende.

3. Klik in het dialoogvenster Azure SQL Database configureren op +.

4. Klik naast databaseserver op Nieuw.

   De servernaam wordt gebruikt als onderdeel van de standaard-URL voor uw server. <server_name>.database.windows.net Deze moet uniek zijn op alle servers in Azure SQL. Wijzig de servernaam in een gewenste waarde.

5. Voeg een administrator-gebruikersnaam en een wachtwoord toe. Zie Wachtwoordbeleid voor de vereisten voor wachtwoordcomplexiteit.

   Onthoud deze gebruikersnaam en dit wachtwoord. U hebt deze later nodig om de server te beheren.

   

   Belangrijk

   Hoewel u uw wachtwoord in de verbindingsreeksen wordt gemaskeerd (in Visual Studio en ook in App Service), vergroot het feit dat het ergens wordt bijgehouden de kwetsbaarheid van uw app voor aanvallen. App Service kan beheerde service-identiteiten gebruiken om dit risico te elimineren door het bijhouden van geheimen in uw code of app-configuratie geheel onnodig te maken. Zie voor meer informatie Volgende stappen.

6. Klik op OK.

7. Behoud in het dialoogvenster Azure SQL Database de standaard gegenereerde databasenaam. Selecteer Maken en wacht totdat de databasebronnen zijn gemaakt.

   

Databaseverbinding configureren

1. Wanneer de wizard klaar is met het maken van de databasebronnen, klikt u op Volgende.

2. Typ MyDb Verbinding maken ion in de database verbindingsreeks naam. Deze naam moet overeenkomen met de verbindingsreeks waarnaar wordt verwezen in Models/MyDatabaseContext.cs.

3. Typ in de gebruikersnaam en het wachtwoord voor de databaseverbinding de gebruikersnaam en het wachtwoord van de beheerder die u hebt gebruikt in Een server maken.

4. Zorg ervoor dat Azure-app Instellingen is geselecteerd en klik op Voltooien.

   Notitie

   Als u in plaats daarvan lokale gebruikersgeheimbestanden ziet, moet u SQL Database hebben geconfigureerd vanaf de pagina Verbinding maken ed Services in plaats van de pagina Publiceren.

   

5. Wacht tot de configuratiewizard is voltooid en klik op Sluiten.

Uw ASP.NET-app implementeren

1. Schuif op het tabblad Publiceren terug naar boven en klik op Publiceren. Zodra uw ASP.NET-app is geïmplementeerd in Azure. De standaardbrowser wordt gestart met de URL van de geïmplementeerde app.

2. Voeg enkele taakitems toe.

   

   Gefeliciteerd! Uw gegevensgestuurde ASP.NET-toepassing wordt live in Azure App Service uitgevoerd.

Lokale toegang tot de database

Met Visual Studio kunt u uw nieuwe database in Azure eenvoudig verkennen en beheren in de SQL Server-Objectverkenner. De nieuwe database heeft de firewall al geopend voor de App Service-app die u hebt gemaakt. Maar als u deze wilt openen vanaf uw lokale computer (bijvoorbeeld vanuit Visual Studio), moet u een firewall openen voor het openbare IP-adres van uw lokale computer. Als uw internetprovider uw openbare IP-adres wijzigt, moet u de firewall opnieuw configureren om opnieuw toegang te krijgen tot de Azure-database.

Een databaseverbinding maken

1. Vanuit het Weergave-menu selecteert u SQL Server-objectverkenner.

2. Aan de bovenkant van SQL Server-objectverkenner, klikt u op de knop SQL Server toevoegen.

Verbinding met de database configureren

1. Vouw in het dialoogvenster Verbinden het Azure-knooppunt uit. Al uw SQL Database-exemplaren in Azure worden hier weergegeven.

2. Selecteer de database die u eerder hebt gemaakt. De verbinding die u eerder hebt gemaakt, wordt automatisch onderaan ingevuld.

3. Typ het wachtwoord van de databasebeheerder dat u eerder hebt gemaakt en klik op Verbinden.

   

Clientverbinding vanaf uw computer toestaan

Het dialoogvenster Een nieuwe firewallregel maken. Een server staat standaard alleen verbindingen naar de bijbehorende databases toe vanuit Azure-services, zoals uw Azure-app. Maak een firewallregel op serverniveau om buiten Azure verbinding te maken met uw database. De firewallregel staat het openbare IP-adres van uw lokale computer toe.

In het dialoogvenster is het openbare IP-adres van uw computer al ingevuld.

1. Zorg ervoor dat Mijn client-IP toevoegen is geselecteerd en klik op OK.

   

   Zodra de Visual Studio klaar is met het maken van de firewallinstelling voor uw exemplaar van SQL Database, wordt uw verbinding weergegeven in SQL Server-objectverkenner.

   Hier kunt u de meest voorkomende databasebewerkingen uitvoeren, zoals het uitvoeren van query's, het maken van weergaven en opgeslagen procedures en meer.

2. Breid uw verbindingsdatabases >><uw databasetabellen>> uit. Klik met de rechtermuisknop op de Todoes-tabel en selecteer Gegevens weergeven.

   

De app bijwerken met Code First Migrations

U kunt de vertrouwde hulpprogramma's in Visual Studio gebruiken om uw database en app in Azure bij te werken. In deze stap kunt u met Code First Migrations in Entity Framework een wijziging aanbrengen in uw databaseschema en deze publiceren naar Azure.

Zie voor meer informatie over het gebruik van Entity Framework Code First Migrations, Aan de slag met Entity Framework 6 Code First met MVC 5.

Gegevensmodel bijwerken

Open Models\Todo.cs in de code-editor. Voeg de volgende eigenschap toe aan de klasse ToDo:

public bool Done { get; set; }

Code First Migrations lokaal uitvoeren

Voer enkele opdrachten uit om de lokale database bij te werken.

1. Klik in het menu Hulpprogramma’s op NuGet Package Manager>Package Manager Console.

2. Schakel in het Package Manager Console-venster Code First Migrations in:

   Enable-Migrations
   

3. Voeg een migratie toe:

   Add-Migration AddProperty
   

4. Werk de lokale database bij:

   Update-Database
   

5. Typ Ctrl+F5 om de app uit te voeren. Test de links voor bewerkingen, details, en maken.

Als de toepassing wordt geladen zonder fouten, is Code First Migrations voltooid. Uw pagina ziet er echter nog steeds hetzelfde uit omdat uw toepassingslogica deze nieuwe eigenschap nog niet gebruikt.

Nieuwe eigenschap gebruiken

Breng enkele wijzigingen aan de code aan zodat de eigenschap Done kan worden gebruikt. Om deze zelfstudie eenvoudig te houden, wijzigt u eerst de weergaven Index en Create om de eigenschap in actie te zien.

1. Open Controllers\TodosController.cs.

2. Zoek de methode Create() in regel 52 en voeg Done toe aan de lijst met eigenschappen in het kenmerk Bind. Als u klaar bent, ziet uw methode Create() er uit als de onderstaande code:

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

3. Open Views\Todos\Create.cshtml.

4. In de Razor-code zou u een <div class="form-group">-element moeten zien dat model.Description gebruikt en vervolgens een ander <div class="form-group">-element voor model.CreatedDate. Voeg direct na deze twee elementen een ander <div class="form-group">-element voor model.Done toe:

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

5. Open Views\Todos\Index.cshtml.

6. Zoek het lege element <th></th>. Vlak boven dit element voegt u de volgende Razor-code toe:

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

7. Zoek het <td>-element dat de helpermethoden Html.ActionLink() bevat. Voeg boven dit <td> een ander <td>-element toe met de volgende Razor-code:

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

   Meer hebt u niet nodig om de wijzigingen in de weergaven Index en Create te zien.

8. Typ Ctrl+F5 om de app uit te voeren.

U kunt nu een taakitem toevoegen en Gereed aanvinken. Het moet nu als een voltooid taakitem worden weergegeven op uw startpagina. In de weergave Edit wordt het veld Done niet getoond omdat u de weergave Edit niet hebt gewijzigd.

Code First Migrations in Azure uitvoeren

Nu het wijzigen van uw code werkt, met inbegrip van de databasemigratie, moet u deze publiceren naar uw Azure-app en ook uw SQL Database bijwerken met Code First Migrations.

1. Klik net als voorheen met de rechtermuisknop op uw project en selecteer Publiceren.

2. Klik op Meer acties>Bewerken om de publicatie-instellingen te openen.

   

3. Selecteer in de vervolgkeuzelijst MyDatabaseContext de databaseverbinding voor uw Azure SQL Database.

4. Selecteer Code First-migraties uitvoeren (wordt uitgevoerd bij de start van toepassing), klik vervolgens op Opslaan.

   

Uw wijzigingen publiceren

Nu dat u Code First Migrations in uw Azure-app hebt ingeschakeld, moet u uw codewijzigingen publiceren.

1. Klik op de publicatiepagina op Publiceren.

2. Probeer opnieuw taakitems toe te voegen en selecteer Gereed, dan moeten ze worden weergegeven in uw startpagina als een voltooid item.

   

Alle bestaande taakitems worden nog steeds weergegeven. Wanneer u uw ASP.NET-toepassing opnieuw publiceert, gaan bestaande gegevens in uw SQL Database niet verloren. En met Code First Migrations wordt alleen het gegevensschema gewijzigd. De bestaande gegevens blijven ongewijzigd.

Toepassingslogboeken streamen

U kunt traceringsberichten rechtstreeks vanuit uw Azure-app streamen met Visual Studio.

Open Controllers\TodosController.cs.

Elke actie begint met een Trace.WriteLine()-methode. Deze code wordt toegevoegd om te tonen hoe u traceringsberichten toevoegt aan uw Azure-app.

Logboekstreaming activeren

1. Schuif op de publicatiepagina omlaag naar de sectie Hosting .

2. Klik in de rechterhoek op ...>Streaminglogboeken weergeven.

   

   De logboeken worden nu gestreamd naar het venster Uitvoer.

   

   U ziet echter nog geen traceerberichten. Wanneer u voor het eerst Streaminglogboeken bekijken selecteert, stelt uw Azure-app namelijk eerst het traceringsniveau op Error in. Dit legt alleen foutgebeurtenissen vast (met de methode Trace.TraceError()).

Traceringsniveaus wijzigen

1. Als u de traceringsniveaus wilt wijzigen om andere traceringsberichten uit te voeren, gaat u terug naar de publicatiepagina.

2. Klik in de sectie Hosting op ...>Open in Azure Portal.

3. Selecteer App Service-logboeken in het linkermenu op de portalbeheerpagina voor uw app.

4. Selecteer uitgebreid in niveau onder Toepassingslogboeken (bestandssysteem). Klik op Opslaan.

   Fooi

   U kunt experimenteren met verschillende traceringsniveaus om te zien welke typen berichten worden weergegeven voor elk niveau. Het niveau Informatie omvat bijvoorbeeld alle logboeken die zijn gemaakt voor Trace.TraceInformation(), Trace.TraceWarning() en Trace.TraceError(), maar niet de logboeken die zijn gemaakt door Trace.WriteLine().

5. Navigeer in uw browser opnieuw naar uw app op http://< appnaam.azurewebsites.net> en klik vervolgens rond de takenlijsttoepassing in Azure. Nu worden de traceringsberichten gestreamd naar het venster Uitvoer 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
   

Logboekstreaming stoppen

Om de service logboekstreaming te stoppen, klikt u op de knop Bewaking stoppen in het venster Uitvoer.

Resources opschonen

In de voorgaande stappen hebt u Azure-resources in een resourcegroep gemaakt. Als u deze resources in de toekomst waarschijnlijk niet nodig hebt, kunt u ze verwijderen door de resourcegroep te verwijderen.

1. Selecteer op de pagina Overzicht in Azure Portal de link myResourceGroup onder Resourcegroep.
2. Controleer op de pagina van de resourcegroep of de weergegeven resources de resources zijn die u wilt verwijderen.
3. Selecteer Verwijderen, typ myResourceGroup in het tekstvak en selecteer vervolgens Verwijderen.

Volgende stappen

In deze zelfstudie heeft u het volgende geleerd:

Ga naar de volgende zelfstudie om te ontdekken hoe u eenvoudig de beveiliging van uw verbinding met Azure SQL Database kunt verbeteren.

Meer resources:

Wilt u uw clouduitgaven optimaliseren en geld besparen?