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.

Gepubliceerde ASP.NET-toepassing in Azure App Service

In deze zelfstudie leert u het volgende:

  • Een database maken in Azure SQL Database
  • Een ASP.NET-app verbinden met SQL Database
  • De app implementeren in Azure
  • Het gegevensmodel bijwerken en de app opnieuw implementeren
  • Logboeken vanaf Azure naar uw terminal streamen
  • De app in Azure Portal beheren

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

Vereisten

Vereisten voor het voltooien van deze zelfstudie:

U moet Visual Studio 2019 met de ASP.NET- en webontwikkelworkload installeren.

Als u Visual Studio al hebt geïnstalleerd, voegt u de workloads toe in Visual Studio door te klikken op Hulpprogramma's > 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 Ctrl+F5 voor het uitvoeren van de app zonder foutopsporing. De app wordt weergegeven in de standaardbrowser.

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

    Het dialoogvenster Nieuw ASP.NET-project

  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.

    Publiceren vanuit Solution Explorer

  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 dialoog venster publiceren op een account toevoegen in de vervolg keuzelijst account beheerder.

  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 deel venster instanties van app service op + .

    Aanmelden bij Azure

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.

Notitie

Selecteer nog geen maken .

Het dialoogvenster App Service maken

Een resourcegroep 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.

    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 hosting plan op Nieuw.

  2. Configureer in het dialoog venster 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 Gratis Prijscategorieën

    Een App Service-plan maken

  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.

    de resources die u hebt gemaakt

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 dialoog venster publiceren omlaag naar de sectie service afhankelijkheden . Klik naast SQL Server Data Base op configureren.

    SQL Database afhankelijkheid configureren

  2. Selecteer Azure SQL database en klik op volgende.

  3. Klik in het dialoog venster Azure SQL database configureren op + .

  4. Klik naast database server op Nieuw.

    Er wordt een server naam gegenereerd. Deze naam wordt gebruikt als onderdeel van de standaard-URL voor de server <server_name>.database.windows.net. Deze moet uniek zijn op alle servers in Azure SQL. U kunt de servernaam wijzigen, maar bewaar voor deze zelfstudie de gegenereerde 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.

    Server maken

    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. In het dialoog venster Azure SQL database behoudt u de standaard naam van de gegenereerde Data Base. Selecteer maken en wacht tot de database resources zijn gemaakt.

    Database configureren

Database verbinding configureren

  1. Klik op volgende wanneer de wizard klaar is met het maken van de database resources.

  2. Typ MyDbConnection in de naam van de Data Base Connection String. Deze naam moet overeenkomen met de verbindingsreeks waarnaar wordt verwezen in Models/MyDatabaseContext.cs.

  3. Typ in de gebruikers naam van de database verbinding en het wacht woord voor de database verbinding de gebruikers naam en het wacht woord van de beheerder die u hebt gebruikt in een server maken.

  4. Zorg ervoor dat Azure-app instellingen is geselecteerd en klik op volt ooien.

    De databaseverbindingsreeks configureren

  5. Wacht totdat de configuratie wizard is voltooid en klik op sluiten.

Uw ASP.NET-app implementeren

  1. Blader in het tabblad publiceren naar de bovenkant en klik op publiceren. Zodra de 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.

    Gepubliceerde ASP.NET-toepassing in Azure-app

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

Lokale toegang tot de database

Met Visual Studio kunt u eenvoudig uw nieuwe data base in azure verkennen en beheren in de SQL Server-objectverkenner. De nieuwe data base heeft de firewall al geopend in de App Service-app die u hebt gemaakt, maar om toegang te krijgen vanaf uw lokale computer (bijvoorbeeld vanuit Visual Studio), moet u een firewall openen voor het open bare IP-adres van uw lokale computer. Als uw Internet serviceprovider uw open bare IP-adres wijzigt, moet u de firewall opnieuw configureren voor toegang tot de Azure-data base.

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.

    Databaseverbinding vanuit Visual Studio configureren

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.

    Firewallregel maken

    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. Vouw uw verbinding uit > Databases > <uw database > > Tabellen. Klik met de rechtermuisknop op de Todoes-tabel en selecteer Gegevens weergeven.

    SQL Database-objecten verkennen

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 niet nog 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.

    Publicatie-instellingen openen

  3. Selecteer in de vervolg keuzelijst MyDatabaseContext de database verbinding voor uw Azure SQL database.

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

    Code First Migrations inschakelen in Azure-app

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.

    Azure-app na Code First Migration

Alle bestaande taakitems worden nog steeds weergegeven. Als u de ASP.NET Core-toepassing opnieuw publiceert, blijven bestaande gegevens in SQL Database behouden. 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. Selecteer in het menu weer gave de optie Cloud Explorer.

  2. Vouw in Cloud Explorer het Azure-abonnement uit met uw app en vouw app service uit.

  3. Klik met de rechtermuisknop op uw Azure-app en selecteer Streaminglogboeken bekijken.

    Logboekstreaming activeren

    De logboeken worden nu gestreamd naar het venster Uitvoer.

    Logboekstreaming in 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 tracerings niveaus wilt wijzigen om andere tracerings berichten uit te voeren, gaat u terug naar Cloud Explorer.

  2. Klik met de rechter muisknop op uw app en selecteer openen in portal.

  3. Selecteer op de pagina Portal beheer voor uw app in het linkermenu app service logboeken.

  4. Onder toepassings Logboeken (bestands systeem) selecteert u uitgebreid in niveau. Klik op Opslaan.

    Wijzig het traceringsniveau naar Uitgebreid

    Tip

    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://<uw app-naam>.azurewebsites.net, probeer vervolgens rond te klikken in de lijst met taken 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.

Logboekstreaming stoppen

Uw Azure-app beheren

Ga naar Azure Portal om de web-app te beheren. Zoek en selecteer App Services.

Zoeken naar Azure App Services

Selecteer de naam van uw Azure-app.

Navigatie naar Azure-app in de portal

U bevindt zich op de pagina van uw app.

In de portal wordt standaard de pagina Overzicht getoond. Deze pagina geeft u een overzicht van hoe uw app presteert. Hier kunt u ook algemene beheertaken uitvoeren, zoals bladeren, stoppen, starten, opnieuw opstarten en verwijderen. De tabbladen aan de linkerkant van de pagina tonen de verschillende configuratiepagina's die u kunt openen.

App Service-pagina in Azure Portal

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:

  • Een database maken in Azure SQL Database
  • Een ASP.NET-app verbinden met SQL Database
  • De app implementeren in Azure
  • Het gegevensmodel bijwerken en de app opnieuw implementeren
  • Logboeken vanaf Azure naar uw terminal streamen
  • De app in Azure Portal beheren

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?